Nuxt.js integration

[Mgsy]

📝 Provide a description of the new feature

Currently, integrating CKEditor 5 with Nuxt.js causes some issues. It will be nice to check how we can improve it.

A list of related issues which might be useful:

• https://github.com/ckeditor/ckeditor5-vue/issues/71
• https://github.com/ckeditor/ckeditor5-vue/issues/8
• https://github.com/ckeditor/ckeditor5-vue/issues/74
• https://github.com/ckeditor/ckeditor5-vue/issues/24

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[edgarsn]

This is a huge problem. It kind a stops my development now. I need to develop multiple custom plugins. At this stage we're thinking about migrating to other editor instead. So hope there will be some fix soon.

[FilipTokarski]

For everyone struggling with integrating CKEditor5 and Nuxt, you are most likely to run into two major problems:

1. Make Nuxt initialize/render CKEditor5 on client side
2. Load additional plugins for CKEditor5

To address problem 1, there is an easy workaround, which you can find here. Probably, you will also need to set mode: 'spa' in nuxt.config.js.

To address problem 2, you will need to add a custom Webpack config to your nuxt.config.js file, which you can find here.

Note: when you build Nuxt project as a static website using npm run generate, you may get index.html which lacks two imports of javascript files from _nuxt folder, and also you will need to add a period in file paths in script and link tags, for example: src="./_nuxt/d6170a734de3a0201298.js" instead of src="/_nuxt/d6170a734de3a0201298.js"

[edgarsn]

For me, currently, the best solution to use nuxt with SSR was to make a build outside a nuxt project.

I downloaded https://github.com/ckeditor/ckeditor5-build-classic, modifying src/ckeditor.js file to include plugins what I need, then modified webpack.config.js build path to my nuxt.js static folder. So when I execute npm run build in my custom ckeditor build, it makes a builded ckeditor file in my nuxt project. Then I just link to this script in my nuxt.config.js.

Definitely not the best way and still waiting official ckeditor nuxt.js support.

[SThomassen]

Tried all day to add CKeditor 5 to my nuxt project, without result. Would love if I could simply add ckeditor to my plugin. In the meantime, does anyone know the best solution to add this to my project? The writers on my team want to have as much rich text tools as possible on the website, so I cannot only use the classic build.

[edgarsn]

@SThomassen look at my comment. That's the way I did it, but few more days later our team just migrated away from CK5 to other editor completely. I didn't want to create and maintain separate git repo which contains our custom build, just to be able to use CK in nuxt project. We just found other editor which works fine with nuxt and fits our needs.

[teotsi]

@edgarsn can you explain the way you add the editor in a component/page? I followed your steps (modified the classic build webpack config and ckeditor.js), produced the necessary build, which I then declared on nuxt.config.js as { src: '~plugins/custom_ckeditor', ssr: false }, but I can't get it to be added in page.

[edgarsn]

@teotsi You must import it in your nuxt.config.js head - script section.

export default {  
    head: {
        script: [
            {src: '/ckeditor.js'},
        ],
    }
}

after that in your vue file you use it straightaway without any require() or import(). It's imported globally as es5 script.

[paulvonber]

Is it NUXT integration moving to any direction? or it's just Github issue and nothing else?

[Trixpua]

After a lot of tries I was able to use this with Nuxt.js, below the code I used to use implement the standard builds.

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

<script>
  if (process.client) {
    require('@ckeditor/ckeditor5-build-classic/build/translations/pt-br')
    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 {
        editorData: "",
        editor: ClassicEditor,
        editorConfig: {
          language: 'pt-br',
          toolbar:{
            items: [
              'heading',
              '|',
              'bold',
              'italic',
              //...
            ]
          },
          image: {
            toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side'],
            styles: [
              'full',
              'side',
              'alignLeft',
              'alignRight',
              'alignCenter'
            ]
          },
          //...
        },
      }
    },
  }
</script>

I am not able to build from source, but to add new plugins I make a new build with the online builder and so I save it in my components directory and import it instead the standard build.

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

