[TS] PoC of using types in Vue integration

[arkflpc]

Part of #13471.

[Witoso]

The result of PoC:

• Vue project using vue integration (updated in [TS] Migrate Vue integration to use generated typings #13543) and alpha.1 release. On ckeditor5 repo in the dedicated branch.
• Write down how the integration went. What steps happened, etc. what was not obvious, did it help, in what, we could later reuse it in guides for this dedicated technology and in TS blog post.

[filipsobol]

New Vue demo project was added in ckeditor/ckeditor5-vue#244

[filipsobol]

The Vue integration should work exactly as it did before the updates, but it now requires Editor version 37 or later.

If developers have their IDEs set up properly for Vue.js development (e.g., by installing Volar and TypeScript Vue Plugin in VS Code), the new version should provide much better code suggestion and completion, and should show errors if passed props are of the wrong type.

The new demo in the repository shows how to use the integration and gives an example of using all the props and events available in the component.

Component name suggestion:

Error when required editor prop is missing:

Prop suggestions:

Events suggestions:

[Reinmar]

Out of curiosity: Why do you have <Ckeditor> (and not <ckeditor>) on these screenshots? I can see you used <ckeditor> in the sample itself, but got curious anyway.

[filipsobol]

Short answer: <Ckeditor> and <ckeditor> are the same thing for Vue, and both will work.

Long answer: The official recommendation from the Vue team is to use PascalCase or kebab-case for Vue components, so that they can be easily distinguished from regular HTML elements. To follow this recommendation (and make eslint happy), I changed the name of the components from <ckeditor> to <Ckeditor>. Either name will work, so it won't make any difference in consuming projects, except that <Ckeditor> will be the default suggested by the IDE (see the first screenshot in my comment above).

Another recommendation is to use multi-word names to avoid potential conflicts when new HTML elements are introduced in the future (e.g. using todo-item instead of generic item). Following this recommendation would be a breaking change, so I choose to ignore it.

[Reinmar]

Would Vue accept <CKEditor>?

It hurts my eyes when I see <Ckeditor> :D I understand we can't do much with how it's suggested by the IDE but maybe let's at least have it written acceptably in the docs/examples.

[filipsobol]

@Reinmar Unfortunately, changing the name of the component to CKEditor would be a breaking change. Each capital letter is treated as the beginning of a new word. Ckeditor is equal to ckeditor and TodoItem is equal to todo-item, so CKEditor would be c-k-editor.