Closed
Description
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