VueEditor document is not defined Nuxt.js

Question

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'
  ],

Does this answer your question? How to fix navigator / window / document is undefined in Nuxt — kissu
– kissu, Commented Oct 12, 2021 at 14:47
Hi, please make a quick search before posting a question next time. — kissu
– kissu, Commented Oct 12, 2021 at 14:48

Ilijanovic · Accepted Answer · 2021-10-10 12:34:14Z

2

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>

answered Oct 10, 2021 at 12:34

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-10-12 15:02:42Z

0

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", mode: 'client' }],

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>

edited Oct 12, 2021 at 15:02

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Oct 10, 2021 at 12:17

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

VueEditor document is not defined Nuxt.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related