The 7 Blockers That Kill Vue 2 to Vue 3 Migrations

Why This Is So Painful

Vuetify 2 and Vuetify 3 have completely different APIs. Component names, prop names, slot names, event names—everything changed. Teams using Vuetify heavily (100+ components) face a near-complete rewrite of their UI layer.

The Solution

Create a component-by-component migration map before starting. Migrate in isolation—don't try to run @vue/compat with Vuetify. Budget 40-60% of your migration time just for Vuetify.

Why This Happens

The average Vue 2 project has 5-8 Vue-specific npm packages that don't support Vue 3. Some are abandoned, some never got updated, some have Vue 3 versions with completely different APIs. Each one needs to be addressed before migration can complete.

The Solution

Run a dependency audit before estimating timeline. For each Vue-specific package, determine: Does it have a Vue 3 version? Is there an alternative? Can we remove it entirely? Can we build it ourselves?

Why This Is Problematic

Mixins were Vue 2's answer to code reuse. The problem? They create implicit dependencies, naming conflicts, and untraceable data flow. Codebases with 20+ mixins, some chained 3-4 levels deep, become nearly impossible to migrate safely.

// Where does `formatDate` come from?
// Where does `userData` come from?
// What if two mixins both define `loading`?

export default {
  mixins: [FormMixin, ValidationMixin, UserMixin, AnalyticsMixin],
  computed: {
    displayDate() {
      return this.formatDate(this.userData.created)  // 🤷
    }
  }
}

The Solution

Convert mixins to composables before or during migration. Composables have explicit imports—you can see exactly where each piece of functionality comes from.

// Composable: explicit, traceable, typed
import { useForm } from '@/composables/useForm'
import { useUser } from '@/composables/useUser'
import { formatDate } from '@/utils/dates'

const { userData } = useUser()
const { validate, errors } = useForm()

When Vuex Gets Complicated

Simple Vuex stores migrate easily. But stores with 15+ modules, nested namespacing, custom plugins, and middleware are a different story. Custom Vuex plugins for features like undo/redo or persistence can take weeks to reimplement in Pinia.

The Solution

Migrate one module at a time. Pinia and Vuex can coexist during migration. Start with leaf modules (no dependencies), work toward root modules.

The Build Tool Dilemma

Teams that ejected from Vue CLI or added heavy customizations face a choice: migrate the entire Webpack config to Vite, or update it for Vue 3. Neither is fun. Configs with 500+ lines of custom Webpack rules take significant time to untangle.

The Solution

Document every customization before starting. For each one, determine: Is it still needed? Is there a Vite equivalent? Can we simplify? Consider this an opportunity to clean up years of accumulated build complexity.

The Testing Reality

Many Vue 2 codebases have less than 20% test coverage, and some have zero tests. Without tests, you're flying blind during migration—every change could break something, and you won't know until a user reports it.

The Solution

Why Part-Time Fails

Most teams attempt migration while simultaneously shipping features. "We'll work on the migration when we have time." The problem: there's never time. Context switching destroys momentum. Migrations drag on for months, sometimes over a year.

The Solution

Treat migration as a project, not a side task. Either dedicate developers full-time for a shorter period, or hire specialists to handle it while your team focuses on features.

Conclusion

Every Vue 2 migration has challenges. But the difference between a migration that takes 8 weeks and one that drags on for 8 months usually comes down to whether these 7 blockers were identified early.

Vuetify integration. Abandoned packages. Mixin spaghetti. Complex Vuex. Webpack customization. No tests. Part-time teams. If you're planning a migration, audit your codebase for these issues before you estimate timeline and cost.

The blockers won't go away if you ignore them. But if you know they're coming, you can plan for them—and that makes all the difference.