Access this.<module> from within Nuxt plugin

user_1352288 0
Viewed 561

Is there any way I can access a JS API exposed by a Nuxt module from within a client-side plugin?

Context: I'm using Buefy/Bulma, which is loaded like this in nuxt.config.js:

modules: [
    ['nuxt-buefy', {css: false}],
],

Buefy exposes this.$buefy.<etc> which is accessible from components.

But I want to access this API from within a client-side plugin, utils.js, which is loaded like this:

plugins: ['~/plugins/utils.js'],

And utils.js itself:

export default ({app}, inject) => {
    inject('myUtil', (msg, isErr) => {
        app.$buefy; //<-- undefined
        ....

I assume this is an ordering issue, i.e. Buefy is being loaded after my plugin or something. I can't do this in a static JS file loaded via meta.scripts as that won't have access to the app (I assume).

Anything I can do here?

buefy nuxt.js vue.js javascript
1 Answers

Try this in your plugin js file

import { ToastProgrammatic as toast } from 'buefy';

export default (_, inject) => {
  inject('appHelper', {
    displayToast(duration = null, msg = null, position = null, type = null) {
      toast.open({
        duration: duration || 3000,
        message: msg || 'Update Successful',
        position: position || 'is-bottom-left',
        type: type || 'is-success',
      });
    },
  });
};
user_139250450
Related