Migration to Vue 3 Overview

[onmax]

I think we can start defining the path of migration and what steps need to be taken towards migrating the codebase to Vue 3.

In this issue we can define the progress and steps we need to take. Not all of the steps are fully necessary but they are nice to have.

There are 3 phases to the project: "Before migrating to Vue 3.0.0", "Switching to Vue 3.0.0" and "Clean up and Vue 3.5.0"

Before migrating to Vue 3.0.0

• Removed context.root from every component #256
• Update Vue Router to 3.6.5 (latest supporting Vue 2).
  • Partly chore: update vue-router to be able to use addRoute #262
  • Remove the useRouter().currentRoute. Instead useRoute() Replace .currentRoute with useRoute() #265
  • Replace @click="$router.push(...) with router-link
• Update vue-composition-api-plugin to latest version (breaking changes, especially in watch())
• Update Pinia to latest Vue2-compatible version (breaking changes)
• Update Vue to 2.7 (latests version 2)
• Move to vite and vite-vue-2. Update build scripts?
• Create typecheck command and solve types issues

Switching to Vue 3.0.0

• Remove the attribute functional in <template functional> as is no longer needed
• Run the tool https://github.com/UnrefinedBrain/vue-upgrade-tool
• Run vue-tsc and check typelint since I believe there is room for improvements in general
• Migrate to vue-i18n with custom extractor. See more: https://chatgpt.com/s/dr_68346e47d0b481919d07b55bade56fd3
• ::v-deep now is :deep()

Then:

1. Test that everything works
2. Re-test that everything works
3. Go to step 1

Clean up and enhancements

This section maybe is not necessary

• Move everything to setup composition api
• Upgrade Eslint to v9 with Flat config
  • Force the definition of props and emits via types defineProps<{ prop: string[] }>() instead of defineProps({ prop:{ type: Array as PropType<string[]>, required: true })
• Consume useRouter directly. Remove the useRouter in router.ts
• Consume nextTick directly. Remove the proxy nextTick.
• Update to Vue 3.5.0
• Use useTemplateRef(?)

---

This list is highly opinionated, but feel free to edit/add/remove items. Once we have a clear path, we can start taking small steps towards Vue 3 :)