---
title: Vue 3 Migration
description: Notes for the Vue 2 to Vue 3 migration of the ToolWatch cloud web app
tags: ToolWatch
---
# Vue 3 Migration Main Tasks
- vue 2.6.14 to vue latest
- use linter to identify and fix suitable migration issues
- use Vue3 composition API (with TS)
- should we go to vue 2.7 and enable composition API first?
- vue-cli-service to Vite
- migrate all npm packages to V3 compatible packages
- vuex to Pinia
- vuetify
- https://vuetifyjs.com/en/getting-started/upgrade-guide/
- playwright/chromedriver to vitest

# Vue 3 Migration Resource Links
[Migration Cheat Sheet](https://www.vuemastery.com/pdf/Migration-Guide-Cheat-Sheet.pdf)
[Vue Mastery Migration Blog](https://www.vuemastery.com/blog/migration/)

# ToolWatch Migration survey
## **Incompatible Issues**

---
**No results \o/**

---
**I found no usage of `v-if` and `v-for` in the same element in 588 uses of `v-for`**

---
**Not sure how to search for this 🤷‍♂️**

---
**No results \o/**

---
Tired the following regex to find instances, but I think VS Code can't handle the regex :/
`/(v-if)[\s\S]*?(:key)/` and `/(v-if)[\s\S]*?(v-else)/`

**That said, I don't think there are many/any of these.**

## **Replaced Functionality Issues**
**App.vue will need to be refactored**

---
**No results \o/**

---
**No results \o/**

---
**This could be a significant issue, more research needed**

## **Renaming Issues**

---
**No results \o/**

---
**No results \o/**

---
**More research needed**

## **Removed Functionality Issues**
**Already using key names (not using keycodes)**

---
**No results \o/**

---
**No results \o/**

---

---
**No results \o/**

## **General issues**
* There a a lot of misplaced `:key`'s defined in nested elements instead of the element with the `v-for=`


#### **More research needed**
#### Not sure how `export default {...` generally migrates *(there are 749 files using this construct)*

| Vue2 | Vue3 | Reference |
| -------- | -------- | -------- |
| export default vue.extend({...}) | export default defineComponent({...}) | [Reference](https://blog.codersrank.io/vue-3-migration-plan-for-vue-2-users/) |

#### Not sure when and where we need to use the new <script setup> over <script>

`<script setup>` is available for opt-in but dont have to use it. We can continue using `<script>` instead of `<script setup>`
1. `<script setup>` provides syntactic sugar to using Composition API inside signle file component. [Reference](https://vuejs.org/api/sfc-script-setup.html#basic-syntax)
2. Top-level bindings are exposed to template
3. Dont have to declare `export default` and a `setup` method [More details](https://learnvue.co/articles/script-setup)
4. [Advance capabilities](https://learnvue.co/articles/script-setup)

## **External Libraries** - wip

Latest verision of vue is 3.2.47 according to npmjs.com/package/vue

| Library | Current Version | Latest Version | Current Version Vue 3 Compatible|Latest Version Vue 3 Compatible | Important Notes|
| -------- | -------- | -------- |---------|---------|-----|
| datadog/browser-rum | 4.16.1 | 4.38.0 | No |No| new package specifically designed to work with Vue 3 => @datadog/browser-logs-vue |
| sentry/tracing| 6.2.0 | 7.47.0 | Yes | Yes |
| sentry/vue| 6.2.0 | 7.47.0 | Yes | Yes|
| types/vuelidate|0.7.15 | 0.7.16 | No | No | 0.7.x does not support vue3. Vuelidate 2.0 possible alternative.https://vuelidate-next.netlify.app/
| vue/composition-api| 1.0.0-rc.13 | 1.7.1 | Yes | Yes
| axios |0.21.2 | 1.3.5 | Yes |Yes| Framework-agnostic|
| chart.js|2.9.4 | 4.2.1 | Yes |Yes|
| chartjs-plugin-labels| 1.1.0 | 1.1.0 | Yes | Yes
| chartjs-plugin-stacked100|0.4.4 | 1.3.0 | Yes | Yes | Framework-agnostic
| core-js|3.8.3 | 3.30.0 | Yes | Yes |
| csv-exportor| 1.0.2 | 1.0.2 | Yes | Yes | Framewrork-agnostic
| metismenu| 3.0.7 | 3.0.7 | No? | No
| popper.js|1.16.1 | 1.16.1 | Yes | -
| v-calendar|2.3.4 | 2.4.1 | No | Yes|[Reference](https://vcalendar.io/getting-started/installation.html)
| vue|2.6.14 | 3.2.47 | - |-|
|vue-button-spinner|2.2.1 | 2.2.1 | No | ?? | https://github.com/wanxe/vue-button-spinner
| vue-chartjs|3.5.1 | 5.2.0 | No |Yes| https://github.com/apertureless/vue-chartjs/blob/main/CHANGELOG.md
| vue-class-component|7.2.6 | 7.2.6 | No | No | No longer maintained.Recommended approach reference https://class-component.vuejs.org/
| vue-closable|0.0.3 | 0.0.3 | No - package is 4yrs old |No| Possible replacement `v-closable` package or onClickOutside of [VueUse](https://vueuse.org/core/onClickOutside/#onclickoutside)
| vue-currency-input|2.0.0 | 3.0.4 | [No](https://github.com/dm4t2/vue-currency-input/issues/166) | Yes| [package details](https://www.npmjs.com/package/vue-currency-input)
| vue-debounce|2.6.0 | 4.0.0 | [Yes](https://github.com/dhershman1/vue-debounce/discussions/47?sort=new) | Yes | [Package details](https://www.npmjs.com/package/vue-debounce)
| vue-frag|1.2.0 | 1.4.2 | ???? |????|
| vue-gauge|1.0.3 | 1.0.3 | ??? |???|
| vue-html-to-paper|1.4.3 | 1.4.4 | [No](https://stackoverflow.com/questions/66049945/vue-html-to-paper-with-vue3) | No|
| vue-i18n|8.17.7 | 9.2.2 | [No](https://github.com/kazupon/vue-i18n) | [Yes](https://github.com/intlify/vue-i18n-next)|
| vue-multiselect@2.1.6 | 2.1.7 | ??? |[Yes](https://www.npmjs.com/package/vue-multiselect)
| vue-pdf|4.3.0 | 4.3.0 | [No??](https://www.npmjs.com/package/vue-pdf) |No??| [Possible alternative](https://www.npmjs.com/package/vue-pdf-embed)|
| vue-property-decorator|9.1.2 | 9.1.2 | [No](https://github.com/kaorun343/vue-property-decorator) |No| [Possible alternative](https://facing-dev.github.io/vue-facing-decorator/#/)
| vue-tabs-component|1.5.0 | 1.5.0 | No - package is 5 yrs old and package is [abandoned](https://github.com/spatie/vue-tabs-component)| No | [Possible Alternative]()
| vue-toast-notification@0.6.1 | 3.1.1 | No | [Yes](https://github.com/ankurk91/vue-toast-notification)
| vue-uuid|2.0.2 | 3.0.0 | No | Yes
| vue2-google-maps|0.10.7 | 0.10.7 | No |No | [Possible Alternative](https://www.npmjs.com/package/vue3-google-map)
| vue2-slot-calendar|2.2.5 | 2.2.5 | No | No | [Possible Alternative](https://www.npmjs.com/package/vue-calendar-3)
| vuedraggable|2.24.3 | 2.24.3 | No | No | [Possible Alternative](https://www.npmjs.com/package/vue3-draggable)
| vuejs-datepicker|1.6.2 | 1.6.2 | No | No|[Possible Alternative](https://www.npmjs.com/package/vuejs3-datepicker)
| vuejs-paginate|1.9.5 | 2.1.0 - published 4 yrs ago | No | No | [Possible Alternative](https://www.npmjs.com/package/v-pagination-3)
| vuelidate|0.7.6 | 0.7.7 | [No](https://github.com/vuelidate/vuelidate/issues/757) | Yes |
| vuelidate-error-extractor|2.4.1 | 2.4.1 | No | No| [Possible Alternative]()
| vuetify@2.6.10 | 3.1.13 | [No](https://stackoverflow.com/questions/62871984/how-to-connect-vue-3-with-vuetify) | Yes |
| vuex|3.4.0 | 4.1.0 | No |Yes
| xlsx|0.17.0 | 0.18.5 | ??? |???|