VueEditor文档未定义为Nuxt.js
VueEditor文档未定义为Nuxt.js
提问于 2021-10-10 10:27:56
在我的Nuxt.js项目中，我安装了vue2-editor包，以便能够用HTML编写文章。当我进入页面时，写一些东西并按下按钮一切正常工作，但是当我重新加载页面时，我得到了document is not defined错误。
以下是代码：
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>错误看起来是这样的：
在文档中，我还发现对于Nuxt.js项目，vue2-editor应该添加到modules中，并且我这样做了，但是它仍然不起作用：
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'vue2-editor/nuxt'
],回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-10 12:34:14
您可以尝试动态加载它：
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor: () => process.client ? (await import("vue2-editor")).VueEditor : ""
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>Stack Overflow用户
发布于 2021-10-10 12:17:52
请按照以下步骤将插件添加到Nuxt中
如果不创建一个vue2-editor.js.
- Copy文件并在其中添加一个
js文件，那么 - 将有一个
plugins文件夹，与pages和components类似--从“Vue”向- 中添加以下内容；从“vue”导入Vue2Editor；从“vue 2-编辑器”导入Vue2Editor；从
- as
nuxt.config.js从模块中删除'vue2-editor/nuxt'并创建一个名为plugins的单独数组，如下所示：
/*
** Plugins to load before mounting the App
*/
plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],- 说：“你已经完成了。”现在，您可以开始在任何vue文件(如
)中使用它。
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69514342
复制相关文章
相似问题
腾讯云开发者
