@carbon/vue - Vue 3 Epic

[lee-chase]

There are a number of decisions to be made with regards to a Vue 3 version of @carbon/vue. Each of these will be linked to from here with an indication here as to the result of any decision made.

NOTES:

1. All choices should aim to resolve down to Yes, No or simple (one or two words) decision.
2. All choices should indicate a necessity; Must, Should, Could. Use 'must' to indicate it is a Vue 3 requirement or a project blocker, use 'should' to indicate Vue 3 documentation suggests this or it is thought of as best practice.
3. Related can be for any reason, e.g. #xxx impacts on the decision for #yyy

Choice	Necessity	Decision	Related
#1063 - Should story production be simplified?	Could	Yes	-
#1062 - Should V3 use docgen or similar	Could	Yes	-
#1024 - Remove or remedy functional component use for Vue 3	Should	-	-
#1023 - Remove root wrapper and cv-wrapper where possible	Should	-	-
#1022 - Update custom directive	Must	-	-
#1021 - Review support for array ref	Must	-	-
#591 - Export consts from components	Must	-	Typescript
#580 - Adopt convention for attribute names	Must	-	-
Make use of teleport	Should	-	-
Use Typescript	Should	No. V4, learning two things at once a bad idea. @carbon/vue-icons not typescript	-
Continue use of single file components with HTML templates	Should	-	-
Use composition API only	Should	Yes	-
Use latest syntax only	Should	Yes	-
Use script setup/ref sugar	Could	-	-
Update Vue package example to Vue 3	Must	-	-
Update Vue Codepen/CodeSandbox examples to Vue 3	Must	-	-
Include Codesandbox examples in repo	Could	-	-
A single input wrapper component e.g. label, help, error	Could	-	-
Drop support for deprecated props	Should	-	-
Treat carbon-components-react as canonical implementation	Must	Review during alpha	-
Move towards carbon-components-react API possible break	Should	No. Not need to add breaking changes.	-
Keep options for data and dom versions e.g. &	Should	-	-
Provide an upgrade document	Must	-	-
Update v-model use (BREAKING)	Must	-	-
Replace Sync with v-model modifier	Must	-	-
Use slot syntax is latest	Must	Yes	-
Social media/vue awesome shout outs when complete	Must	-	-
Use "emits" syntax to define component events	Must	-	-
Update v-for ref usage	Must	-	-
Update render syntax use	Must	-	-
Fix @carbon/icons-vue for Vue 3	Must	-	-
Update lifecycle destroyed to unmounted	Must	-	-
Update beforeDestroy to beforeUnmount	Must	-	-
Test coverage for each Vue 3 component	Should	Yes as each component created	-
Use testing-library/vue	Could	Only if available in Vue CLI 5	-
Remove mixins	Should	Props example in CvButton	-
Update array watch with deep as needed	Must	-	-
Remove use of $on	Must	-	-
Remove use of $children	Must	-	-
Use monorepo	Could	-	codesandbox
Create a .next repository or stick with a branch	Could	-	-
Use github actions to build and publish package(s)	Should		-
Ues codesandbox instead of storybook?	-	-
Should we rename files and folders from cv-xxx to CvXxx? Possible old path used directly.	Tempted by yes with upgrade guidelines (and regex instructions)	-

Tasks:

• Select a set of components that covers much of the above to create straw man project.

[lee-chase]

Frustrating that storybook does not yet work with Vue 3 storybookjs/storybook#10654

[phated]

@lee-chase Storybook Vue 3 support is in preview as outlined at the end of that thread.

[lee-chase]

@lee-chase Storybook Vue 3 support is in preview as outlined at the end of that thread.

Got it working thanks.

[PuneethMukkati]

Will Vue 3 support carbon design components?

[code-ape]

With Vue2 reaching end-of-life at the end of this year (Dec. 31, 2023), just wanted to drop a quick question on if Vue3 support was going to be occurring before then or not? Thanks!

Vue2 EOL reference: https://v2.vuejs.org/lts/

[craigyu]

Any estimate on when Vue3 will be fully supported?

[benceszenassy]

Hi @davidnixon,

From user point of view TypeScript or atleast d.ts generation, Carbon V11 support are off the table?
As contributor vue-cli -> vite migration can happen?

I will gladly participate in any of them.