Unknown custom element: <tui-image-editor>

[Piyush Tiwari]

<template>
    <div id="imageEditorApp">
        <tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>
    </div>
</template>

<script>
import "../../assets/css/font-family.css"
import "../../assets/css/materialdesignicons.css"
import ImageEditor from '@toast-ui/vue-image-editor';


export default {
    name: 'EditingFrontPage',
    components: {
        'tui-image-editor': ImageEditor,
    },
    data() {
        return {
            useDefaultUI: true,
            options: { // for tui-image-editor component's "options" prop
                cssMaxWidth: 700,
                cssMaxHeight: 500,
            }
        };
    }
}
</script>

<style scoped>

</style> I get the error -

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

--->
at src/views/Layout.vue
at src/App.vue
Even though I have name registered.

[Piyush Tiwari]

Solved by

import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'
import "tui-color-picker/dist/tui-color-picker.css";
import 'tui-image-editor/dist/tui-image-editor.css';

importing .vue component directly, as given one of the options in documentation.