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?

javascriptvue.jsnuxt.jsbuefy

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',
      });
    },
  });
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to access the 'style' property of null in prac.js at line 3

const heading = document.querySelector("h1"); heading.style.color = "blue"; Encountering an error when attempting to apply color to h1 element using DOM manipulation within a separate JavaScript file. The 2-line code snippet works flawlessly in the consol ...

javascripthtmldom

Ways to create a clickable anchor tag without using any text

I am currently designing my own website and incorporating links to various social media platforms using icons. However, I am facing an issue where the links are not clickable. For a detailed look at my problem, you can refer to this JSFiddle: http://jsfid ...

javascriptjqueryhtmlcss

Can the ValidationPipe be utilized with a whiteList on the response body?

How can we prevent the return of certain key values in responses from a NestJs server when using TypeOrm entities? For instance, ensuring that a user's password is never sent to any client: In the user.entity.ts file: @Entity() export class User ext ...

javascriptnode.jsexpressnestjsclass-validator

Caution when using a React form: Value of `true` has been detected for a non-boolean attribute `validate`

I am trying to address a warning message that I have received index.js:1 Warning: Received true for a non-boolean attribute validate. If you want to write it to the DOM, pass a string instead: validate="true" or validate={value.toString()}. I ...

javascriptreactjsformsvalidationmaterial-ui

What purpose does generating a JSON file serve when invoking getStaticProps in Next.js?

Just diving into the world of Next.js. I've been going through the Next.js documentation and stumbled upon this: Next.js creates a JSON file that contains the outcome of executing getStaticProps. This JSON file is used in client-side routing via nex ...

javascriptnext.js

What is the best way to transfer an argument from a parsed JSON value to an onclick function?

In our dataset, we have a specific table that contains valuable information. My main objective is to transfer an argument extracted from parsed JSON data to a separate JavaScript function known as newStory(value['stories']) using the onclick meth ...

javascriptjqueryhtml

Can an Updatepanel control be added to a webpage using Javascript or JQuery?

I'm currently working on a project that involves allowing users to drag icons representing user controls onto a web page. For the desired functionality, these user controls must be contained within an updatepanel (or a similar AJAX-enabled frame) so ...

javascriptjqueryasp.netasp.net-controls

What is the best way to eliminate an object from an array of objects depending on a certain condition?

I have an array of objects structured like so: data = [ { "name":"abc", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9b9899ba9d979b9396d4999597">[email protected]&l ...

javascriptnode.jsarraysobjectforeach

The Toggle Functionality necessitates a double-click action

I'm currently working on implementing a menu that appears when scrolling. The menu consists of two <li> elements and has toggle functionality. Everything is functioning properly, except for the fact that the toggle requires two taps to activate ...

javascripthtmlcss

Leveraging ES6 Symbols in Typescript applications

Attempting to execute the following simple line of code: let INJECTION_KEY = Symbol.for('injection') However, I consistently encounter the error: Cannot find name 'Symbol'. Since I am new to TypeScript, I am unsure if there is somet ...

javascripttypescriptecmascript-6

Using the .ajax() function with jQuery to retrieve data and then using .find() on that data

Currently I am facing an issue while trying to extract the body tag from the result of the .ajax() call. Instead of getting the desired result, I only see undefined logged into the console... This is the section of code causing the problem: $(document).r ...

javascriptjqueryajax

The publicPath configuration in Webpack is not functioning as expected

Check out my demo setup: Take a look at my webpack configuration below: module.exports = { entry: './app.js', output: { filename: 'bundle.js', path: './build', publicPath: 'http://localhost:3000/&apos ...

javascripthtmlwebpack

Exploring Commitments in React

I'm currently navigating the world of promises and finding it challenging to grasp! My main focus right now is setting up an authentication system for my application. RegisterPage The handleSubmit function in my RegisterPage looks like this: handl ...

javascriptreactjspromise

Tips for clearing a textbox value in JQuery after a 5-second delay

I attempted the following: <script type="text/javascript"> $(function() { $("#button").click( function() { alert('button clicked'); // this is executed setTimeout(function() ...

javascriptjquery

The issue of accessing the session before scripts are loaded arises when using VueJS alongside Firebase Authentication

Currently grappling with a project where I'm facing some challenges... I've opted for VueJS on the frontend and implemented Firebase Authentication for user login. I'm trying to determine the login status of a user by using firebase.auth(). ...

javascriptfirebasevue.jsfirebase-authentication

JavaScript for validating dimension text input has unique functionalities

I am looking for guidance on validating an ASP textbox using JavaScript. My goal is to validate a user's input in the format of 4-1/2, 80-1/2, 6/8, or simply 5. Only these types of patterns should be allowed, and each input must contain only one numbe ...

javascriptjqueryasp.nethtml

Nuxt JS Route Changes Not Triggering Page Scroll to Top

How can I ensure that the page always scrolls to the top when routing changes in Nuxt? In an attempt to achieve this, I have added the following code to my app/router.scrollBehavior.js file: export default function (to, from, savedPosition) { return { x ...

vue.jsscrollnuxt.js

`Is it possible to remove an empty frame using javascript?`

I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...

javascriptjqueryhtml

Using a function from one class within another class by passing it as a prop

Below are the methods found in my Search.tsx class. renderSuggestion(suggestion) { <div className="buttons"> <button className="button">View Location</button> <button className="button whitebutton" onClick={this.h ...

javascripteventsreactjstypescriptonclick

Retrieve the subdomain from within the passport FacebookTokenStrategy and GoogleStrategy

In the process of developing a node.js application with wildcard subdomains, I am creating separate parts of the app for each subdomain that will have distinct user authentication based on the subdomain. For instance, envisioning my app having subdomains ...

javascriptnode.jspassport.jspassport-facebook