--- 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** ![](https://i.imgur.com/XY3H4BZ.png) ![](https://i.imgur.com/Bly4SuS.png) --- **No results \o/** ![](https://i.imgur.com/QP5cayH.png) --- **I found no usage of `v-if` and `v-for` in the same element in 588 uses of `v-for`** ![](https://i.imgur.com/5FshG8L.png) --- **Not sure how to search for this 🤷‍♂️** ![](https://i.imgur.com/FLlJqW5.png) --- **No results \o/** ![](https://i.imgur.com/rhRPRdX.png) --- 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.** ![](https://i.imgur.com/C5Ib4T2.png) ## **Replaced Functionality Issues** **App.vue will need to be refactored** ![](https://i.imgur.com/Vx8rQrv.png) --- **No results \o/** ![](https://i.imgur.com/FBosbWs.png) --- **No results \o/** ![](https://i.imgur.com/K2HvNAz.png) --- **This could be a significant issue, more research needed** ![](https://i.imgur.com/BgHqE9R.png) ![](https://i.imgur.com/qEsNERx.png) ![](https://i.imgur.com/3qagOif.png) ## **Renaming Issues** ![](https://i.imgur.com/7nqZ7Su.png) ![](https://i.imgur.com/b8hJDrd.png) ![](https://i.imgur.com/uxoOuwi.png) --- **No results \o/** ![](https://i.imgur.com/Ikwjm37.png) --- **No results \o/** ![](https://i.imgur.com/y6InyqA.png) --- **More research needed** ![](https://i.imgur.com/BcOJovo.png) ![](https://i.imgur.com/jDyL4H9.png) ## **Removed Functionality Issues** **Already using key names (not using keycodes)** ![](https://i.imgur.com/kFfy4G2.png) --- **No results \o/** ![](https://i.imgur.com/OHLtFyz.png) --- **No results \o/** ![](https://i.imgur.com/agNbBPG.png) --- ![](https://i.imgur.com/gMj9Bd3.png) ![](https://i.imgur.com/9RmKdyP.png) ![](https://i.imgur.com/vMOPtj2.png) ![](https://i.imgur.com/0oopYm7.png) --- **No results \o/** ![](https://i.imgur.com/76JcKgc.png) ## **General issues** * There a a lot of misplaced `:key`'s defined in nested elements instead of the element with the `v-for=` ![](https://i.imgur.com/9nMjJoV.png) #### **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 | ??? |???|