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
.
CodePudding user response:
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 >
<button @click="alertMe">hey</button>
</div>
</template>
<script>
export default {
methods: {
alertMe() {
this.$alert('Hello Vue Simple Alert.')
},
},
}
</script>