vue-codemod is a Vue 2 to Vue 3 migration tool, which can directly upgrade most of the Vue 2 syntax to Vue 3 syntax. With vue-codemod transformation and a small amount of manual modification, users can complete the smooth migration from Vue 2 to Vue 3.
⚠️ Attention: Since thevue-codemodfrom Vue.js team has not been maintained for some time, the following repo is forked from Vue.js team. We are continuing to develop new features in the fork repo.
Repository URL: https://github.com/originjs/vue-codemod
Manually Upgraded: Number of patterns require manually upgrade
Auto Upgraded: Number of patterns upgraded by
vue-codemod
| No. | Project | Manually Upgraded | Auto Upgraded | Transformation Rates |
|---|---|---|---|---|
| 1 | vue2-element-touzi-admin | 8 | 63 | 88.73% |
| 2 | vue-web-os | 19 | 19 | 50.00% |
| 3 | amKnow | 10 | 30 | 75.00% |
| 4 | vue-template | 61 | 28 | 31.46% |
| 5 | coreui-free-vue-admin-template | 4 | 63 | 94.03% |
| 6 | vue-weixin | 1 | 54 | 98.19% |
| 7 | vue-WeChat | 9 | 35 | 79.55% |
| 8 | vue2-management-platform | 2 | 11 | 84.62% |
| 9 | vue-netease-music | 18 | 37 | 67.27% |
| 10 | Mall-Vue | 2 | 26 | 92.86% |
| 11 | vue-demo-kugou | 4 | 13 | 76.47% |
| 12 | codemod-demo | 0 | 24 | 100% |
npm/yarninstall is recommended. Users can also try beta version from GitHub
npm install @originjs/vue-codemod -g
//or
yarn global add @originjs/vue-codemod- Clone from
dev
git clone https://github.com/originjs/vue-codemod- Install Dependencies
cd vue-codemod
npm install
//or
yarn install- Install
vue-codemodGlobally
npm run build
npm install . -g
//or
yarn run build
yarn global add .vue-codemod consists of different migration rules. Those rules are defined in transformation/index.ts and vue-transformation/index.ts.
npx vue-codemod <path> -t/-a [transformation params][...additional options]<path>indicates the path of execution, which can be files and folders-ameans executing all rules.-tmeans executing one specific rule (Conflicts with-a). When-tis used, parameter is required.
npx vue-codemod src -asrc indicates the path of execution. -a means executing all rules.
npx vue-codemod src -t new-global-apisrc indicates the path of execution. -t new-global-api means only executing the rule of new-global-api .
Here is the detailed rule list.
npx vue-codemod src -a -f logThe -f option is used to specify the output format. The optional parameters are table, detail,log. If no parameters are specified, the default is table.
table: output the executed rules as a table
detail: list transformed files for each rule
log: output a report in the form of log file
Here is a sample output of -f table:
╔═══════════════════════════════╤═══════╗
║ Rule Names │ Count ║
╟───────────────────────────────┼───────╢
║ new-component-api │ 1 ║
║ new-global-api │ 1 ║
║ vue-router-v4 │ 1 ║
║ vuex-v4 │ 1 ║
║ new-directive-api │ 1 ║
║ remove-vue-set-and-delete │ 2 ║
║ rename-lifecycle │ 2 ║
║ add-emit-declarations │ 1 ║
║ tree-shaking │ 1 ║
║ slot-attribute │ 1 ║
║ slot-default │ 1 ║
║ slot-scope-attribute │ 1 ║
║ v-for-template-key │ 2 ║
║ v-else-if-key │ 3 ║
║ transition-group-root │ 1 ║
║ v-for-v-if-precedence-changed │ 1 ║
║ remove-listeners │ 1 ║
║ remove-v-on-native │ 1 ║
╚═══════════════════════════════╧═══════╝During the operation of vue-codemod, the patterns that need to be manually upgraded will be identified and printed to the console as an object (will create a log file if -f log is declared). For more details, please refer to Manual Migration Guide.
Here is the example:
The list that you need to migrate your codes mannually:
index: 1
{
path: 'src/main.js',
position: '[33,0]',
name: 'remove Vue(global api)',
suggest: "The rule of thumb is any APIs that globally mutate Vue's behavior are now moved to the app instance.",
website: 'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
}
npx vue-codemod --helpOutput:
npx vue-codemod --help
Usage: vue-codemod [file pattern]
Options:
-t, --transformation Name or path of the transformation module [string]
-p, --params Custom params to the transformation
-a, --runAllTransformation run all transformation module [boolean]
-f, --reportFormatter Specify an output report formatter
[string] [default: "detail"]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]
Examples:
npx vue-codemod ./src -a Run all rules to convert all
relevant files in the ./src folder
npx vue-codemod Run slot-attribute rule to convert
./src/components/HelloWorld.vue -t HelloWorld.vue
slot-attribute