[Nuxt.JS + Vuetify] Error after import 'CKEditor5' (window is not defined )

[migaduo]

Hey @ALL,

i get the following Error after put this in my VueJS Application:

'window is not defined'

import CKEditor from '@ckeditor/ckeditor5-vue';

components: {
      ckeditor: CKEditor.component
    },

Did someone know how to fix it?

I'm using "Nuxt.JS/VueJS/Vuetify"

Thanks for the support!

[Mgsy]

Hello, did you follow our Vue.js integration guide?

[migaduo]

Yeah, i tried all implementations. :(

[Mgsy]

Okay, so can you provide exact steps which you perform, so we'll be able to reproduce your issue? Also, all the details about your environment will be appreciated.

[pomek]

Most probably the issue is related to SSR. If so, there is a related issue – ckeditor/ckeditor5#1511.

[Mgsy]

I'm closing it due to a lack of activity.

[usb248]

There is any support for SSR in ckeditor, That's why it displays error : window is not defined.
The only clean solution is to use https://nuxtjs.org/guide/plugins#client-side-only but it induces to use it in a global way ... 👎

Edit: After a lot of research
I found a solution (but not tested in IE11 yet...)

  let ClassicEditor
  let CKEditor

  if (process.client) {
    ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
    CKEditor = require('@ckeditor/ckeditor5-vue')
  }else{
    CKEditor = { component : {template:'<div></div>'}}
  }

export default {
...
    components : { 
      ckeditor: CKEditor.component
    }
...
}

in your component's template
<client-only><ckeditor :editor="editor" /></client-only>

[anurag-do]

@usb248 its working thanks.
was searching for 4 hours.

finally got this worked.

page.vue

<template>
  <div id="app">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
  let ClassicEditor
  let CKEditor

  if (process.client) {
    ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
    CKEditor = require('@ckeditor/ckeditor5-vue')
  } else {
    CKEditor = { component : {template:'<div></div>'}}
  }

  export default {
    components : { 
      ckeditor: CKEditor.component
    },
    data() {
      return {
          editor: ClassicEditor,
          editorData: '<p>Content of the editor.</p>',
          editorConfig: {
              // The configuration of the editor.
          }
      };
    }
  }
</script>

[metrey]

The solution at #74 (comment) worked on vuejs v2.x & nuxtjs 2.x (latest)!

[kaplanark]

Unfortunately, I couldn't do what you said in the Nuxt3 version. Could you guide me in this matter?

[m2sahin]

Problem still persists for Nuxt 3

[9uenther]

I use it this way

<template>
    <client-only>
        <CKEditor 
            v-if="ClassicEditor" 
            v-model="content"
            :editor="ClassicEditor"
        ></CKEditor>
    </client-only>
</template>
<script setup>
    let CKEditor
    let ClassicEditor = ref()

    if (process.client) {
        CKEditor = defineAsyncComponent(() => import('@ckeditor/ckeditor5-vue').then(module => module.component))
        import('@ckeditor/ckeditor5-build-classic').then(e => ClassicEditor.value = e.default)
    }
</script

[N-index]

I use it this way

<template>
    <client-only>
        <CKEditor 
            v-if="ClassicEditor" 
            v-model="content"
            :editor="ClassicEditor"
        ></CKEditor>
    </client-only>
</template>
<script setup>
    let CKEditor
    let ClassicEditor = ref()

    if (process.client) {
        CKEditor = defineAsyncComponent(() => import('@ckeditor/ckeditor5-vue').then(module => module.component))
        import('@ckeditor/ckeditor5-build-classic').then(e => ClassicEditor.value = e.default)
    }
</script

Doing it this way will make SSR meaningless