Ckeditor5: Add docs for Vue 3 integration

[FilipTokarski]

📝 Provide a description of requested docs changes

Recently Vue 3 came out and it has some changes in the api. If you now try to follow our integration guide using Vue 3, they do not match.

So, I tried to use the new api and in main.js I did:

import { createApp } from 'vue';
import App from './App.vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

const app = createApp( App );

app.use( CKEditor );
app.mount( '#app' );

Then I got:

[Vue warn]: `beforeDestroy` has been renamed to `beforeUnmount`. 
  at <Ckeditor editor=fn<Sb> modelValue="<p>Content of the editor.</p>" onUpdate:modelValue=fn  ... > 
  at <App>

[Vue warn]: Unhandled error during execution of render function 
  at <Ckeditor editor=fn<Sb> modelValue="<p>Content of the editor.</p>" onUpdate:modelValue=fn  ... > 
  at <App>

Uncaught TypeError: t is not a function
    at Proxy.render (ckeditor.js?3730:5)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)
    at patch (runtime-core.esm-bundler.js?5c40:3991)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4180)

TBH I'm not sure if there's some easy workaround for this ( ofc if I did this right ), or whether it needs some deeper changes.
cc @oleq could you take a look at this?

[nfplee]

I've just had a quick look at this and the fix looks quite simple.

I had to change:

render( createElement ) {
    return createElement( this.tagName );
}

to:

render() {
    return h( this.tagName );
}

This required importing the h function:

import { h } from 'vue'

See https://v3.vuejs.org/guide/migration/render-function-api.html#render-function-argument for more information.

Also to remove the warning I changed beforeDestroy to beforeUnmount.

[yedidisatya]

Hey sorry I can see this issue got closed.
can some explain a little clearly how to fix this one?

[oleq]

I researched this issue and here are some findings:

• The scope of changes is not limited to docs only. The component implementation must change to become compatible with Vue 3.x.
• I confirm the comment by @nfplee. The render() function syntax has changed and to work in Vue 3.x, the CKEditor component must use the h() function imported like this import { h } from 'vue' (see the current imlementation).
  
  
  
  • This means we need to do this change in the pre-built component we distribute via npm.
  
  
  • However, unless we update Vue to 3.x in @ckeditor/ckeditor5-vue, a warning is thrown when building the component "export 'h' was not found in 'vue' and the component does not work in a Vue 3.x application.
  
  
  • Updating Vue to 3.x in @ckeditor/ckeditor5-vue and using import { h } from 'vue' obviously breaks compatibility with Vue 2.x.
  
  
• Considering ☝️, it looks like we need separate components for Vue 2.x and Vue 3.x, which is a hassle.
  
  
  
  • I'm not sure if they should be provided by the same npm package or separate packages.
  
  
  • I'm not sure how to name them.
  
  
• Or... we could openly stop supporting Vue 2.x and from @ckeditor/[email protected] on support Vue 3.x only.
  
  
  
  • However, this way there is no obvious way to backport bug fixes to @ckeditor/[email protected] and I'm pretty sure Vue 2.x will be used for years to come.
  
  

[oleq]

I re-opened the Vue 3 compatibility issue on the ckeditor5-vue bug tracker. I'm not closing this issue, though – it should be used to track changes in documentation.

[yedidisatya]

When we can expect this CK editor 5 for Vue 3.

[oleq]

When we can expect this CK editor 5 for Vue 3.

@yedidisatya This is a high priority issue for the CKEditor team and the ETA is by the end of October but I can't make a promise. Things can change if something unexpected comes up.