CKEditor5 With NuxtJs

1_Readme.md

Usage Guideline

1 - Install dependencies

npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic  

2 - initialize plugin

// nuxt.config.js
plugins: [
      ....,
      '~/plugins/ckeditor.client.js',
  ],

3 - Add the following component & module 4 - Usage

<MyCkEditor v-model="description"/>

ckeditor.client.js

//Nuxt Plugin
import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Vue.use( CKEditor );

export default ({ app }, inject) => {
    inject('ClassicEditor', ClassicEditor)
  }

MyCkEditor.vue

<template>
    <ckeditor :editor="editor" :value="value" @input="handleInput" :config="editorConfig"/>
</template>
<script>
    
export default {
    props : ['value'],
    data(){
        return{
            editor: this.$ClassicEditor,
                editorConfig: {
                    // The configuration of the editor.
                }
        }
    },
    methods:{
        handleInput (e){
            this.$emit('input', e)
        }
    }
}
</script>

<style >
.ck-editor__editable {
    min-height: 200px;
}
</style>