Not the perfect way, but until was released a module for Nuxt.js, this solved my problem. Hope it help someone.

[chkb]

@Trixpua do you have a full implementation example in code?

[Trixpua]

Hello @chkb, you can check a example in this codesandbox

[nawalnew]

Hello @chkb, you can check a example in this codesandbox

Hello @Trixpua

Ive got your version to work local.

But if I add the Collaboration Feature I get always the error "Cannot set property 'container' of undefined" for the presenceList .

This is the Only thing missing i think hopefully.

I hope you can help somehow `

<ckeditor :editor="editor" :config="editorConfig" v-model="editorData" v-if="isLayoutReady" @ready="onEditorReady">

</div>`

` mounted() {

    this.presenceList.container = this.$refs.presenceListElement;

    this.isLayoutReady = true;
},`

data() { return { isLayoutReady: false, editorData: "", editor: ClassicEditor, editorConfig: { cloudServices: { tokenUrl: 'XXX, uploadUrl: 'XXX/', webSocketUrl: 'XXX' }, collaboration: { channelId: '22222232' }, presenceList: { container: null }, sidebar: { container: null }, toolbar: { items: [ "heading", "|", "bold", "italic" //... ] } } }; },

[blowstack]

There is a CKEditor 5 npm package for nuxt.js. It's quite heavy because it has implemented all free possible plugins but works and there is no need to make any changes to the nuxt config file.

If you need more lighter custom build just follow this article it should help you.

[KamranMaqbool]

any update about to released of module for Nuxt.js ???

[teotsi]

@KamranMaqbool it's been moved up in the milestone queue. It was in the backlog for a while, but it looks like the team will get their hands on it soon.

@Trixpua's solution works perfectly though even with custom builds, so no need to wait for the official support.

[nawalnew]

Because of the lack of Nuxt Support we moved to codox.io and integrared it with qiull. Cheaper and just some lines to implement. Hope I could help

Am 29.08.2020 um 15:31 schrieb teotsi notifications@github.com:

 @KamranMaqbool it's been moved up in the milestone queue. It was in the backlog for a while, but it looks like the team will get their hands on it soon.

@Trixpua's solution works perfectly though even with custom builds, so no need to wait for the official support.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[teotsi]

@nawalnew Quill didn't work for me when trying to use custom plugins. That's the main reason we opted for CKEditor. Hopefully the team will officially support Nuxt soon.

[jerickcm]

any update i also need this in nuxt, specially adding tables images and inline style . ive manage table and image simple upload, but i'm having problem with inline styles. i need the add inline style instead of classed in the texteditor i used this tutorial

https://blowstack.com/blog/frameworks/create-ckeditor-5-custom-build

[ambrosekwok]

@Trixpua I tried your method that works with extra plugins, but I have question about standard editing mode and restricted editing mode.

I would like to create 2 editors which are running in standard editing mode and restricted editing mode separately. Or create an editor that able to switch the modes.

In the online builder, the standard editing mode and restricted editing mode are conflicting plugins that cannot add together. So I created 2 builds named ckeditor.js and ckeditorRestricted.js for standard editing mode and restricted editing mode using the online builder.

But this is not work, if both ClassicEditor and ClassicEditorRestricted components required, both editor would not appeared.

Any methods could make it work with the editing modes in Nuxt? Thanks.

`

`

<script> let CKEditor let ClassicEditor let ClassicEditorRestricted if (process.client) { ClassicEditor = require('@/components/RichText/ckeditor5/build/ckeditor') ClassicEditorRestricted = require('@/components/RichText/ckeditor5/build/ckeditorRestricted') CKEditor = require('@ckeditor/ckeditor5-vue') } else { CKEditor = { component: { template: '<div></div>' } } }

export default { components: { ckeditor: CKEditor.component }, data () { return { editorData: '', editor: ClassicEditor, editorConfig: { toolbar: { items: ['restrictedEditingException'] } }, editorRestricted: ClassicEditorRestricted, editorRestrictedConfig: { toolbar: { items: ['restrictedEditing'] } } } } } </script>

Ambrose

[ahmed-classtra]

Hi folks, I thought I'd post my solution to help people out. I manged to get it working throught the following configuration:

1. nuxt.config.js, extend the webpack config like so:

   build: {
   extend(config, ctx) {
   // CKEditor
     config.plugins.push(new CKEditorWebpackPlugin())
     config.module.rules.push({
       test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
       use: ['raw-loader']
     })
     config.module.rules.push({
       test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
       use: [
         {
           loader: 'style-loader',
           options: {
             injectType: 'singletonStyleTag',
             attributes: {
               'data-cke': true
             }
           }
         },
         {
           loader: 'postcss-loader',
           options: styles.getPostCssConfig({
             themeImporter: {
               themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
             },
             minify: true
           })
         }
       ]
     })
   }
   }

2. In your .vue file, import CKEditor as follows

   
   <script>
   let CKEditor
   let ClassicEditor
   if (process.browser) {
   CKEditor = require('@ckeditor/ckeditor5-vue')
   ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
   }

export default { components: { ckeditor: process.browser ? CKEditor.component : null, } }

3. Finally, in your html (vue) make sure to add client only like so:
```html
<client-only>
    <ckeditor
        :editor="editor"
        v-model="newInstructor.biography"
        :config="editorConfig"
        class="border-bottom text-dark"
   ></ckeditor>
</client-only>

[edgarsn]

@ahmed-classtra Your solution doesn't work for me. Receiving many errors. Here is one error from many.

`ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/style-loader/dist/cjs.js??ref--13-0!./node_modules/postcss-loader/src??ref--13-1!./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError

(1:1) Unknown word

1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./balloonpanel.css"); 3 | `

[ahmed-classtra]

@edgarsn that error does not help me resolve your issue. Please post the whole error log.

[edgarsn]

@ahmed-classtra sure, here you go.

Error log

``` ERROR Failed to compile with 35 errors friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./balloonpanel.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonpanel.css 4:14-267 14:3-18:5 15:22-275 @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonrotator.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./balloonrotator.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/balloonrotator.css 4:14-269 14:3-18:5 15:22-277 @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./button.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css 4:14-261 14:3-18:5 15:22-269 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectallui.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectall.js @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/dropdown.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./dropdown.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/dropdown.css 4:14-263 14:3-18:5 15:22-271 @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/dropdownview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/editorui/editorui.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./editorui.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/editorui/editorui.css 4:14-263 14:3-18:5 15:22-271 @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/editoruiview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/fakepanel.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./fakepanel.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/fakepanel.css 4:14-264 14:3-18:5 15:22-272 @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./icon.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css 4:14-259 14:3-18:5 15:22-267 @ ./node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectallui.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectall.js @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/inputtext/inputtext.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./inputtext.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/inputtext/inputtext.css 4:14-264 14:3-18:5 15:22-272 @ ./node_modules/@ckeditor/ckeditor5-ui/src/inputtext/inputtextview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/labeledfield/utils.js @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkformview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/label/label.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./label.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/label/label.css 4:14-260 14:3-18:5 15:22-268 @ ./node_modules/@ckeditor/ckeditor5-ui/src/label/labelview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./labeledfieldview.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css 4:14-271 14:3-18:5 15:22-279 @ ./node_modules/@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkformview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/list/list.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./list.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/list/list.css 4:14-259 14:3-18:5 15:22-267 @ ./node_modules/@ckeditor/ckeditor5-ui/src/list/listview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/listdropdown.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./listdropdown.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/listdropdown.css 4:14-267 14:3-18:5 15:22-275 @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./responsiveform.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css 4:14-269 14:3-18:5 15:22-277 @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkactionsview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/splitbutton.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./splitbutton.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/splitbutton.css 4:14-266 14:3-18:5 15:22-274 @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview.js @ ./node_modules/@ckeditor/ckeditor5-table/src/tableui.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/stickypanel.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./stickypanel.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/stickypanel.css 4:14-266 14:3-18:5 15:22-274 @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/switchbutton.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./switchbutton.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/switchbutton.css 4:14-267 14:3-18:5 15:22-275 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/switchbuttonview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./toolbar.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css 4:14-262 14:3-18:5 15:22-270 @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./toolbardropdown.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css 4:14-270 14:3-18:5 15:22-278 @ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../../postcss-loader/src/index.js??ref--13-1!./tooltip.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css 4:14-262 14:3-18:5 15:22-270 @ ./node_modules/@ckeditor/ckeditor5-ui/src/tooltip/tooltipview.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectallui.js @ ./node_modules/@ckeditor/ckeditor5-select-all/src/selectall.js @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../../postcss-loader/src/index.js??ref--13-1!./globals.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css 4:14-250 14:3-18:5 15:22-258 @ ./node_modules/@ckeditor/ckeditor5-ui/src/view.js @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./classiceditor.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css 4:14-244 14:3-18:5 15:22-252 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-heading/theme/heading.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./heading.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-heading/theme/heading.css 4:14-238 14:3-18:5 15:22-246 @ ./node_modules/@ckeditor/ckeditor5-heading/src/heading.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-table/theme/inserttable.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./inserttable.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-table/theme/inserttable.css 4:14-242 14:3-18:5 15:22-250 @ ./node_modules/@ckeditor/ckeditor5-table/src/ui/inserttableview.js @ ./node_modules/@ckeditor/ckeditor5-table/src/tableui.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/link.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./link.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-link/theme/link.css 4:14-235 14:3-18:5 15:22-243 @ ./node_modules/@ckeditor/ckeditor5-link/src/linkediting.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./linkactions.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css 4:14-242 14:3-18:5 15:22-250 @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkactionsview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./linkform.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-link/theme/linkform.css 4:14-239 14:3-18:5 15:22-247 @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkformview.js @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaembed.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./mediaembed.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaembed.css 4:14-241 14:3-18:5 15:22-249 @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/mediaembed.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaembedediting.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./mediaembedediting.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaembedediting.css 4:14-248 14:3-18:5 15:22-256 @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/mediaembedediting.js @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/mediaembed.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaform.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./mediaform.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-media-embed/theme/mediaform.css 4:14-240 14:3-18:5 15:22-248 @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/ui/mediaformview.js @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/mediaembedui.js @ ./node_modules/@ckeditor/ckeditor5-media-embed/src/mediaembed.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./placeholder.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css 4:14-242 14:3-18:5 15:22-250 @ ./node_modules/@ckeditor/ckeditor5-engine/src/view/placeholder.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditorui.js @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-table/theme/table.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./table.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-table/theme/table.css 4:14-236 14:3-18:5 15:22-244 @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-table/theme/tableediting.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./tableediting.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-table/theme/tableediting.css 4:14-243 14:3-18:5 15:22-251 @ ./node_modules/@ckeditor/ckeditor5-table/src/tableediting.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-table/theme/tableselection.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./tableselection.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-table/theme/tableselection.css 4:14-245 14:3-18:5 15:22-253 @ ./node_modules/@ckeditor/ckeditor5-table/src/tableselection.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/widget.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./widget.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-widget/theme/widget.css 4:14-237 14:3-18:5 15:22-245 @ ./node_modules/@ckeditor/ckeditor5-widget/src/widget.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 21:24:13 ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css friendly-errors 21:24:13 Syntax Error: SyntaxError friendly-errors 21:24:13 (1:1) Unknown word > 1 | var api = require("!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--13-1!./widgettypearound.css"); 3 | friendly-errors 21:24:13 @ ./node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css 4:14-247 14:3-18:5 15:22-255 @ ./node_modules/@ckeditor/ckeditor5-widget/src/widgettypearound/widgettypearound.js @ ./node_modules/@ckeditor/ckeditor5-widget/src/widget.js @ ./node_modules/@ckeditor/ckeditor5-table/src/table.js @ ./libraries/ckeditor/build-classic.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue?vue&type=script&lang=js& @ ./pages/index.vue @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js ```

[ahmed-classtra]

@edgarsn , I'm sorry I'm unable to figure out what is causing your specific error. Maybe someone from the community with more experience can help here. But if I had to guess, I believe it's a loader issue (as in not selecting the right loaders) not a specific CKEditor integration issue 🤷‍♂️

[victororlyk]

how can we fix Cannot read property 'getAttribute' of null with custom build?

[justwiebe]

Alternatively you can define a plugin. I'm still trying to figure out a non-hacky way of loading the editor, but here's what I've got:

plugins/ckeditor.js

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

Vue.use(CKEditor);

nuxt.config.js

export default {
  ...
  plugins: [
    {
      src: '~/plugins/ckeditor.js',
      ssr: false
    },
    ...
  ]
}

.vue Template

<client-only>
  <ckeditor
    v-if="editor"
    v-model="template"
    :editor="editor"
  />
  <div v-else>Loading...</div>
</client-only>

.vue script

data: () => ({
  editor: null
}),
mounted () {
  const vm = this;
  import('@ckeditor/ckeditor5-build-classic').then(editor => {
    vm.editor = editor.default;
  });
}

If you don't want to use an async import, you could try setting the editor as a global variable in the plugin: plugins/ckeditor.js

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
window.__CLASSIC_EDITOR__ = ClassicEditor;

Vue.use(CKEditor);

.vue script

data: () => ({
  editor: process.browser ? window.__CLASSIC_EDITOR__ : null
}),

Ideally there would be a way to set the default editor in the options of Vue.use but I don't see anything about that in the docs

[enzolry]

Wow, just wow.... After 2 DAYS working on setting up CKEditor5 for Nuxt I've finally made it work ! Honestly I don't wish this to my worst enemy... It was so painful that I think it's my duty to share the solution x)

The main problem was webpack config, which I don't know anything about. So since I understand only half of what is written below (copy/pasting pieces of code from this thread and other github/stackoverflow threads) be aware that it could cause issues if you have a more complex build config... :

./nuxt.config.js

const path = require('path')
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")
const CKEditorStyles = require("@ckeditor/ckeditor5-dev-utils").styles

export default {
// Code before...

build: {

    plugins: [
      new CKEditorWebpackPlugin({
          language: 'en',
          additionalLanguages: ['fr'],
          addMainLanguageTranslationsToAllAssets: true
      })
    ],

    extend(config, ctx) {

      config.module.rules.find(r => r.test.test('.css')).exclude = [
        /\.module\.[a-z]+$/,
        /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
      ]

      const filesRuleIndex = config.module.rules.findIndex(item => {
        return item.test.test('.svg')
      })

      if (filesRuleIndex !== -1) {
        config.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
        const svgRule = {...config.module.rules[filesRuleIndex]}
        svgRule.test = /\.svg/
        svgRule.exclude = svgRule.exclude || []
        svgRule.exclude.push(path.join(__dirname, 'node_modules', '@ckeditor'))
        config.module.rules.push(svgRule)
      }

      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"]
      })

      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag',
              attributes: {
                'data-cke': true
              }
            }
          },
          {
            loader: 'postcss-loader',
            options: CKEditorStyles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
              },
              minify: true
            })
          }
        ]
      })
    },
}

