Migration to Vue 3

[cnotv]

Description

Vue 2 is going to be EOM for the end of 2023. This issue is to track the required operation to reach from basic to optimal migration of Vue to version 3.

Context

Since it has been decided to remove Nuxt, due lack of SSR and given the SPA architecture is optimal for our case, it will be defined afterward the requirement to fulfill the migration list.
The goal is to make it possible to work with Vue 3, although reaching an ex novo state would facilitate the development and further integrations.

Requirements

Nuxt Removal

• Remove Nuxt as a Dependency #5968
• Fix create app for nuxt removal #8376
• Check dependencies for updates on rancher/dashboard #4534
• Replace nuxt-link with router-link #10716

Vue

First steps

• Upgrade to Vue 2.7 #8078
• Investigate operations required for migration of Vue 2.7 to Vue 3 #9028
• Create Vue3 migration script: upgrade libraries, configuration, syntax and tools (extension ready) #9541
• Update Vue3 libraries and related configuration #9539 (waiting to rebase)

Configuration

Epics to be completed before migration

• Refactor plugins import #11487
• Remove last Nuxt leftovers #11070
• Router architecture and authentication updates refactoring #11457
• Cleanup or refactor existing configuration #11458
• Update or replace dependencies to be compatible with Vue3 #11459

Migration

• Create Vue3 migration script: upgrade libraries, configuration, syntax and tools (extension ready) #9541
• Bucket list of Vue3 errors on runtime #11492
• Vue3 linting issues #11619
• Vue3 unit test issues #11620
• Vue3: Failing E2E Test #11622
• Vue3 check-plugins-build issues #11639

Secondary

Extensions

As part of the migration, we'll have to update also the syntax for the extensions.
For these cases, we can use the script from #9541 and check all the crossed requirements to be at least mentioned for each extension.

• Investigate breaking changes between Rancher Dashboard and Extensions using Vue3 #11049
• Extend test automation for installing plugins to Rancher by using serve and compiled plugins #10659
• Prevent Extensions from breaking without providing info in case of Vue incompatibilities #10660
• Automation: Create basic E2E test for Harvester #8741

Extras (non-blockers)

• Update Storybook to use Vue3 #9540
• Add documentation for migration to Vue3 for Rancher Extensions #10658

Issues to be checked if solved on migration

• Fix issue with mixins within TS components #7679
• Allow use of components within Wrapper for unit tests #7476
• Fix .vue import issue within TS components #7680
• Investigate issue with intellisense navigation within Rancher Dashboard code #7357
• Fix warnings wall on installation [1]

Optional

• Update typing after Vue3 migration due TS version bump #10870
• Add information for extension TS rework #10871
• Migrate project from Webpack to Vite (Vue CLI EOM) #7468, this seems to be required as Vue CLI library is in maintenance mode
• Pinia adoption
• Test migration to Vitest? As Jest is ESM hell configuration and is embed in Vitest, this is going to be handled with Vite migration
• Autoimport adoption, to reduce code and migration steps (it will require Investigate issue with intellisense navigation within Rancher Dashboard code #7357 to be fixed)
• Remove fetch() usage as leftover from Nuxt  #9711

[cnotv]

First plugin discontinued since 5 years: https://github.com/fgr-araujo/vue-shortkey

[gaktive]

To do after upgrading to Vue 2.7:
#8078

[gaktive]

Since moving to Vue 3 will potentially introduce breakage into existing UI extensions that folks (internal & otherwise) have written, we need to warn people about that risk when we finally do ship this.

[cnotv]

This is going to break for sure something and since we still don't have enough core E2E tests and our real code coverage is 14%

[cnotv]

Closing as Vue3 branch merged.