CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.jsvue-component
BATMAN_2008
BATMAN_2008

Reputation: 3530

vue-simple-alert does not work in Nuxt.js

I am trying to add the vue-simple-alert package to my Nuxt.js application but its not working at all. I have followed below steps:

  1. Install and add the package to my package.json via command npm install vue-simple-alert --save.
  2. Add a file alert.js under folder plugins within my nuxt.js project and add following code:
import Vue from 'vue'
import { VueSimpleAlert } from 'vue-simple-alert'

Vue.use(VueSimpleAlert)
  1. Add the following lines within nuxt.config.js:
plugins: [
    { src: "~/plugins/alert", mode:"client" }
  ],

Then within my pages/text.vue I added the alert message as per documentatioin:

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

The message is displayed as a paragraph text on the Vue page rather than alert message.

enter image description here

I am not understanding whats wrong because I have used other packages similarly and everything worked well with them but same approach does not work for vue-simple-alert.

Upvotes: 1

Views: 1164

Answers (1)

kissu
kissu

Reputation: 46726

The following configuration works fine.

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' // importing like that here, because of the way the package is exported

Vue.use(VueSimpleAlert)

ESlint warning being

Using exported name 'VueSimpleAlert' as identifier for default export.

/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>

enter image description here

Upvotes: 1

Related Questions