Vue 3 composition API support

[rizkimuhammada]

Hi,

I am currently migrating from Vue options API to composition API, but I encountered an error during plugin initialization.

[Vue warn]:beforeDestroyhas been renamed tobeforeUnmount. at <Ckeditor modelValue="<p>Content of the editor.</p>" onUpdate:modelValue=fn editor=fn<ClassicEditor> ... > at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

[Vue warn]: Unhandled error during execution of render function at <Ckeditor modelValue="<p>Content of the editor.</p>" onUpdate:modelValue=fn editor=fn<ClassicEditor> ... > at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next at <Ckeditor modelValue="<p>Content of the editor.</p>" onUpdate:modelValue=fn editor=fn<ClassicEditor> ... > at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

ckeditor.js?3730:5 Uncaught (in promise) TypeError: t is not a function at Proxy.render (ckeditor.js?3730:5) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:705) at componentEffect (runtime-core.esm-bundler.js?5c40:4044) at reactiveEffect (reactivity.esm-bundler.js?a1e9:42) at effect (reactivity.esm-bundler.js?a1e9:17) at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4027) at mountComponent (runtime-core.esm-bundler.js?5c40:3985) at processComponent (runtime-core.esm-bundler.js?5c40:3945) at patch (runtime-core.esm-bundler.js?5c40:3556) at mountChildren (runtime-core.esm-bundler.js?5c40:3745)

Does ckeditor5-vue support the composition API?

Thank you!

[FilipTokarski]

Hi, sorry for the late reply. Did you follow our docs on Vue 3?
I guess we'll need more information on your use case - specific steps, your configuration, etc.

[lebadapetru]

@FilipTokarski , hey there It seems like the editor cannot be used if you remove the options api like i did:

.addPlugin(
    new webpack.DefinePlugin({
      // Drop Options API from bundle
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false
    })
  )

I receive no error, but when i console log the imported CKEditor, i can see an object with the vue's options properties thus it won't work if i completely removed the option api in my webpack build

Is there any way to make this work? I cannot use it like this :(

Edit:

Looks like i'm able to use it like this in a mounted hook:

onMounted(() => {
      ClassicEditor
          .create( document.querySelector( '#ckeditor' ) )
          .catch( error => {
            console.error( error );
          } );
    })

[FilipTokarski]

cc @psmyrek

[lebadapetru]

@FilipTokarski , hey there It seems like the editor cannot be used if you remove the options api like i did:

.addPlugin(
    new webpack.DefinePlugin({
      // Drop Options API from bundle
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false
    })
  )

I receive no error, but when i console log the imported CKEditor, i can see an object with the vue's options properties thus it won't work if i completely removed the option api in my webpack build

Is there any way to make this work? I cannot use it like this :(

Edit:

Looks like i'm able to use it like this in a mounted hook:

onMounted(() => {
      ClassicEditor
          .create( document.querySelector( '#ckeditor' ) )
          .catch( error => {
            console.error( error );
          } );
    })

any news here?

[psmyrek]

The CKEditor 5 component for Vue.js uses Options API internally, so to be able to use it in your application you cannot remove __VUE_OPTIONS_API__ flag.

[lebadapetru]

The CKEditor 5 component for Vue.js uses Options API internally, so to be able to use it in your application you cannot remove __VUE_OPTIONS_API__ flag.

yeah, i figured that. Are there any plans to add composition api only support? For me isn't really an option to keep the option api since i'm not using it and it's just dead weight.

[psmyrek]

Probably not in the near future. Our priority was to prepare the CKEditor 5 component to run in the Vue 3 without unnecessary refactoring. That's why we left the Options API and did not rewrite it for the Composition API.