VueEditor document is not defined Nuxt.js-CodePudding

In my Nuxt.js project I installed vue2-editor package to be able to write articles with 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.

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:

  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'vue2-editor/nuxt'
  ],

CodePudding user response：

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>

CodePudding user response：

Do follow the below steps the add that plugin into your Nuxt

There will be plugins folder just like pages and components, if not create one and add a js file into it vue2-editor.js.

Copy the below content inside vue2-editor.js

  import Vue from "vue";
  import Vue2Editor from "vue2-editor";

  Vue.use(Vue2Editor);

Inside nuxt.config.js remove the 'vue2-editor/nuxt' from the modules and create a separate array called plugins as below

  /*
  ** Plugins to load before mounting the App
  */
 plugins: [{ src: "~/plugins/vue2-editor", ssr: false }],

Thats it you are done. Now you can start using it in any of the vue files like

  <vue-editor placeholder="Write Something..." v-model="content"></vue-editor>