To utilize this.<module> within a Nuxt plugin, simply access it

Question

To utilize this.<module> within a Nuxt plugin, simply access it

How can I access a JS API exposed by a Nuxt module from a client-side plugin?

Situation: I am utilizing Buefy/Bulma, which is implemented in nuxt.config.js like this:

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

Buefy provides this.$buefy.<etc> accessible from components.

However, I am interested in accessing this API from within a client-side plugin, specifically utils.js, configured as follows:

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

And the content of utils.js:

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

I suspect it may be an ordering issue, perhaps Buefy is loaded after my plugin. Using a static JS file loaded via meta.scripts will not work as it lacks access to the app (I presume).

Is there any solution available for this situation?

javascript vue.js nuxt.js buefy

Answer 1

Answer №1

Implement this code snippet in your plugin JavaScript file

import { ToastrProgrammatic as toastr } from 'buefy';

export default (_, inject) => {
  inject('appUtility', {
    showToast(duration = null, message = null, position = null, messageType = null) {
      toastr.open({
        duration: duration || 3000,
        message: message || 'Action Successful',
        position: position || 'bottom-left',
        type: messageType || 'success',
      });
    },
  });
};

Answer 2

Implement this code snippet in your plugin JavaScript file

import { ToastrProgrammatic as toastr } from 'buefy';

export default (_, inject) => {
  inject('appUtility', {
    showToast(duration = null, message = null, position = null, messageType = null) {
      toastr.open({
        duration: duration || 3000,
        message: message || 'Action Successful',
        position: position || 'bottom-left',
        type: messageType || 'success',
      });
    },
  });
};

To utilize this.<module> within a Nuxt plugin, simply access it

Answer №1

Similar questions

Merge the movements of sliding a block along with the cursor and refreshing a sprite displayed on the block

triggering the onsen's setMainPage function when clicked using a variable from ng-repeat loop

Entering a new row and sending information through ajax

Sending data when button is clicked from Google Apps Script to sidebar

I am unable to execute Parcel in my project as it is not generating a distribution folder with the compiled file

Instructions for automatically sending SMS when there is a change in MySQL database data using PHP

retrieve information from the local JSON file

Text will split into two at a later time

Error: The variable success_msg has not been defined in the EJS Reference

Navigating with buttons in the Material UI Drawer

Create a custom JavaScript library by incorporating an external library into it as a bundle

Accessing a JSON file from AWS S3 using Node.js

Using jQuery ajax links may either be effective or ineffective, depending on the scenario. At times

Ways to extract information from PayFast

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

What is the best way to access nested JSON array data that includes varying key names and content?

Obtain a string in JSON format upon clicking in Angular 2

When implementing afui and jQuery on PhoneGap, an error was encountered: "TypeError: Cannot read property 'touchLayer' of object function (selector, context)"

Getting the parameter route value from Laravel and passing it to Ajax

Issue with Angular drag and drop functionality arises when attempting to drop elements within an n-ary tree structure displayed using a recursive template