Skip to content

Automatically upgrade Vue 2 projects to Vue 3

License

Notifications You must be signed in to change notification settings

UnrefinedBrain/vue-upgrade-tool

Repository files navigation

vue-upgrade-tool

NPM License NPM Version GitHub Actions Workflow Status

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