Vue 2 End of Life: A Guide to Calculating Your Migration to Vue 3

If you are reading this article in 2024 or later, Vue 2 is already End of Life. Vue 2 support ended on December 31st, 2023 and it is critical to take action immediately.

As of the time this article is being written, Vue 2 end of life is quickly approaching. If you’re still on Vue 2, you’re likely going through the exercise now of determining how difficult the migration will be and how much time you should plan for.

HeroDevs has you covered. We’ve worked on many migration projects, helping teams move from Vue 2 to Vue 3. The following is the best quick-and-dirty way we’ve found to estimate the time required for a proper conversion. This equation is for migrating the averagely complex application, and may be higher or lower depending on how simple or complicated your app may be.

To calculate the time to migrate:

1. Find the number of lines of Vue 2 code in your application (LOC)
2. Find the average number of new lines your developers write per week (LPW)
3. Multiply LOC by 0.75. Take that result and divide by LPW. This is your time to migrate (TTM)
4. Multiply your TTM by 1.3. This is your estimate.

Estimate = ( ( LOC * 0.75 ) / LPW ) * 1.3

This equation is a basic framework. Below we’ll break down the equation to explain why we’ve chosen this method for estimation, and also spell out a few nuances that might increase or decrease this estimate.

Breaking Down the Estimate

Migration from Vue 2 to Vue 3 is less about code translation and more about finding the new dependencies for your migrated code. We account for this delta of unknown unknowns in our calculation by strategically multiplying our LOC and TTM.

Why multiply LOC by 0.75?

Migrating code is not a line-to-line relationship. A component with 100 lines of code in Vue 2 is unlikely to equate to 100 lines of code in Vue 3. Based on our experience, around 25% of an application’s code is likely to remain unchanged. The other 75% is what you need to account for.

Why multiply TTM by 1.3?

This adds 30% to your estimate as a buffer that holds the space your team could need to get familiar with any new tools (such as adjusting CI/CD to use Vite), new dependencies, and any new patterns that emerge from Vue 3.

How can you make your Vue 2 migration estimate more accurate?

Our estimation calculator above will help get you started, but adding your estimated effort will add the details you need to fine tune it.

Here are some key steps to consider when estimating how long it could take for you to migrate away from Vue 2:

1. Get familiar with the breaking changes in the official Vue migration guide. Do you use the Vue CLI? The Vue CLI is in maintenance mode and hasn’t released a new version since July 2022. The Vue community overall agrees it’s best for new apps to be built with Vite. There is no official EOL for the CLI, but less frequent version releases can often suggest that end of life for an open source library is on the horizon.
2. Identify third party dependencies. Vuetify and VueBootstrap are popular UI Component libraries to keep an eye on. Are these and any other third party libraries you use still compatible with Vue 3? What additional effort could it take to make them compatible? Equally important: Are any of those libraries also nearing End of Life?
3. Get a general awareness of the size and complexity of the existing features that must migrate to Vue 3. Knowing your application's total lines of code isn’t enough to get an accurate estimate. How big or small are your components? What kind of branching logic do you need to consider? What code informs your business logic? What kind of documentation and/or domain experts are available for reference?
4. Get a general awareness of the size and complexity of the new features you want to write in Vue 3. How do the new features interact with the features in Vue 2 that you are migrating? What architecture, compatibility or other factors do you need to consider as the migration is underway? How does this influence the complexity of your migration?
5. Don’t forget end-to-end testing. Applications by nature are implemented in iterations, which can mean testing page by page or workflow by workflow, rather than holistically. A healthy check of regression test plans and knowing what bugs are already known can help prevent spinning your wheels during end-to-end testing later.

What could my estimate look like?

Estimate = ( ( LOC * 0.75 ) / LPW ) * 1.3

If you have an application that is 100,000 Lines of Code (LOC), and your team of 10 engineers completes around 5000 LOC per week (LPW), your equation could look something like this:

( ( 100,000 * 0.75 ) / 5,000 ) * 1.3 = TTM

( 75,000 / 5000 ) * 1.3 = TTM

15 * 1.3 = 19.5 Weeks

Add on the time it could take to estimate the general size and complexity of your existing app, plus the time it could take for end-to-end testing, and your estimate could be a reasonable place to start.

What if I can’t migrate my Vue 2 application before it reaches End of Life?

If you are like the majority of the organizations we work with here at HeroDevs, we should talk about what you can do if you won’t be able to migrate in time.

End of Life for Vue 2 doesn’t have to mean the final chapter for your application.

Evan You, creator of Vue, has partnered with HeroDevs to offer never-ending support for Vue 2 that lasts beyond its end of life, which buys you time to decide or act on your longer-term strategy–or even stay on Vue 2 forever.

HeroDevs also offers expert migration development and architectural planning services that can help you get going in the right direction.

The only bad option is to do nothing at all.