$bvToast not getting injected into vue component object

Hello, thank you for your work, really appreciate. I have difficulties to manage toast via vue component methods because I am not getting injected $bvToast object.

Describe the bug

$bvToast not getting injected into component

Error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'hide' of undefined"

Steps to reproduce the bug

1. Go to https://codesandbox.io/embed/bootstrap-vue-missing-bvtoast-j3umo
2. Click on button
3. See error in console

Expected behavior

Closing opened toast

Versions

Libraries:

• BootstrapVue: 2.0.0.rc27
• Bootstrap: 4.3.1
• Vue: 2.5.22

Environment:

online editor

Demo link

https://codesandbox.io/embed/bootstrap-vue-missing-bvtoast-j3umo

Thank you very much! 😃

[tmorehouse]

You can only pass one plugin to Vue.use(...) at a time. You need to Vue.use(...) each plugin on a separate line. Vue.use(...) interprets the second argument as a configuration object to pass to the plugin, and ignores the 3rd argument onwards.

When you do this:

Vue.use(
  LayoutPlugin, 
  ModalPlugin,
  BVModalPlugin,
  BVToastPlugin
)

Vue installs LayoutPlugin only, and attempts to pass the second argument (ModalPlugin) as a configuration object to LayoutPlugin, which of course it is not a configuration object.

Each plugin has an install method which Vue calls to install the plugin. This is why you are seeing the "unknown config property 'install'" warning.

This is the correct way:

Vue.use(LayoutPlugin)
Vue.use(ModalPlugin)
Vue.use(BVToastPlugin)

If you are including the ModalPlugin, it automatically includes the BVModalPlugin. Similarly for ToastPlugin which automatically includes BVToastPlugin.

[bakztfuture]

I’ve tried the above, but it’s still not injecting the toast component. I’m using "bootstrap-vue": "^2.0.0-rc.27" too

main.js file

import { 
  LayoutPlugin, 
  ModalPlugin,
  BVModalPlugin,
  BNavbar,
  BNavbarNav,
  BNavItem,
  BNavbarBrand,
  BNavbarToggle,
  BNavForm,
  BCollapse,
  BForm,
  BAlert,
  BModal,
  BButton,
  BProgress,
  BVToastPlugin
} from 'bootstrap-vue'

Vue.use(
  LayoutPlugin, 
  ModalPlugin,
  BVModalPlugin,
  BVToastPlugin
)

inside methods in my view, I’m calling it like so:

    errorToast(){
      this.$bvToast.toast("Special Message Here", {
        title: 'Special Title Goes Here',
        variant: "danger",
        toaster: 'b-toaster-top-full',
        solid: true,
        noAutoHide: true,
        appendToast: true
      })
    },

Inside my console, I’m seeing this error: warn.js?686b:11 [BootstrapVue warn]: config: unknown config property "install"

Stack expands to:

[BootstrapVue warn]: config: unknown config property "install"
warn @ warn.js?686b:11
(anonymous) @ config-set.js?e331:54
setConfig @ config-set.js?e331:51
setConfig @ config-set.js?e331:137
install @ plugins.js?3790:50
Vue.use @ vue.runtime.esm.js?2b0e:5101
(anonymous) @ main.js?56d7:29
./src/main.js @ app.js:7944
__webpack_require__ @ app.js:724
fn @ app.js:101
1 @ app.js:8630
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794

Inside mounted when I try to print the bvToast object, it simply returns undefined in my console:

let $vm = this;
console.log($vm.$bvToast);

Can’t seem to figure out where I’ve gone wrong. Would sincerely appreciate any ideas