This is the editor component I import in my pages ./components/RichEditor.vue

<template>
    <client-only>
        <ckeditor
            :editor="editor"
            :value="value"
            :config="editorConfig"
            @input="ev => $emit('input', ev)" 
        />
    </client-only>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2'
// This is a custom build based on CKEditor BalloonBlock default build
import BalloonBlockEditor from '~/ckeditor5.js'

export default {
    name: 'RichEditor',
    props: {
        value: {
            type: String,
            required: false
        },
        tagName: {
            type: String,
            required: false,
            default: 'div'
        },
        disabled: {
            type: Boolean,
            required: false,
        },
        uploadUrl: {
            type: String,
            required: false
        },
        options: {
            type: Object,
            default: () => {}
        }
    },
    components: {
        ckeditor: process.client ? CKEditor.component : null
    },
    data() {
        return {      
            editor: BalloonBlockEditor,
            editorConfig: this.options
        }
    },
}
</script>

This is the custom build I use. There are many plugins I don't use yet. ./ckeditor5.js

import BalloonBlockEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor.js';

import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import Title from '@ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';

import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';

class Editor extends BalloonBlockEditor {}

Editor.builtinPlugins = [
    Autoformat,
    BlockQuote,
    BlockToolbar,
    Bold,
    CKFinder,
    CKFinderUploadAdapter,
    CloudServices,
    CodeBlock,
    Essentials,
    FontColor,
    Heading,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Italic,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    Table,
    TableToolbar,
    TextTransformation,
    Title,
    TodoList,
    HeadingButtonsUI,
    ParagraphButtonUI
];

