0
407
Vistasvue-simple-alert no funciona en Nuxt.js
Estoy tratando de agregar el paquete vue-simple-alert a mi aplicación Nuxt.js pero no funciona en absoluto. He seguido los siguientes pasos:
- Instale y agregue el paquete a mi
package.jsonmediante el comandonpm install vue-simple-alert --save. - Agregue un archivo
alert.jsen la carpeta depluginsdentro de mi proyecto nuxt.js y agregue el siguiente código:
import Vue from 'vue'
import { VueSimpleAlert } from 'vue-simple-alert'
Vue.use(VueSimpleAlert)
- Agregue las siguientes líneas dentro de
nuxt.config.js:
plugins: [
{ src: "~/plugins/alert", mode:"client" }
],
Luego, dentro de mis pages/text.vue , agregué el mensaje de alerta según la documentación:
this.$alert("Hello Vue Simple Alert.");
El mensaje se muestra como un texto de párrafo en la página de Vue en lugar de un mensaje de alerta.
No entiendo qué está mal porque he usado otros paquetes de manera similar y todo funcionó bien con ellos, pero el mismo enfoque no funciona para vue-simple-alert .
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
La siguiente configuración funciona bien.
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)
Advertencia ESlint siendo
Usando el nombre exportado 'VueSimpleAlert' como identificador para la exportación predeterminada.
/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