Nuxt3 - How do I use toast-ui editor on nuxt3?

245 views Asked by At

Using Nuxt3 and toast-ui Editor.

plugins/tui-editor.client.ts

import '@toast-ui/editor/dist/toastui-editor-viewer'
import { Editor } from '@toast-ui/vue-editor'

export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            editor: Editor,
        },
    }
})

components/DetailArea.client.vue

export default defineComponent({
    setup() {
        const { $editor } = useNuxtApp()
        const Editor = $editor
        console.log(Editor)    // {name: 'ToastuiEditor', mixins: Array(1), props: {…}, watch: {…}, mounted: ƒ, …}
    }
})

I want to use Editor as a component.

Second, I've tried it within components.

components/DetailArea.client.vue

import '@toast-ui/editor/dist/toastui-editor-viewer'
import { Editor } from '@toast-ui/vue-editor'

export default defineComponent({
    setup() {
        const editor = new Editor({
            el: '#detail_viewer'
        })
    }
})

However, a 500 internal error occurred and a 'self is not defined' error message was seen.

0

There are 0 answers