export default Editor;

Page example using the RichEditor component

<template>
        <rich-editor v-model="content" :options="editorConfig" />
</template>

<script>
export default {

    data(){
        return {
            content: "<h1>My title</h1>",
            editorConfig: {
                language: 'en',
                blockToolbar: [
                    'paragraph', 'heading1', 'heading2', 'heading3',
                    '|',
                    'bulletedList', 'numberedList', 'TodoList',
                    '|',
                    'blockQuote', 'uploadImage'
                ],
                toolbar: {
                    items: [ 'heading', '|', 'bold', 'italic', '|', 'link' ],
                },

            }
        }
    },

}
</script>

[changemyminds]

I want to use nuxtjs integrate CKEditor5 from source and using plugins. So I tried the above solution, but there are still some error messages. I can't find any sample project on the Github or Stackoverflow.

So I researched for a long time and fixed the error and created a sample project. Maybe this project will help someone.

Sample project

• Javascript Version
• Typescript Version

Demo custom editor-classic from source and import image resize plugin.

Environment

Node v14.17.5 Npm 6.14.14 Nuxtjs 2.15.7

• nuxt.config.js

  
  const path = require('path')
  const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")
  const CKEditorStyles = require("@ckeditor/ckeditor5-dev-utils").styles

export default { // ignore other settings...

ssr: true,

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ { src: '~/plugins/ckeditor.js', ssr: false }, ],

