You've decided to migrate from Vue 2 to Vue 3. Now you need a budget. But every agency you ask gives a different number. Some say $20,000. Others say $150,000. What's the real answer?
The truth is: Vue 3 migration cost depends on your specific codebase. A simple app and a complex enterprise system have vastly different needs. This guide gives you the framework to estimate your project accurately—whether you're doing it in-house (see our DIY migration roadmap) or hiring specialists.
The Quick Answer: Migration Cost Ranges
If you just want ballpark numbers, here they are. But keep reading—these ranges are meaningless without understanding what drives them.
Vue 2 to Vue 3 Migration Cost by Project Size
| Project Size | Lines of Code | Timeline | Cost Range |
|---|---|---|---|
| Small | < 10,000 LOC | 2-4 weeks | $8,000 - $25,000 |
| Medium | 10,000 - 50,000 LOC | 1-3 months | $25,000 - $60,000 |
| Large | 50,000 - 150,000 LOC | 3-6 months | $60,000 - $120,000 |
| Enterprise | > 150,000 LOC | 6-12 months | $120,000 - $250,000+ |
Based on fixed-price specialist quotes. Hourly agency rates typically run 30-50% higher.
Why the Wide Ranges?
A 50,000 LOC app using vanilla Vue 2 costs far less to migrate than a 50,000 LOC app using Vuetify 2, complex Vuex modules, and a custom webpack configuration. The factors below explain why.
The 7 Factors That Determine Migration Cost
These are the variables that move your estimate up or down. When getting quotes, make sure vendors address each one.
Codebase Size and Complexity
Lines of code is a rough proxy, but component count is more accurate. A migration touches every Vue component, every Vuex module, every router configuration.
Estimation Formula:
Base cost = (Number of components × $100-300) + (Vuex modules × $500-1,500)
< 50 components
Low complexity
50-200 components
Medium complexity
> 200 components
High complexity
UI Component Library (The Vuetify Factor)
This is the single biggest cost multiplier. Vuetify 2 to Vuetify 3 migration can double your total cost. The APIs are completely different, and every component needs manual refactoring.
| UI Library | Cost Multiplier |
|---|---|
| No UI library (custom CSS) | 1.0x |
| Tailwind CSS / Headless UI | 1.0x |
| Element UI → Element Plus | 1.3x |
| BootstrapVue (discontinued) | 1.5x |
| Vuetify 2 → Vuetify 3 | 1.8-2.2x |
See our Vuetify Migration Playbook for why this is so expensive.
State Management (Vuex)
Migrating from Vuex to Pinia adds cost, but it's worth it. Pinia is simpler and the official recommendation. The complexity depends on your Vuex structure.
Simple
1-3 modules, no nesting
$1,500 - $3,000
Moderate
4-10 modules, some plugins
$3,000 - $8,000
Complex
10+ modules, nested, custom plugins
$8,000 - $15,000
See our Vuex to Pinia Migration Guide for the technical details.
Third-Party Dependencies
Every npm package in your package.json needs to be checked for Vue 3 compatibility. Some have drop-in replacements. Others require finding alternatives or writing custom solutions.
Build Tool Migration
Moving from Vue CLI (Webpack) to Vite is highly recommended but adds scope. Custom Webpack configurations are particularly expensive to migrate.
Standard Vue CLI → Vite
$1,000 - $3,000
Custom Webpack → Vite
$3,000 - $8,000
Test Suite Migration
If you have tests (you should), they need to migrate too. Vue Test Utils has breaking changes, and moving from Jest to Vitest is recommended for Vite projects.
TypeScript Adoption
If you're adding TypeScript as part of the migration (many teams do), that's additional scope. Vue 3 has excellent TypeScript support, making it a good time to adopt.
Stay JavaScript
+$0
Partial TypeScript
+15-25%
Full TypeScript
+25-40%
Hidden Costs Most Estimates Miss
These are the costs that blow up projects. Make sure any quote you receive accounts for them.
1. The "Unknown Unknowns"
Undocumented code, legacy workarounds, and tribal knowledge that only surfaces mid-migration. Add 15-25% contingency to any estimate.
2. Feature Development Pause
While migrating, your team isn't shipping new features. The opportunity cost of a 3-month migration can be significant. Factor in the cost of delayed roadmap items.
3. QA and Regression Testing
Automated tests aren't enough. Someone needs to manually test critical flows. Budget $5,000-$15,000 for QA depending on app complexity.
4. Team Training
Your developers need to learn Vue 3's Composition API, Pinia, and Vite. Budget 1-2 days per developer for ramp-up.
5. Post-Migration Bug Fixes
No migration is perfect. Plan for 2-4 weeks of post-launch fixes. Budget $3,000-$10,000 for stabilization.
Fixed-Price vs. Hourly Billing: What to Expect
How you pay matters as much as how much you pay. The billing model affects your risk exposure.
Hourly / Time & Materials
- × You bear all the risk of scope creep
- × Final cost unknown until project ends
- × Vendor incentivized to take longer
- × Hard to get budget approval
Typical rates: $150-$250/hour
Common outcome: 30-50% over initial estimate
Fixed-Price
- ✓ Vendor bears the risk of scope creep
- ✓ Budget certainty from day one
- ✓ Vendor incentivized to be efficient
- ✓ Easier budget approval
Requires: Detailed audit/discovery first
Common outcome: On budget or below
Our Recommendation
Always get a fixed-price quote based on a thorough codebase audit. If a vendor can't give you a fixed price, they either haven't done proper discovery or they're leaving themselves room to overcharge. A $500-$1,500 upfront audit that leads to a fixed-price quote is far cheaper than hourly billing that spirals.
Sample Estimates: Real-World Scenarios
Here's what migrations actually cost for different types of applications:
Scenario A: Simple Internal Dashboard
$12,000 - $18,000Characteristics:
- • 8,000 lines of code
- • 35 components
- • Tailwind CSS (no UI library)
- • Simple Vuex store (2 modules)
- • No tests
- • Standard Vue CLI setup
Cost Breakdown:
- • Core migration: $8,000
- • Vuex → Pinia: $1,500
- • Vue CLI → Vite: $1,500
- • QA & testing: $1,000
Timeline: 2-3 weeks
Scenario B: Customer-Facing SaaS App
$45,000 - $65,000Characteristics:
- • 40,000 lines of code
- • 150 components
- • Element UI → Element Plus
- • Moderate Vuex store (6 modules)
- • 200 unit tests
- • Custom Webpack config
Cost Breakdown:
- • Core migration: $25,000
- • UI library migration: $8,000
- • Vuex → Pinia: $5,000
- • Webpack → Vite: $5,000
- • Test migration: $6,000
- • QA & stabilization: $6,000
Timeline: 6-8 weeks
Scenario C: Enterprise Vuetify Application
$110,000 - $160,000Characteristics:
- • 120,000 lines of code
- • 400+ components
- • Vuetify 2 (heavy usage)
- • Complex Vuex store (15 modules, plugins)
- • 500 unit tests + E2E
- • TypeScript adoption included
Cost Breakdown:
- • Core migration: $40,000
- • Vuetify 2 → 3: $45,000
- • Vuex → Pinia: $12,000
- • Build tool migration: $6,000
- • Test migration: $18,000
- • TypeScript adoption: $15,000
- • QA & stabilization: $14,000
Timeline: 4-5 months
Is the Migration Worth It? The ROI Calculation
Migration cost is only half the equation. You need to compare it against the cost of not migrating.
3-Year Cost Comparison: Migration vs. Staying on Vue 2
Staying on Vue 2
- Extended support (3 years): $120,000
- Developer turnover (2 devs): $150,000
- Hiring premium: $60,000
- Slower development: $100,000
- Total: $430,000
Still on Vue 2 after 3 years. Migration still needed.
Migrating to Vue 3
- Migration cost (one-time): $70,000
- Extended support: $0
- Improved retention: +$75,000 saved
- Faster development: +$50,000 saved
- Net Cost: -$55,000
Modern stack. Better talent. Faster development.
See our detailed breakdown in "The True Cost of Never-Ending Vue 2 Support".
How to Get an Accurate Quote
The most accurate way to estimate migration cost is through a codebase audit. Here's what a good audit includes:
Dependency Analysis
Every npm package checked for Vue 3 compatibility
Deprecated Pattern Report
All Vue 2 patterns that need refactoring identified
Component-by-Component Assessment
Effort estimate for each area of the codebase
Risk Assessment
Potential blockers and mitigation strategies
Fixed-Price Quote
Guaranteed price with defined scope and timeline
Get Your Personalized Migration Estimate
Stop guessing at costs. Our $500 Migration Readiness Audit gives you exact numbers: a comprehensive codebase analysis, risk assessment, and fixed-price quote you can take to your stakeholders.
✓ Fixed-price guarantee ✓ Detailed cost breakdown ✓ 7-day turnaround
Conclusion
Vue 2 to Vue 3 migration cost varies dramatically based on your codebase. A simple app might cost $15,000. A complex Vuetify enterprise application could cost $150,000+. The key is understanding the factors that drive cost and getting a proper assessment before committing.
Don't accept vague estimates or hourly quotes that leave you exposed to cost overruns. A fixed-price quote based on a thorough audit protects your budget and gives you certainty.
Whatever the cost, remember: migration is a one-time investment. The alternative—paying for extended support indefinitely while your technical debt grows—is far more expensive in the long run.