[英]VueEditor document is not defined Nuxt.js
In my Nuxt.js project I installed vue2-editor
package to be able to write articles with HTML.在我的 Nuxt.js 项目中,我安装了
vue2-editor
包,以便能够用 HTML 编写文章。 When I come to page, write something and press the button everything works correctly, but when I reload page, I get document is not defined
error.当我来到页面时,写点东西并按下按钮一切正常,但是当我重新加载页面时,我得到
document is not defined
错误。
Here is the code:这是代码:
<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>
And the error looks like that:错误看起来像这样:
Also in documentation I've found that for Nuxt.js projects vue2-editor
should be added to modules
, and I did it, but it still doesn't work:同样在文档中,我发现对于 Nuxt.js 项目
vue2-editor
应该添加到modules
,我做到了,但它仍然不起作用:
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'vue2-editor/nuxt'
],
You can try to load it dynamically:您可以尝试动态加载它:
<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>
Do follow the below steps the add that plugin into your Nuxt请按照以下步骤将该插件添加到您的 Nuxt 中
plugins
folder just like pages
and components
, if not create one and add a js
file into it vue2-editor.js
.plugins
文件夹,就像pages
和components
,如果没有创建一个并在其中添加一个js
文件vue2-editor.js
。vue2-editor.js
vue2-editor.js
import Vue from "vue"; import Vue2Editor from "vue2-editor"; Vue.use(Vue2Editor);
nuxt.config.js
remove the 'vue2-editor/nuxt'
from the modules and create a separate array called plugins as belownuxt.config.js
中,从模块中删除'vue2-editor/nuxt'
并创建一个名为 plugins 的单独数组,如下所示 /*
** Plugins to load before mounting the App
*/
plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.