// set false to disable scan the components folder components: false,

// Build Configuration: https://go.nuxtjs.dev/config-build build: { transpile: [/ckeditor5-[^/\]+[/\]src[/\].+.js$/],

plugins: [
  // If you set ssr: true that will cause the following error. This error does not affect the operation.
  // ERROR  [CKEditorWebpackPlugin] Error: No translation has been found for the zh language.
  new CKEditorWebpackPlugin({
    // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
    language: "zh",
    additionalLanguages: 'all',
    addMainLanguageTranslationsToAllAssets: true,
  })
],

// If you don't add postcss, the CKEditor css will not work.
postcss: CKEditorStyles.getPostCssConfig({
  themeImporter: {
    themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
  },
  minify: true
}),

extend(config, ctx) {
  // If you do not exclude and use raw-loader to load svg, the following errors will be caused.
  // Cannot read property 'getAttribute' of null
  const svgRule = config.module.rules.find(item => {
    return /svg/.test(item.test);
  })
  svgRule.exclude = [path.join(__dirname, 'node_modules', '@ckeditor')];

  // add svg to load raw-loader
  config.module.rules.push({
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    use: ["raw-loader"]
  })
}

} }

- components/editor/VCKEditor.vue
```javascript
<template>
  <ckeditor
    v-model="editorData"
    :editor="editor"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'

// less Heading + Essentials plugin can't input the text
import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'

import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage'
import Image from '@ckeditor/ckeditor5-image/src/image'
import ImageResizeEditing from '@ckeditor/ckeditor5-image/src/imageresize/imageresizeediting'
import ImageResizeHandles from '@ckeditor/ckeditor5-image/src/imageresize/imageresizehandles'
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'

export default {
  name: 'VCKEditor',
  components: { ckeditor: CKEditor.component },
  props: {
    value: {
      type: String,
    },
  },
  computed: {
    editorData: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      },
    },
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        plugins: [
          Bold,
          Italic,
          Underline,
          Strikethrough,
          Heading,
          Essentials,
          ImageUpload,
          ImageInsert,
          AutoImage,
          Image,
          ImageResizeEditing,
          ImageResizeHandles,
          Base64UploadAdapter,
        ],

        toolbar: {
          items: [
            'heading',
            '|',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            '|',
            'insertImage',
          ],
        },
        language: 'zh',
      },
    }
  },
}
</script>

• plugins/ckeditor.js

  
  import Vue from 'vue';
  import VCKEditor from "../components/editor/VCKEditor.vue";

Vue.component('v-ckeditor', VCKEditor);

- pages/index.vue
```javascript
<template>
  <client-only>
    <v-ckeditor v-model="text" />
  </client-only>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello World!!',
    }
  },
}
</script>

[bahung1221]

I tried various ways above but I still can't make it work, there is a Cannot read properties of null (reading 'getAttribute') issue thrown on browser console:

This is my nuxt config:

...
  /*
  ** Build configuration
  */
  build: {
    transpile: [
      /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
    ],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // For CKEditor
      // @docs: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-ckeditor-from-source
      const svgRule = config.module.rules.find(item => {
        return /svg/.test(item.test)
      })
      svgRule.exclude = [
        path.join(__dirname, 'node_modules', '@ckeditor'),
        path.join(__dirname, 'components', 'common', 'tek-editor', 'plugins'),
      ]

      // add svg to load raw-loader
      config.module.rules.push({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader'],
      })
    },

    postcss: styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
      },
      minify: true,
    }),

    plugins: [
      new CKEditorWebpackPlugin({
        lang: 'en',
      }),
    ],
  },

Does anyone know how to resolve it? Thanks.

[bahung1221]

I don't know why but downgrade all plugins from v29 to v20 worked.

Edit: of course there are a lot of different in the Component import statements between two versions.

Edit 2: It worked after migrating to v29.2.0.

[ItsmeMing]

Has anyone integrated it into Nuxt 3? I am struggling with this :(

[jmverges]

is this still a issue?

[Witoso]

With [v42.0.0](https://github.com/ckeditor/ckeditor5/releases/tag/v42.0.0) the Nuxt integration with moved forward. We plan to improve a bit Vue integration in the following weeks to be built with ESM, and add a guide for Nuxt, so stay tuned.

[jmverges]

Thanks @Witoso could you tell me if it is like here https://github.com/hoanghiep1x0/nuxt3-ckeditor-guide or here https://github.com/hendisantika/nuxt3-ckeditor5 ? I need to upgrade a project this/next week, if you can save me some minutes I appreciate 🙏 👍

[Witoso]

Eh, I announced a premature success 😕 , we are actually blocked by upgrading our Vue integration to ESM to make Nuxt work seamlessly (observe the https://github.com/ckeditor/ckeditor5-vue/pull/281 PR) and integration releases (should be done within a week or two).

Sorry @jmverges, if you have time constraints, and you cannot wait, the tutorial https://github.com/hendisantika/nuxt3-ckeditor5, looks ok, but it still uses methods pre-42. They are supported in v42, vite plugin was marked as deprecated, but just because it won't have the new versions.

[jmverges]

Thanks for the info @Witoso I will then 👍

[jmverges]

@Witoso anything new about this? Thanks!

[Witoso]

Yep, release scheduled for the next week. You can try using the 7.0.0-alpha.2 of Vue package.

[Witoso]

A new release of the Vue integration just happened.

[jmverges]

Worked great so far