vue-declassify-to-setup

Vue 2 vue-property-decorator to Vue 2/3 setup-api converter :rocket:

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.

Converter

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

Requirements

• 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

Usage

Convert a directory:

vue-convert -p "./src/components/"

Convert a file:

vue-convert -p "./filename.vue"

Features

This script is capable of converting a range of Vue and vue-property-decorator features, including:

• Const
• Objects
• Arrays
• Methods
• Computed / Get
• $refs
• @Watch
• @Emit
• @Vmodel
• @Prop
• @PropSync
• Interfaces
• Imports
• $vuetify, $slot, $set, $delete, $forceUpdate, $router, $route, $nextTick
• And more...

Run help for more options:

vue-convert --help
  
      --help         Show help                                       
      --version      Show version number                               
  -p, --path         The path to the file or directory to convert
                                                            
  -d, --destination  Specify the path to the destination directory.
                     Defaults to the current path.                       
  -v, --vue          Set the Vue target version. By default, it is set to
                     2. Use 3 to convert to Vue 3. The difference is
                     related to v-model.
  -g, --grouping     Activate the grouping of declarations for refs/
                     reactive.                                     
  -n, --no-comment   Disable the inclusion of informative comments within
                     the JavaScript code for importing the modelWrapper.
  -r, --required     Set all the properties as required  

More example:

vue-convert --path . --destination "./exportfolder" --vue 3 -g -n

Disclaimer

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.

Known issues

• If you write comments just before the tag, the system won't understand. It needs to see an end-bracket (}) right before the tag, not a comment.

• The -g --grouping feature doesn't work well with arrays or objects that are written directly in the code and end with a semicolon on the same line. The system expects to see the semicolon at the end of the entire array or object, not at the end of a line.

Contributing

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.

Happy coding! :smile: