Getting "window is not defined"

[cvsraghava]

Helo, I used "createEditor(selector, config)" to get the multiple editors in NUXTJS.

Now I am getting "window is not defined", can anyone please look into this.

import Vue from 'vue'
import Vuex from 'vuex'
import { createEditor } from 'vueditor'

import 'vueditor/dist/style/vueditor.min.css'

if (process.browser) {
  console.log('in browser')
  Vue.use(Vuex)
} else {
  console.log('not browser')
}

createEditor('#editorContainer', {
  toolbar: [
    'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor'],
  uploadUrl: '',
  id: '',
  classList: []
})

<template>
  <no-ssr placeholder="loading...">
      <div id="editorContainer"></div>
  </no-ssr>
</template>

[hifarer]

maybe you should put createEditor inside your if code block. if (process.browser) { Vue.use(Vuex) // createEditor(selector, config) }

[hifarer]

@cvsraghava vueditor does not support server side render at the moment

[cvsraghava]

@hifarer Thank you for your quick response.

I have updated the code like below, its working fine.

Plugin:

import Vue from 'vue'
import Vuex from 'vuex'
import { createEditor } from 'vueditor'

import 'vueditor/dist/style/vueditor.min.css'

Vue.use(Vuex)

let editorone = createEditor('#editorone', {
  toolbar: [
    'element', 'link', '|', 'insertOrderedList', '|', 'insertUnorderedList', '|', 'sourceCode'],
  uploadUrl: '',
  id: '',
  classList: []
})
editorone.setContent('editor one')
editorone.getContent()

let editortwo = createEditor('#editortwo', {
  toolbar: [
    'element', 'link', '|', 'insertOrderedList', '|', 'insertUnorderedList', '|', 'sourceCode'],
  uploadUrl: '',
  id: '',
  classList: []
})
editortwo.setContent('editor two')
editortwo.getContent()

Page:

<template>
  <div> 
      <div id="editorone" ></div><br/>
      <div id="editortwo" ></div>    
  </div>
</template>

<script>
export default {
  data () {
  }
}
</script>

Nuxt.config.js

 plugins: [
  { src: '~/plugins/vueditor.js', ssr: false }
  ]