如何在nuxt中使用vue插件

Posted 2023-03-25

【中文标题】如何在nuxt中使用vue插件

【英文标题】：How to use vue plugin in nuxt

【发布时间】：2020-06-29 04:31:19

【问题描述】：

有一个叫 vue-chat-scroll 的插件，我想在 nuxt 中使用它。我是初学者，所以我不能真正理解如何，但我想知道是否可以在 nuxt 中使用这个 vue 插件作为插件。怎么做？

【问题讨论】：

请添加一些具有预期行为的代码

【参考方案1】：

在插件文件夹中创建一个 js 文件并将其命名为 vue-chat-scroll.js（名称是可选的，取决于你）。然后在这个js文件中注册你的插件，如下所示：

import Vue from 'vue';
import VueChatScroll from 'vue-chat-scroll';

 Vue.component('VueChatScroll', VueChatScroll);

然后在插件里面的nuxt.config.js中导入如下：

plugins: [
  
    src: '~/plugins/vue-chat-scroll.js',
    s-s-r: true
   
]

【讨论】：

顺便说一句，s-s-r: true 是遗留代码，它将在即将发布的版本中贬值。你应该使用 mode : 'client' 或 mode : 'server' 默认值是 mode : 'server'

抛出错误“无法解析指令：聊天滚动”。

【参考方案2】：

在 plugins 文件夹中创建一个文件，例如 vue-chat-scroll.js，内容如下：

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll) 

在 nuxt.config.js 中将插件导入为

 plugins: [...your existing plugins,'~/plugins/vue-chat-scroll.js']

然后按照其 API 的插件教程进行操作

【讨论】：

'Vue.use' 不适用于 nuxt 中的插件。你应该使用 Vue.component('VueChatScroll', VueChatScroll);

github.com/theomessin/vue-chat-scroll 该库不是一个组件，它是一个指令。此外，如果这是一个组件，则全局注册该组件不是一个好主意。我不知道为什么答案标记为已接受。

是的。我都试过了，你的一个抛出错误“无法解析指令：聊天滚动”，因为我们可以清楚地看到库不是组件。它是一个 vue 自定义指令。