$bvToast not accessible from axios interceptor

Describe the bug

When accessing $bvToast from inside a axios interceptor it comes up as undefined.

Steps to reproduce the bug

axios.js

import axios from 'axios';
import VueAxios from 'vue-axios';
import Vue from 'vue';
Vue.use(VueAxios, axios);

bootstrap.js

import Vue from 'vue';
import '@/plugins/bootstrap_custom.scss';
import Toast from 'bootstrap-vue/es/components/toast';
Vue.use(Toast);

axiosErrorHandler.js

import axios from 'axios';
import Vue from 'vue';
axios.interceptors.response.use(r => r, (error) => {
  console.log(Vue.prototype);
  Vue.prototype.$bvToast.toast(`Server call returned error ${error.response.status}`, {
    title: 'Error',
    variant: 'error',
  });
  return Promise.reject(error);
});

main.js

...
import '@/plugins/bootstrap';
import '@/plugins/axios';
import '@/plugins/axiosErrorHandler';
...

-> $bvToast shows up at the console.log as undefined -> get $bvToast shows up at the console.log at location bv-toast.js?3163:243 -> Error because Vue.prototype.$bvToast is undefined -> using this.$bvToast from an component works fine

Expected behavior

Vue.prototype.$bvToast is defined and Vue.prototype.$bvToast.toast works. OR Some remark about this behavior in the docs AND / OR A guide how to correctly implement this in the docs

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.19
• Bootstrap: 4.3.1
• Vue: 2.6.10
• Axios: 0.18.0

Environment:

• Device: PC
• OS: Win 10
• Browser: Chrome
• Version: 74.0.3729.131

[xorik]

For anyone who faced the issue, here’s working code:

    axios.interceptors.response.use(
      response => response,
      error => {
        // You can extract message from your API, if you want
        const message = error.response.data.error.message || error.response.statusText
        const vm = new Vue()
        vm.$bvToast.toast(`Server call returned error: ${message}`, {
          title: `${error.response.statusText} (${error.response.status})`,
          variant: 'danger',
        })

        return Promise.reject(error)
      },
    )

[tmorehouse]

To get it working (although it won’t have access to the global app $root instance for using show() method):

import axios from 'axios';
import Vue from 'vue';
axios.interceptors.response.use(r => r, (error) => {
  const vm = new Vue.extend({})
  vm.$bvToast.toast(`Server call returned error ${error.response.status}`, {
    title: 'Error',
    variant: 'error',
  });
  return Promise.reject(error);
});