DPL-800 - As developers we would like to upgrade Traction from Vue 2.7 to 3 as Vue 2 is due to be deprecated in December 20203

[stevieing]

Description As developers we would like to upgrade Traction from Vue 2.7 to 3 as Vue 2 is due to be deprecated in December 20203 Work (updated as identified)

• [x] Change app creation in main.js
• [x] Change Vue.set and Vue.delete to just use standard value set and delete
• [x] Remove vitals plugin-vue2 and reference in vite config
• [ ] Identify breaking features
• https://v3-migration.vuejs.org/breaking-changes/v-model.html
• https://v3-migration.vuejs.org/breaking-changes/emits-option.html
• [x] Review custom shared components
• [x] Fix UI missing styling
• [x] Ensure CI is operating correctly
• [ ] Ensure deployment builds are working

VueX (https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process)

• [x] Change ./store/index.js to use createStore directive
• [x] Change app creation to register store from ./store/index.js

VueRouter (https://router.vuejs.org/guide/) & (https://router.vuejs.org/guide/migration/)

• [x] Change router.js to use createRouter directive
• [x] Change app creation to register router from ./router

VueSWRV (https://docs-swrv.netlify.app/features.html)

• [x] Remove ./lib/composition_wrapper
• [x] Update site config to remove reference to composition wrapper
• [x] Update useSWRV to take a ref value as URL

Vue test utils

• [x] Update syntax to use latest vue test utils features
• [x] Update setup files to use global configs
• [x] Ensure all tests are passing

Who the primary contacts are for this work Steve / Seena / Ben

Knowledge or Stake holders Other people that may have specific knowledge about this work or have a stake in how it is implemented. e.g. John Smith is an expert on x

Additional context or information This story originally focused on just researching the upgrade, however upon investigation it made more sense to research and implement at the same time to prevent duplicated effort.

[stevieing]

Chat GPT answer:

If you're using Vite instead of Vue CLI, the process of upgrading your Vue 2.7 application to Vue 3 will have some differences. Here's a modified guide specifically for upgrading with Vite:

1. Update dependencies: Start by updating the Vue-related dependencies in your project, including Vue itself, Vue Router, Vuex, and any other Vue plugins you may be using. Check the documentation for each package to determine the compatible versions with Vue 3.

2. Review breaking changes: Review the Vue 3 migration guide (https://v3.vuejs.org/guide/migration/introduction.html) to understand the breaking changes introduced in Vue 3 and how they may impact your application. This will help you anticipate any modifications you need to make during the upgrade process.

3. Update Vite: Make sure you're using the latest version of Vite. You can update Vite by running the following command in your terminal:

   npm update vite

4. Create a new Vue 3 project: Create a new Vue 3 project using Vite alongside your existing Vue 2.7 application. This allows you to compare and migrate your code incrementally. Create a new directory and run the following commands to create and start a new Vue 3 project:

   npm init vite my-new-project --template vue
   cd my-new-project
   npm install
   npm run dev

5. Migrate code incrementally: Start migrating one component or feature at a time from your Vue 2.7 project to the Vue 3 project. Test each migrated component to ensure it functions correctly. Pay attention to changes in component options, syntax, and features, as well as any deprecated APIs.

6. Use the Vue Migration Build: Install the Vue Migration Build to help identify potential issues during the upgrade process. In your Vue 2.7 project, run the following command:

   npm install @vue/compat

   After installation, update your main.js file to import the Vue Migration Build:

   import { createApp } from 'vue'
   import VueCompat from '@vue/compat'
   import App from './App.vue'
   
   createApp(App)
    .use(VueCompat)
    .mount('#app')

   The Vue Migration Build will provide warnings and suggestions for any Vue 2.x specific code or patterns that need to be updated.

7. Update code to use Composition API: Migrate your existing components to use the Composition API, which is an alternative to the Options API and provides better code organization and reusability.

8. Update template syntax: Review the changes to the template syntax in Vue 3 and update your templates accordingly. For example, v-bind is now replaced with : and v-on is replaced with @.

9. Test and debug: Thoroughly test your application during the migration process to ensure all components and features are working as expected. Use the browser's developer tools and Vue Devtools to debug any issues that may arise.

10. Refactor and remove deprecated APIs: Once all components and features have been migrated, remove any deprecated APIs and refactor your code to take advantage of the new features and improvements in Vue 3.

Remember to consult the documentation of Vite and any other libraries or plugins you're using for additional guidance specific to those tools.

[stevieing]

Vue 3 migration guide