The functionality of vue-simple-alert is not compatible with Nuxt.js

I've been attempting to integrate the vue-simple-alert package into my Nuxt.js application, but unfortunately, it's not functioning as expected. Here are the steps I've followed:

  1. First, I installed and added the package to my package.json using the command 
    npm install vue-simple-alert --save
    .
  2. Next, I created a file named alert.js in the plugins folder of my Nuxt.js project with the following code:
import Vue from 'vue'
import { VueSimpleAlert } from 'vue-simple-alert'

Vue.use(VueSimpleAlert)
  1. Then, I added the specified lines within my nuxt.config.js:
plugins: [
    { src: "~/plugins/alert", mode:"client" }
  ],

After that, in my pages/text.vue file, I inserted the alert message as instructed:

this.$alert("Hello Vue Simple Alert.");

However, instead of displaying as an alert message, the text appears as a regular paragraph on the Vue page.

https://i.sstatic.net/uvqtu.png

I'm puzzled as to what might be causing this issue, as I have successfully implemented other packages in a similar manner without any problems, but for some reason, it's not working correctly for vue-simple-alert.

javascriptvue.jsvuejs2nuxt.jsvue-component

Answer №1

The setup below is functioning perfectly.

nuxt.config.js

export default {
  ssr: true,
  target: 'static',
  plugins: [{ src: '~/plugins/alert', mode: 'client' }],
}

/plugins/alert.js

import Vue from 'vue'
import { VueSimpleAlert } from 'vue-simple-alert' // using this import approach due to the exporting style of the package

Vue.use(VueSimpleAlert)

There is an ESlint warning:

Using 'VueSimpleAlert' as the default export identifier.

/pages/index.vue

<template>
  <div class="nice">
    <button @click="alertMe">hey</button>
  </div>
</template>

<script>
export default {
  methods: {
    alertMe() {
      this.$alert('Hello Vue Simple Alert.')
    },
  },
}
</script>

https://i.sstatic.net/6LX3s.png

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

Unlock the potential of displaying similar object values side by side in JavaScript, React, and ES6 - here's how!

Currently, I am dealing with an object called segregatedData which is being passed as props. Among its several properties, we are interested in segregatedData.type1. This particular property is essentially an array of strings similar to this: ['water& ...

javascriptarraysreactjssortingforeach

Express Server React 403 Forbidden Error

Issue: When attempting to make a post request using the AXIOS library in React, I am receiving a 403 (Forbidden) error for http://localhost:5004/api/auth/login. Despite having installed cors on Express, the console continues to display the 403 error. My c ...

javascriptnode.jsreactjsexpress

React.js: The function useDef has not been defined

Attempting to create a React.js calculator application, my initial step was to delete the entire src folder and replace it with a new one containing the necessary elements for the web app. Here is the content of the index.js file: import React,{ useEffect, ...

javascriptreactjs

Is there a way to update prop values after the page has been reloaded in Vue?

Here is the code snippet I am working with: I have created an example and I am trying to access the props values in the onMounted() function. However, when I console.log(account.value.date), it returns undefined. Is there a way to modify the props values ...

javascriptvue.jsvuejs3vue-props

Is there a way to programmatically display an edit text field on an HTML page?

Currently, I have a straightforward task which involves pulling data from a MySQL database to display in an HTML table. Here is the current script: <html> <body> <table border='1'> <?php mysql_connect('url',&ap ...

phpjavascriptjquery

Why do rows in the React-bootstrap grid layout overlap when the screen is resized?

I am working on a simple layout structure with 2 rows: Row 1 consists of 2 columns Row 2 consists of 1 column The goal is to have both rows expand in width and avoid vertical scrolling of the page. However, when resizing the screen, I want the columns of ...

javascriptreactjstypescriptreact-bootstrapbootstrap-5

How can I resolve the ReferenceError in NextJs which states that Audio is not defined?

Recently, I implemented a Next component that acts as a music player, allowing users to play or stop the audio just like an MP3 player. While the functionality works perfectly fine on my local server – clicking the button triggers the audio play or pause ...

javascripttypescriptnext.jsaudio

I encountered an eslint error when I was trying to configure Vue 3 + Quasar with a Firebase config.ts file. The error stated that there was an unsafe assignment of an `

Recently, I set up a new Vue 3 project with Quasar using the Quasar CLI. In order to store my firebase configuration, I created a new file called src/firebase/config.ts, which looks like this: // Import necessary functions from SDKs import { initializeApp ...

typescriptvue.jsquasar-frameworktypescript-eslint

Using JavaScript within HTML documents

Need help with inserting JavaScript code from Google: <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); }); </script> into existing JavaScript / HTML code: va ...

javascriptjqueryhtmlwordpress

Issues with audio and video playback intermittently occurring on Sencha Touch 2

As a beginner with Sencha Touch 2, I am currently working on uploading images onto an iPad using Xcode. My app has audio playing on the home screen, and I want the video to start playing and the audio to stop when a specific tab is selected. However, the ...

javascripthtmlcssextjs

Unable to invoke a mixin function within a JavaScript function

I've been experimenting with a small project utilizing nuxt.js, and currently, I've developed a plugin using mixins as shown below. However, I'm puzzled as to why function b is not working inside the render function: import Vue from 'v ...

javascriptvue.jsnuxt.jsvue-mixin

Can all the files in a folder be imported?

I have a plethora of files including .css, .jpg, etc. stored in a directory named "assets", and I am looking for a way to import all of them recursively. Is there a python-like solution for this task? from './assets' import *; Instead of manual ...

javascriptreactjswebpack

What is the reasoning behind storing type definitions in the @types namespace within npm?

Have you ever wondered why type definitions in npm are stored under the @types namespace which isn't directly linked to a specific organization, user, or library? Wouldn't it make more sense for npm libraries to have their types located under @[o ...

javascriptnode.jsnpm

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

javascripthtmlmobileratchet-2

Guidelines for queuing method calls using Vue.js

Is there a way to invoke a method using a queue system? Imagine having a method that makes API calls and can only handle 3 calls at once. If more than 3 calls are made from a component, the remaining ones should wait until one call finishes before proceedi ...

javascriptvue.js

Leverage JSON files for pagination in NextJS

I am currently developing a science website where the post URLs are stored in a static JSON file. ScienceTopics.json- [ { "Subject": "Mathematics", "chapters": "mathematics", "contentList": [ ...

javascriptreactjsjsontypescriptnext.js

What is the most effective way to load data prior to the controller being loaded

Is there a way to fetch data from a service before the view and controller are loaded? I need assistance with this. resolve: { getAlbum: function(albumService){ return albumService.getAlbums(); },getAtum: function(albu ...

javascriptangularjsangularjs-directiveangularjs-scopeionic-framework

Using axios to modify and enhance the HTML content of a webpage

Utilizing axios and an API, I am able to retrieve a page's HTML, make edits to it, and then send it back via a POST request to the API. While successful in retrieving and editing the HTML content, I'm encountering difficulty in updating or changi ...

javascriptnode.jsaxios

The URL provided for the Ajax HTTP request is not accurate

Consider the following JavaScript code: <script type="text/javascript" charset="utf-8> function goForLogin() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","/account/login",true); xmlhttp.s ...

javascriptajaxsymfony-1.4

How about checking the memory usage in Javascript?

Similar Question: Looking for a Javascript memory profiler I am curious about determining the memory consumption of variables in JavaScript. Could it be done at all? ...

javascriptmemorymonitor