Nuxt.js: Vue-editor: document is not defined

[azchatlanin]

If I try to use vue2-editor I get an error
````
Nuxt.js Error:

ReferenceError: document is not defined
at i (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:2101)
at r (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:1923)
at t.exports (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:3545)
at Object.t.exports.n (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:262534)
at e (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:387)
at Object.t.exports.t (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:261519)
at e (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:387)
at Object.defineProperty.value (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:23813)
at e (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:387)
at Object. (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:262959)
at e (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:387)
at n (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:771)
at /home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:781
at n.(anonymous function).i (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:143)
at Object. (/home/andrey/Projects/node/nuxt-skeditor/node_modules/vue2-editor/dist/index.js:1:264)
at Module._compile (module.js:570:32)

**Include:** File **_EditorPage.vue_**

File **_nuxt.config.js_**
module.exports = {
head: {
title: 'starter',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},

loading: { color: '#3B8070' },

build: {
vendor : 'vue2-editor',
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}

````
If I connect the editor to Vue everything works fine

_{This question is available on Nuxt.js community (#c596)}

[ausir0726]

you should use that component only ssr false .

when ssr that will not have document.

https://nuxtjs.org/faq/window-document-undefined

[azchatlanin]

File _plugin/vue2-editor.js_
````
import Vue from 'vue'

if (process.BROWSER_BUILD) {
const VueEditor = require('vue2-editor')
Vue.use(VueEditor)
}

File **_nuxt.config.js_**
module.exports = {
head: {
title: 'starter',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},

loading: { color: '#3B8070' },

plugins: ['./plugins/vue2-editor'],

build: {
vendor : 'vue2-editor',
extend (config, ctx) {
config.resolve.alias['vue2-editor'] = 'vue2-editor';
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}

````
File _EditorPage.vue_

````

````
There are no errors. But there is no editor. What did I miss? What option have I not yet tried?

[stephan281094]

Have a look at https://nuxtjs.org/api/configuration-plugins/#the-plugins-property.
You can set the ssr flag to true in your plugins definition.

[azchatlanin]

Not work!
plugins: [{src: './plugins/vue2-editor', ssr: true}]

That's definitely not working because of some nonsense!

[stephan281094]

Oops, sorry. I meant to say you can set ssr to false, since you only want to be running it on the client.

[azchatlanin]

Not work!
Try someone to connect this editor to a bare project please. At me it worked in Vue here is not present. But maybe it's not about us at all. I would really appreciate your help.

[ausir0726]

@QtMobile

I tried read vue2-editor source code .

You got error message that because that package used 'quill' package .
that package need document , and vue2-editor not handle SSR .
so , you can just copy vue2-editor vue single file source to your project .
and modify it support SSR .

Voilà , It works with nuxt.js
https://nuxt-vue-editor.glitch.me/

glitch source
https://glitch.com/edit/#!/nuxt-vue-editor

[ausir0726]

or , you can make a PR to vue2-editor let it support SSR 😆

[azchatlanin]

Thank you. Very good!

[sierralorenzini]

I'm also having this issue when trying to use the vue-carousel npm package. Is there a way to use a package in node_modules without getting the document is not defined error?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.