0
409
Vistasvue-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:
- Install and add the package to my
package.jsonvia commandnpm install vue-simple-alert --save. - Add a file
alert.jsunder folderpluginswithin my nuxt.js project and add following code:
import Vue from 'vue'
import { VueSimpleAlert } from 'vue-simple-alert'
Vue.use(VueSimpleAlert)
- 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.
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.
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
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>
·
Santiago Trujillo
Denunciar
Responde la pregunta