Skip to content

$bvToast not accessible from axios interceptor #3262

Closed
@kaiwerther

Description

@kaiwerther

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions