Plugins Nuxt.js-使用插件实现组件

我想通过这个方法在我的NuxtJs应用程序中实现一个定制的Toaster组件

this.$toast.show（{}）

？遗憾的是，我找不到任何关于这方面的文档。

您可以在这个软件包中找到

https://www.npmjs.com/package/vue-toasted

装置

npm安装vue toasted--保存

在plugin文件夹中创建一个文件名为name

toast.js

toast.js

import Vue from 'vue';
import Toasted from 'vue-toasted';

Vue.use(Toasted)

将此插件添加到nuxt.config.js

plugins: [
    { src: '~/plugins/toast', ssr: false },
  ],

现在你可以在你的方法中使用

this.$toasted.show('hello i am your toast')

---

希望这能有所帮助

对不起，我迟到了一年。。。 我也有同样的问题。这是我的密码：

我的插件的索引（index.js；Nofification.vue是一个经典的vue组件）：

从“./Notifications.vue”导入通知
构造通知存储={
状态：[]，//此处将添加通知
设置：{
重叠：错，
水平对齐：“中心”，
键入：“info”，
超时：5000，
...
},
设置选项（选项）{
this.settings=Object.assign（this.settings，options）
},
重新通知（时间戳）{
...
},
添加通知（通知）{
...
},
通知{
...
},
}
构造通知SPlugin={
安装（Vue，选项）{
const app=新的Vue({
数据：{
notificationStore:notificationStore，
},
方法：{
通知{
this.notificationStore.notify（通知）
},
},
})
Vue.prototype.$notify=app.notify
Vue.notify=app.notify
Vue.prototype.$notifications=app.notificationStore
Vue.component（'通知'，通知）
如果（选项）{
NotificationStore.setOptions（选项）
}
},
}
导出默认通知

在这里，我调用我的插件并将其注入Nuxt：

从“~/components/NotificationPlugin”导入通知
Vue.use（通知）
导出默认值（上下文，注入）=>{
注入（'notify'，Vue.notify）
}

在我的例子中，我在另一个插件（nuxtjs axios）中使用它

从“~/constants/NOTIFICATIONS”导入通知
导出默认函数（{error$axios，app}）{
//使用少量axios辅助工具(https://axios.nuxtjs.org/helpers):
$axios.onError（（axiosError）=>{
//eslint禁用下一行无控制台
console.log（'Axios:发生错误！'，axioerror，axioerror.response）
if（process.server）{
...
}否则{
app.$notify({
消息：“周一消息”，
超时：通知。默认\u超时，
图标：“蒂姆图标”图标“宇宙飞船”，
horizontalAlign:NOTIFICATIONS.DEFAULT\u ALIGN\u HORIZONTAL，
verticalAlign:NOTIFICATIONS.DEFAULT\u ALIGN\u VERTICAL，
键入：“成功”，
})
console.log（'打印错误'）
返回承诺。解析（true）
}
})
}

当我注入它时，我认为我可以执行

导出默认函数（{error，$axios，app，$notify}）{

并直接使用$notify（而不是app.$notify）

如果您想更好地理解，请随时咨询@nuxtjs/toast，其工作原理与此相同：

以及匹配的Vue组件：

---

祝你好运，这不是一件容易的事情。我会尝试在文档中添加一些更容易理解的内容！

谢谢sid，但是，我想制作自己的自定义插件，并且需要知道最好的方法。你需要创建自己的依赖项并在NUXT中实现这就是我要问的。我如何创建自己的组件并在int中实现它o另一个组件通过

this.$foo

ohh我看到这是vue中的调用依赖注入了解mixin或此链接提供的示例这显示了如何注入服务等，而不是像上面发布的vue toasted插件这样的组件