How to migrate a large app to Vue 3

0:09 Introduction
1:23 Why migrate now (or at all)?
3:57 Scale
4:52 Technologies
5:56 @vue/compat
7:38 Phase 1: Prepare
13:50 Phase 2: Upgrade
30:39 Phase 3: Deploy
32:45 Thanks!
33:45 Q+A

[ahmedjaouadi]

I upgraded three vue2 projects, One of them had around 1800 components. also the upgrade included migrating to vite + using script setup + defineProps with Typescript.
After these intense experiences, I have to say there is no shortcut to do it, how I prefer doing it:
1- Start by droping webpack & configure vite build & hmr. Save this progress in a separate branch & create a new branch from this one to do the component upgrade in it.
2- Update vue packages, delete the components folder and start pulling the components file by file & upgrade them. (Better to start with your style-guide components like inputs/selects.. because they don't depend on other components and build your way up till you finish your first page then you can test it. If you are using vue router, just comment out all the routes and uncomment once your page is ready.
3- keep doing this until you finish all the pages. On your way to the last page, you will find yourself not just refactoring to vue3 but you are also extracting re-used functionalities into separate files, (autocomplete.ts, dragFile.ts..) and end up writing less code.
4- Update your testing tool config and make sure all your unit tests are green. Migrating to Vitest can be tackeled alone afterwards.

From Dev experience point of view, I think this way is the best as you easily track your progress, apply best practices and you can split the work in the team (each individual can select a set of components and start working with it and then they communicate what they did to the rest of the team in the end of each day).

It took one month (1800 components 8h/day 5d/week) and a half to get everything runing & start bug hunting. So its kinda of time-consuming + it will block new features.

[JP-hbmv]

The change is so big that I am considering a rewrite in React. The frontend churn is too much

[probarsukov]

Also for us the i18n story was quite painful and of course Vuetify is a big mess. I do not know what is really worth it sometimes from my experience, just rewrite everything to React or migrate to Vue 3 ;)

[luismauricio]

Imagine if the website I deployed 10 years ago stopped working because browsers dropped support for certain features. Fortunately, this isn't the case for any websites regardless of when they were deployed. It's disappointing that Vue isn't written in such away that's always backwards compatible. No one wants that extra work to migrate to a newer version 🙄

[vusisindane]

This video convinced me to migrate to React altogether... :(

[ColinRichardson]

Seems this didn't matter. This had zero information about vue-property-decorator and was actually a small app.

We should have documented our change. 2100 Vue components, with 230, 000 lines of code changed.

[ColinRichardson]

A little late for this I am afraid.. Guess what we just finished doing? and I mean "just".. We been rewriting for 3 months. We are in the "Linting is getting OUT OF MEMORY" phase of the migration. So we can run the app in dev, but not been able to build yet. Sad times..

[Sivaprabu]

Where did they officially announce that vue2 support stopped?

[civrev]

There should never be breaking changes. All of these painful framework upgrades just bolsters the value of running vanilla.js which never necessitates special workflows, a network of dependencies, or breaking changes.

[_the_one_]

With all due to respect, but I don't think this is the right way. In this way you will endup having the latest version of Vue 3 but not using Vue 3 as it should!

You will endup using Vuex which is not the recommended library. Pinia it is.

You will endup with Options API syntax. If you read through the docs you will see that Options API is discouraged. Script setup is the new way.

You will endup using Webpack and miss the DX of Vite but also the whole community behind it like Vitest, Auto-import-components, VueUse, Cypress Component Testing etc. Those can be added with Webpack but in my experience with Webpack all these are buggy whereas with Vite it just works.

In general, you will end up with using Vue 3 but still everything looking Vue 2-ish. Since Vite and Vue 3 the way we write apps has changed for the better (Pinia, Tailwind, Vite, Vitest, Historie, Cypress etc) and if you still use the old technologies then guess what. You will stay behind and then you will have to re-write everything in order to catch up. So it will be like 2 or 3 times migration.

Sorry for saying that but to me it doesn't sound like the right way of doing things. Personally I would prefer a re-write of the application. If might sound scary but it's actually not and companies should accept and understand innovation and go all-in to re-write. Vue 3 and script setup came because Evan You is always pro-innovation.