Integration CKFinder in CKEditor on Vue.js

Question

I'm new to vue.js. Integrated CKEditor successfully but having trouble to integrate CKFinder in it. I'm trying to Import CKFinder in CKEditor component but I'm getting an error.

CKEditor-Vue Component:

<template>
    <ckeditor :editor="editor" :value="defaultValue"
              @input="editorInput" :disabled="disabled" :config="editorConfig"></ckeditor>
</template>

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'

    export default {
        name: "Editor",
        props: {
            defaultValue: String,
            disabled: Boolean
        },
        data() {
            return {
                editor: DecoupledEditor,
                editorConfig: {
                    plugins: [
                        CKFinder
                    ]
                }
            }
        },
        methods: {
            editorInput(e) {
                this.$emit('getEditorData', e);
            }
        }
    }
</script>

<style scoped>
</style>

When I try to import CKFinder it's showing ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.. Screenshot:

Am I doing anything wrong? Do you have any integration guide or correction on my component?

Thanks in advance for helping me.

Answer 1

You don't have to import

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'

because it is already included in the build of your choice. You only need to configure it and the error should disappear.