Vue-upgrade-tool NPM

vue-upgrade-tool

A codemod built on vue-metamorph to upgrade Vue 2 projects to Vue 3.

It will upgrade JS/TS files, SFCs, and unit tests.

!IMPORTANT Results are not guaranteed to be perfect! You should manually verify every single change this tool made. There are probably edge cases I missed here. Please open a GitHub Issue if you spot something it did wrong, or if it should have transformed/reported on something and didn't!
!NOTE vue-metamorph does not print well-formatted code when making changes. Use a formatting tool such as eslint or prettier to fix formatting in accordance with your project's code style conventions

Usage

Since the list of manual migrations can be large depending on your project, it's recommended to pipe the output into a file.

npx vue-upgrade-tool --files 'src/**/*' > vue_upgrade_output

To run only some transformations, lookup their IDs in the table below or find them using npx vue-upgrade-tool --list-plugins, then pass them via the --plugins flag using a micromatch pattern. To use multiple micromatch patterns, pass --plugins multiple times:

npx vue-upgrade-tool --files 'src/**/*' --plugins 'vue-*' --plugins 'test-utils-*' > vue_upgrade_output

Vue

Plugin	Plugin Name	Migration Type	Migration Guide
`data` option must return a function	`vue-data-function`	automatic	Link
component options wrapped with `defineComponent()`	`vue-defineComponent`	automatic	Link
`Vue.delete()` / `this.$delete()` rewritten to `delete` expression	`vue-delete`	automatic	Link
remove `.native` modifier from v-on directives	`vue-v-on-native`	automatic	Link
remove functional component markers	`vue-functional-component`	automatic	Link
render function h()	`vue-contextual-h`	automatic	Link
`hook:` events renamed to `vue:`	`vue-hook-events`	automatic	Link
`$nextTick()`	`vue-nextTick`	automatic	Link
`$scopedSlots` removed	`vue-scoped-slots`	automatic	Link
`Vue.set()` removed	`vue-set` / `vue-set-manual`	automatic	Link
`v-bind:foo.sync` becomes v-model:foo	`vue-v-bind-sync`	automatic	Link
`$listeners` removed	`vue-remove-$listeners` / `vue-remove-$listeners-manual`	automatic / manual	Link
`destroyed` and `beforeDestroy` lifecycle hooks renamed	`vue-lifecycle-hooks`	automatic	Link
v-model updates	`vue-v-model`	automatic	Link
`transition-group` no longer renders a root element	`vue-transition-group-root-element`	automatic	Link
`transition` props were renamed	`vue-transition-props`	automatic	Link
`is` attribute can only be used on a `<component>` tag	`vue-is-attribute`	manual	Link
`$children` removed	`vue-$children`	manual	Link
`v-if` / `v-for` precedence changed	`vue-if-for-precedence`	manual	Link
vue filters removed	`vue-filters`	manual	Link
global application instance / app instantiation	`vue-globals`	manual	Link

Vue Router

Plugin	Plugin Name	Migration Type	Migration Guide
vue-router instantiation changed (WIP)	`vue-router-instantiation`	automatic	Link
`currentRoute.something` becomes `currentRoute.value.something`	not yet implemented	automatic	Link
`onReady` replaced with `isReady`	`vue-router-onReady`	automatic	Link
`router.getMatchedComponents()` removed	`vue-router-getMatchedComponents'`	automatic	Link
passing slot content to `router-view`	`vue-router-view-slot-content`	automatic	Link
`RouteConfig`, `Location`, `Route` types renamed	not yet implemented	automatic	Link
`router.app` removed	`vue-router-router.app`	manual	Link
catch-all routes syntax changed	`vue-router-catch-all`	manual	Link
`append` prop in `router-link` removed	`vue-router-link-props`	manual	Link
`event` and `tag` props in `router-link` removed	`vue-router-link-props`	manual	Link
`exact` prop in `router-link` removed	`vue-router-link-props`	manual	Link
`router.match()` removed	`vue-router-match`	manual	Link

Vuex

Plugin	Plugin Name	Migration Type	Migration Guide
Store instantiation changed	`vuex-instantiation`	automatic	Link

Vue Test Utils

Plugin	Plugin Name	Migration Type	Migration Guide
`propsData` mount option renamed to `props`	`test-utils-propsData`	automatic	Link
new `global` mount option	`test-utils-global-mount-options`	automatic	Link
`wrapper.destroy()` renamed to `wrapper.unmount()`	`test-utils-wrapper-destroy`	automatic	Link
`scopedSlots` option merged with `slots`	`test-utils-scoped-slots-mount-option`	automatic	Link
`createLocalVue` removed	`test-utils-createLocalVue`	manual	Link
Wrapper APIs removed	`test-utils-removed-wrapper-apis`	manual	Link