Home > Enterprise >  vue-simple-alert does not work in Nuxt.js
vue-simple-alert does not work in Nuxt.js

Time:09-27

I am trying to add the 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.

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>

enter image description here

  • Related