Migrating from Vue2 to Vue3

[sohamsshah]

The Flint-UI Project is currently implemented with Vue2.

Vue.js has released v3 and has made it official to use Vue3 as the stable version of the framework.

Before migrating to Vue3, we need to discuss few pointers:

• Is it a sheer necessity to migrate? If yes, then why?
• Is there any broken/dead code because of the version upgrade?
• Discuss any other workaround to stay at older version (Vue2) and still make things work. (Eg. downgrading/replacing/fixing breaking libraries/dependencies)
• Timeline for this particular task of migration (including what things needs to be considered)

Migrating to Vue3 from Vue2:

• Upgrade the Vue version
• Updating syntax at all parts of the codebase
• Replacing anti-patterns which existed in Vue2 with the latest programming pattern
• Upgrading the related dependencies to their latest supporting version of Vue3 (Eg. Vuex to be migrated from v3 to v4 since we are going with Vue3)
• Test the functionality

Note: Before taking any major steps in migration, it could be better to discuss the approach with the mentors/maintainers/community-members to avoid ambiguity in implementation.

Other ideas:

• Type Safety via TypeScript: Along with the framework migration, considering to upgrade codebase with Typescript can be a good approach.

Cc: @HarshCasper @aornugent

[YashKandalkar]

I think migrating to Vue3 will also help us in the long run as the Vue3 community support expands.
As Vue3 is backwards compatible, we'll need some minor changes if something breaks, and then we can start upgrading components according to the Vue3 patterns.

Not sure if we should add typescript support simultaneously, as it may be difficult for contributors to do the migrations + add types where required. We need the opinion of more contributors on this.
Maybe, after the migration for a component is done, we can add it to the typescript issue for other contributors to add types?

[Timonwa]

I agree. we should not do both simultaneously but migrate to Vue 3 first before changing to typescript.

[sohamsshah]

Tracking Progress of the Migration:

• Migrate Vue-2 to Vue-3 for FLINT-UI #294
• Changed Button component from Vue 2 to Vue 3 #299
• feat: Changed Slider component from Vue 2 to Vue 3 #301
• Changed Maps, Navbar from Vue 2 to Vue 3 #302