CODEWITHSUNDEEP
javascriptvue.jsbuefy
Raj
Raj

Reputation: 1655

Using a Buefy component outside of Vue

How can I create a Buefy notification outside of a Vue component? For example, I have the following axios interceptor defined with an attempted use of a Buefy notification:

import axios from "axios";
import { Notification } from "buefy/dist/components/notification";

axios.interceptors.response.use(
  response => {
    if (response.data.flash) {
      Notification.open(response.data.flash);
    }
    return response;
  },
  error => {
    if (error.response) {
      Notification.open(error.response.data.flash);
      return Promise.reject(error.response);
    }
  }
);

export default axios;

Which leads to this error in console:

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'open' of undefined"

What am I doing wrong?

Upvotes: 2

Views: 770

Answers (1)

Raj
Raj

Reputation: 1655

Ok, figured out the answer shortly after posting this. Leaving the question up with the answer just in case anyone else runs into the issue. Apparently, import { Notification } from "buefy/dist/components/notification" was an old way to import, and instead should be imported like this:

import { NotificationProgrammatic as Notification } from "buefy";

Upvotes: 2

Related Questions