Vue 2 vue-property-decorator to Vue 2/3 setup-api converter
This Node.js-based tool is designed to automate the transformation of your Vue 2 scripts written with vue-property-decorator into Vue 3's Composition API format, also available for vue 2.7.
This script helps developers transition from Vue 2 to Vue 3 by transforming their scripts written with the vue-property-decorator into the Composition API format, using <script setup lang="ts">
- Node.js installed on your machine. If not, you can download it from Node.js Official Website.
- Terminal window.
How To Use
Following these simple steps to convert your Vue 2 scripts:
npm install -g vue-declassify-to-setup vue-convert --help
Convert a directory:
vue-convert -p "./src/components/"
Convert a file:
vue-convert -p "./filename.vue"
This script is capable of converting a range of Vue and vue-property-decorator features, including:
- Computed / Get
- $vuetify, $slot, $set, $delete, $forceUpdate, $router, $route, $nextTick
- And more...
Run help for more options:
vue-convert --path . --destination "./exportfolder" --vue 3 -n
Please note that this script is designed to work with a tab size of 2. If your editor uses a different tab size, adjust it accordingly before running the converter.
This version only supports double-quoted strings. Make sure the code is set up with double-quoted strings before running the converter.
"The provided script is to be used at your own risk. It was specifically designed and tested for a specific project in a particular environment, and may require manual adjustments when applied in different contexts. In this version, the "@Components" decorator is not converted as it's often unnecessary. Auto-linting is anticipated."
While this project focuses on achieving up to 95% conversion for a specific project, it might not address all decorator scenarios, making it potentially incomplete for certain requirements. Your understanding is appreciated.
If you write comments just before the </script> tag, the system won't understand. It needs to see an end-bracket (}) right before the </script> tag, not a comment.
The script does not like comments after ; on one line.
Your feedback and contributions are welcome! If you encounter any issues, have suggestions or improvements, feel free to share. I appreciate your support in making this tool more efficient and versatile.