VueJS CKEditor5 not visible - vue.js

Question

I'm trying to create a component showing ckeditor which allows me, to write Markdown content. For an unknown reason, there's no visible ckeditor in the frontend but DOM contains html code:
<div style="display: none;"></div>
<div class="ck ck-reset ck-editor ck-rounded-corners" role="application" dir="ltr" lang="de" aria-labelledby="ck-editor__label_ec33b345a3a3b06ddbf2aacd8201fc695">
<label class="ck ck-label ck-voice-label" id="ck-editor__label_ec33b345a3a3b06ddbf2aacd8201fc695">Rich Text Editor</label>
<div class="ck ck-editor__top ck-reset_all" role="presentation">
<div class="ck ck-sticky-panel">
<div class="ck ck-sticky-panel__placeholder" style="display: none;"></div>
<div class="ck ck-sticky-panel__content">
<div class="ck ck-toolbar ck-toolbar_grouping" role="toolbar" aria-label="Editor Werkzeugleiste">
<div class="ck ck-toolbar__items"></div>
</div>
</div>
</div>
</div>
<div class="ck ck-editor__main" role="presentation">
<div class="ck-blurred ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline" lang="de" dir="ltr" role="textbox" aria-label="Bearbeitungsbereich des Editors: main" contenteditable="true">
<br data-cke-filler="true">
</div>
</div>
</div>
This is my VueComponent:
<template>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"/>
</template>
<script>
import CKEditor from '#ckeditor/ckeditor5-vue';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import Markdown from '#ckeditor/ckeditor5-markdown-gfm/src/markdown';
export default {
components: {
ckeditor: CKEditor.component
},
data: () => ({
editor: ClassicEditor,
editorData: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...',
editorConfig: {
extraPlugins: [Markdown, Essentials, Bold, Italic]
}
})
};
</script>
As I already said, nothing is visible in the frontend but html is rendered inside of the dom.
I do not need all features of the editor, just a few and Markdown. These are the packages I've installed:
"#ckeditor/ckeditor5-basic-styles": "^35.1.0",
"#ckeditor/ckeditor5-build-classic": "^35.1.0",
"#ckeditor/ckeditor5-core": "^35.1.0",
"#ckeditor/ckeditor5-editor-classic": "^35.1.0",
"#ckeditor/ckeditor5-essentials": "^35.1.0",
"#ckeditor/ckeditor5-markdown-gfm": "^35.1.0",
"#ckeditor/ckeditor5-vue": "^4.0.1",
"ckeditor5": "^35.1.0"
Could anyone help me please? I really appreciate your support.

Answer 1

If you are using Vue 3 you can use this one
<template>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script setup>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import CKEditor from '#ckeditor/ckeditor5-vue';
import { ref } from '#vue/reactivity';
const ckeditor = CKEditor.component;
const editor = ClassicEditor;
const editorData = ref('<p>Content of the editor.</p>');
const editorConfig = ref({
})
</script>
<style>
</style>
Remember to install the plugin by
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-classic
Ref Vue.js 3+ rich text editor component