0

I want to install VueToast package as plugin and add global helper methods with nuxt plugin. As shown below I install plugin between 5-11 lines. And I need to access $toast props on line 18. However I cannot access $toast props. How can I access $toast props in inject method?

Nuxt Version: 2.15.8 Vue Version: 2.6.14 Vue Toast Notification Version: 0.6.2 Vue Toast Notification Link: https://github.com/ankurk91/vue-toast-notification/tree/v1.x

toast-plugin.js

import Vue from 'vue'
import VueToast from 'vue-toast-notification'
import 'vue-toast-notification/dist/theme-default.css'
    
Vue.use(VueToast, {
  position: 'top-right',
  duration: 3000,
  dismissible: true,
  queue: false,
  pauseOnHover: true
})

export default (context, inject) => {
  inject('showToast', {
    show ({
      message
    }) {
      context.app.$toast.open({
        message,
        type: 'error'
      })
    }
  })
}

nuxt.config.js

...
plugins: [
  '~/plugins/vee-validate',
  '~/plugins/toast-plugin.js',
  '~/plugins/loading-overlay-plugin.js',
  '~/plugins/axios-plugin.js',
  '~/plugins/http-client-plugin.js',
  '~/plugins/services.js',
  '~/plugins/snackbar-plugin.js'
  ],
...
Mani Mirjavadi
  • 973
  • 9
  • 19
Dreamcatcher
  • 798
  • 13
  • 31

1 Answers1

0

I suggest you install @nuxtjs/toast. it uses vue-toasted under the hood

you can access your installed plugins like this

export default ({ app }, inject) => {
    console.log(app.store, app.yourInstalledPluginGlobalName)
}
arman amraei
  • 175
  • 1
  • 5