Nuxt.js如何不配置nuxt.config.js仅在单个组件内使用插件

你的代码有两个核心问题：

• 插件中调用Vue.use(Vue2Editor)做了全局注册，和你局部引入的需求冲突，重复注册也会导致异常
• 没有区分服务端/客户端环境，vue2-editor依赖浏览器API，直接在服务端导入会触发运行时错误

推荐方案（无需额外创建plugins文件，完全局部引入） #

直接在组件内做动态客户端引入，不需要改动任何全局配置：

<template>
  <div class="text-editor">
    <client-only>
       <Vue2Editor v-model="content" />
    </client-only>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  components: {
    Vue2Editor: () => process.client 
      ? import('vue2-editor').then(mod => mod.Vue2Editor) 
      : Promise.resolve({ render: h => h('div') })
  }
}
</script>

<style>
/* 按需引入编辑器样式 */
@import 'vue2-editor/dist/vue2-editor.css';
</style>

如果你要保留原有plugins文件的调整方案 #

首先修改~/plugins/vue2-editor.js，删除全局注册逻辑：

// ~/plugins/vue2-editor.js
import { Vue2Editor } from "vue2-editor";
export default Vue2Editor

然后调整组件内的引入逻辑，仅在客户端环境注册组件：

<template>
  <div class="text-editor">
    <client-only>
       <Vue2Editor v-model="content" />
    </client-only>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  components: {
    Vue2Editor: process.client ? require('~/plugins/vue2-editor').default : {}
  }
}
</script>

<style>
@import 'vue2-editor/dist/vue2-editor.css';
</style>

两种方案都不需要在nuxt.config.js中做任何配置，不会污染全局组件注册。

内容的提问来源于stack exchange，提问作者Nightcrawler