VVersions.dev

Fix Vue 3 migration errors

Most Vue 3 migration errors trace to a handful of breaking changes: createApp/global API, removed filters and event bus, $children, or v-model changes. The @vue/compat migration build turns these into per-feature warnings you can clear one at a time.

WorkflowDifficulty: moderatemedium risk

Last verified · Updated May 22, 2026

A Vue 3 migration error almost always traces to one breaking change: the createApp/global API switch, removed filters or the event bus, `$children`, or v-model changes on components. Run the app under @vue/compat to convert these into per-feature deprecation warnings, then fix each at its source rather than suppressing the warning.

Symptoms

  • 'Vue is not a constructor' or the app failing to mount.
  • Filters no longer render (`{{ value | format }}` shows nothing or errors).
  • Global event bus events never fire after the events API was removed.
  • @vue/compat prints deprecation warnings for features your code still uses.
  • v-model on a custom component stops updating.

Likely causes

  • Entry point still calls `new Vue` instead of `createApp`.
  • Global registrations on the Vue object instead of the app instance.
  • Template filters, which were removed in Vue 3.
  • $on/$off/$once event bus usage, removed with the events API.
  • Reads of `$children`, which was removed.
  • v-model default prop/event renamed on components.

Diagnostic commands

shell
# Run under @vue/compat to surface per-feature deprecation warnings$ npm run dev# Confirm a single Vue 3 version and that plugins resolve to Vue 3 releases$ npm ls vue$ npm ls vue-router

Common error patterns

SymptomBreaking changeFix
'Vue is not a constructor'createApp replaces new VueSwitch the entry point to createApp(App)
Filter output missingFilters removedConvert the filter to a method or computed property
Event bus events not firingEvents API ($on/$off/$once) removedUse mitt, or props/emit between components
$children is undefined$children removedUse template refs or provide/inject
v-model not updating a componentv-model prop/event renamedUse modelValue / update:modelValue (or a named model)
Treat @vue/compat warnings as your checklist

The migration build emits a deprecation warning for each Vue 2-era feature your code still relies on. Resolve them category by category and only remove @vue/compat once the console is clean — that is your definition of done.

Test failure debuggingAI debugging prompt
My Vue 3 migration is failing. Here is the error or the @vue/compat deprecation warnings and the relevant component/entry-point code: <paste>. For each distinct error or warning, identify the breaking change behind it (createApp/global API, removed filters, the event bus, $children, or v-model changes) and propose the smallest correct fix. Prefer fixing the feature at its source over suppressing the compat warning, and tell me which warnings remain.

Safety: Do not suppress @vue/compat warnings to force a green build or downgrade to Vue 2 to avoid the fix. Each fix must resolve the underlying breaking change.

Safe fix workflow

  1. Run the app under @vue/compat so every breaking change shows as a named warning.
  2. Group warnings by feature (createApp, filters, event bus, $children, v-model) and fix one group at a time.
  3. Switch the entry point to createApp and move global registrations onto the app instance first.
  4. Replace filters with methods/computed, the event bus with mitt or props/emit, and $children with refs/provide-inject.
  5. Re-run the app after each group and confirm the warning count drops.
  6. Remove @vue/compat once no deprecation warnings remain.

Escalation checklist

  • A third-party plugin emits warnings you cannot fix without a Vue 3 release
  • A warning persists after the obvious feature fix is applied
  • v-model behavior differs only for a specific custom component
  • Routing or store errors appear only after the Vue Router / Pinia upgrade

Official sources

  • Official docsVue.js Guidevuejs.orgreliability 98%

    Backs the breaking-change and migration-step claims.

  • Migration guideVue 3 Migration Guidevuejs.orgreliability 98%

    Backs the breaking-change and migration-step claims.

Frequently asked questions

Should I just suppress the @vue/compat warnings to ship faster?

No. The warnings are your migration checklist — each one marks a Vue 2-era feature that will break once @vue/compat is removed. Suppressing them hides work that resurfaces the moment you drop the compat build. Fix each at its source and remove @vue/compat only when the console is clean.