'Laravel 9 vue js 3 Ckeditor 5 not showing

I want to install ckeditor to add blog posts to my Laravel 9 mix and vue js 3 project. If I do as the ckeditor says on his page, the ckeditor will not appear unless he makes a mistake

enter image description here

App.js

    require('./bootstrap');
import { createApp } from "vue";
import App from './components/App';
import router from './router'
import store from "./store/store";
import AOS from 'aos'
import 'aos/dist/aos.css'
import CKEditor from '@ckeditor/ckeditor5-vue';

const app = createApp({});


app.AOS = new AOS.init();
app.component('my-app',App);

app.use(router)
app.use(store);
AOS.init();
app.mount('#wrapper');
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );

newBlog.vue file

<script setup>
import {mapGetters} from "vuex";
</script>
<template>
    <div id="app">
        <form @submit.prevent>
            <div class="form-row mb-4">
                <label>Blog adi</label>
                <div class="form-group col-md-12">
                    <input class="form-control w-100" v-model="blogName">
                </div>
            </div>
            <div class="form-row mb-4">
                <label>Blog yazısı</label>
                <div>
                    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
                </div>
            </div>

            <button type="button" @click="send()" class="btn btn-primary mt-3">Redaktə et</button>
        </form>
    </div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default {
    name: 'app',
    data() {
        return {
            blogName: '',
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                // The configuration of the editor.
            }
        };
    }
}
</script>

Export

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source