En mi proyecto Nuxt.js instalé el paquete vue2-editor
para poder escribir artículos con HTML. Cuando llego a la página, escribo algo y presiono el botón, todo funciona correctamente, pero cuando vuelvo a cargar la página, aparece el document is not defined
.
Aquí está el código:
<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>
Y el error se ve así:
También en la documentación descubrí que para los proyectos de Nuxt.js, se debe agregar vue2-editor
a los modules
, y lo hice, pero aún no funciona:
modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', 'vue2-editor/nuxt' ],
Puedes intentar cargarlo dinámicamente:
<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>
Siga los pasos a continuación para agregar ese complemento a su Nuxt
plugins
como pages
y components
, si no, cree uno y agregue un archivo js
en él vue2-editor.js
.vue2-editor.js
import Vue from "vue"; import Vue2Editor from "vue2-editor"; Vue.use(Vue2Editor);
nuxt.config.js
elimine el 'vue2-editor/nuxt'
de los módulos y cree una matriz separada llamada complementos como se muestra a continuación /* ** Plugins to load before mounting the App */ plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>