Evaluate Upgrade from Vue 2 to Vue 3 for WALLY

Summary:

Comparatively to GWELLS, the changes to WALLY might require a bit more effort because it uses Vuetify. The syntactical changes between Vuetify 2 and Vuetify 3 seems to have caused quite a headache for other developers in their migrations, so this should be considered in the migration steps.

Dependencies:

vue-motomo (3.13.4-1)
- Analytics library to track clicks, etc
- Current version works for both Vue 2.x and Vue 3.x
- Latest version available 4.2.0
- Our version is ~3 years old
vue-plotly (1.0.1)
- Vue wrapper for plotly.js
- Doesn't look like there's an upgrade for this for Vue 3, although a workaround might still be found here.
- Latest version available 1.1.0 (also about 4 years old)
- Our version is ~4 years old
vue-router(3.0.3)
- Used to navigate between components
- Current version works with Vue 2
- Latest version available 4.2.4
- Vue Router 4 works specifically for Vue 3
- Our version is ~4 years old
vuetify (2.4.2)
- Collection of pre-made components
- The difference between Vuetify 2 and Vuetify 3 seems to be pretty vast, and might take quite a bit of time to resolve
- Latest version available 3.3.15
- Our version is ~3 years old
vuex (3.0.1)
- State management library for Vue
- Latest version available is 4.1.0 (new name: Pinia)
- Pinia is made for Vue 3 but works for Vue 2.x as well
- Vuex 3 and Vuex 4 will still be maintained, just no new functionality
- Our version is ~6 years old

Dev Dependencies:

@vue/test-utils (1.0.0-beta.30)
- Testing for the Vue framework
- Works with Vue 2
- Has a Vue 3 equivalent with updates (and notes on migration)
- Latest version available 2.4.1
- Our version is ~4 years old
vue-template-compiler (2.6.10)
- Built specifically for Vue 2
- Latest version available 2.7.14
- Our version is ~4 years old
- This dependency is completely replaced by @vue/compiler-sfc and is included in the Vue package
vuetify-loader (1.6.0)
- Automatically import all Vuetify components as you use them
- Built specifically for Vuetify 2
- For Vuetify 3, using the Nuxt plugin will get you tree-shaking by default
- Latest version available 1.9.2
- Our version is ~3 years old

New Features and Benefits

Vue 3 uses newer syntax and functionality introduced in ES6
- This gives it access to features like Reflect and Proxy for some of its internal workings, as opposed to previously using the Object.defineProperty and using getters and setters for functionality
- This improves the performance on watching and rendering objects and properties, so it's on a more fine-grained level and results in more accurate and efficient reactivity.
- Vue 3's virtual DOM diffing algorithm is more optimized - reduces the number of operations required to update the DOM - leading to faster rendering and updates
- Tree-Shakable, which means that unused components and features can be automatically removed during the build process, resulting in smaller bundle sizes and improved loading times
\<teleport\> component to move a component around easily in the DOM
- Helps with getting things like pop-ups out from being deeply nested in a component
- They should normally be higher in the page, improves accessibility and is semantically better
- You can bring the pop-up (or other components) to other spots in the code
Support for Fragments
- Fragments means we can have multiple root elements, which is mostly for devs and is just a nicer thing to have in most places
Composition API may be used to replace Options API
- Places in the code we might see a setup like this:

{
  data() {
    return { name: 'Dave' };
  },
    methods: { … }
  }
}

This is generally seen as the Options API, and we can continue to use this setup in our Vue components
The Options API can create a few limitations or issues with bigger Vue apps
- Code that belongs together logically is split up across multiple options (data, methods, computed)
- Re-using logic across components is tricky or convoluted
With the Composition API, we can streamline these snippets using the setup() and using ref, which creates a wrapper object as a reactive variable
Vue was internally re-written with TypeScript - better TypeScript support

Breaking Changes

High impact:

Vuex's Store is now created with createStore()
- New syntax that no longer uses the Vue global object
- Similar to GWELLS, WALLY uses a bit of a different setup for state monitoring. It's a modularized setup for the different parts of the app, so a migration to the new createStore() setup might require some code refactoring to properly connect and work in a similar manner.

Medium impact:

Creating an Instance or an App is different and uses different syntax
- They now use the createApp function
- Essentially, anywhere that has `new Vue({...}) has to use createApp
- Somewhat copy/paste after that
- el property no longer exists
- Now uses .mount() method
Data is no longer to be an object, must always be a method
- Anywhere that has data: {...} has to change to bedata()`

Low Impact:

Transitions: v-enter is now v-enter-now
- No example in WALLY
Vue Router is now created with createRouter, and those transitions work differently
- Slightly different syntax for setting up, as you no longer use the global Vue object
- routes stay pretty well the same in the code
- Slight change to how history is used
Components, directives, and third-party modules are registered on "app" instead of Vue global object
- We don't call Vue.component(...) anymore
- We store Vue.createApp() in a constant, which we then use .mount(), .component(), etc.

@vue/compat

Works as a Vue 3 app, but provides configurable Vue 2-compatible behaviour.
Runs in Vue 2 mode by default, but will emit runtime warnings for features that have been changed or deprecated in Vue 3
Used for:
- Migrating a Vue 2 application to Vue 3 (with some limitations)
- Migrating a library to support Vue 3
- Learn the differences between Vue 2 and Vue 3
Acts as an intermediary to run Vue 2 components in Vue 3
- Can configure between Vue 2 and Vue 3 at an app-level or a component-level
What it doesn't do:
- Doesn't add APIs that were deprecated in 2.6
- We're using 2.6 so that shouldn't be an issue
- Doesn't replace internal APIs
- Doesn't support IE11

Unit Tests Changes

Some important changes between Vue 2 and Vue 3 can be found here
Some important, possibly more time-consuming changes:
- createLocalVue now uses the global mounting option
- This is because we no longer use new Vue() for Vue apps, we now mount the app using createApp and the mount() method
- Stubs and mocks are now nested within global
- shallowMount no longer outputs custom components
- Can set the following: config.global.renderStubDefaultSlot = true, which will maintain the old behaviour

bcgov / WALLY

Evaluate Upgrade from Vue 2 to Vue 3 for WALLY #731