nuxt.js - NuxtJS Access 在 nuxtjs 注入方法中安装了 vue 插件

Question

我想将 VueToast 包安装为插件，并使用 nuxt 插件添加全局辅助方法。如下所示，我在 5-11 行之间安装插件。我需要在第 18 行访问 $toast 道具。但是我无法访问 $toast 道具。如何在注入方法中访问 $toast 道具？

Nuxt 版本：2.15.8 Vue 版本：2.6.14 Vue Toast 通知版本：0.6.2 Vue Toast 通知链接：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'
  ],
...

Answer 1

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)
}