Cannot access $bvToast in Nuxt plugin

Describe the bug

I want to display API errors as toast messages. I have to use a Nuxt plugin to work with Axios error interceptors. The plugin has access to the Vue instance app from the Nuxt context. However, the app instance is missing the $bvToast injection. So calls like app.$bvToast.toast('some toast message') fail.

Steps to reproduce the bug

1. Create a Nuxt plugin called /plugins/axios-toast.js

export default function ({ $axios, app }) {
  $axios.onError(error => {
    app.$bvToast.toast(error)
  })
}

1. Reference the plugin in nuxt.config.js

  plugins: [
    '~plugins/axios-toast.js'
  ],

1. Intentionally trigger an invalid route

<b-button @click="$axios.$get('badroute')">Do it</b-button>

1. Observe the error in the browser

TypeError: Cannot read property ‘toast’ of undefined

Expected behavior

The Vue instance app in the Nuxt plugin context should have the $bvToast injected.

Versions

Libraries:

• BootstrapVue: 2.4.1
• Bootstrap: 4.4.1
• Nuxt 2.11.0
• Nuxt Axios 5.9.5

[ashwinkshenoy]

I used this: $nuxt.$bvToast.toast(error) in my Axios interceptor and works fine!

[ravgeetdhillon]

In case someone is using Client-Side Rendering only, this issue can be solved by using window.$nuxt

For e.g.

export default function ({ $axios }) {
  $axios.onError(error => {
    window.$nuxt.$bvToast.toast(error)
  })
}