Better than doing it manually 😁

We know that migrations take time, so VMT(Vue Migration Tool) was created to help solve solve this problem.
Migrating a Vue 2.x project to Vue 3.x.

• ⚙️ How to use
• 🔨 Breaking changes
• 😃 How to contribute
• 📝 License

To use Vue Migration Tool, your code must follow the standards in this Vue Guide.

⚠️ If your code has a different implementation than the guide, there may be inconsistencies after migration.

Here we go!

Clone the project:

git clone https://github.com/tthheusalmeida/vue-migration-tool.git

Install the dependencies:

npm install

For run the project we have some environment variables:

REPOSITORY: HTTPS link from project. (required)
BRANCH: Branch name, if there is no name, main is used. (optional)

Then run one of these commands

cross-env REPOSITORY=<repository-link> npm start

Example: cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git npm start

cross-env REPOSITORY=<repository-link> BRANCH=<branch-name> npm start

Example: cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git BRANCH=migrate npm start

cross-env REPOSITORY=<repository-link> npm run start:log

Example: cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git npm run start:log

also works with BRANCH:

cross-env REPOSITORY=<repository-link> BRANCH=migrate npm run start:log

Example: cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git BRANCH=migrate npm run start:log

At the end of the execution the code will be available in the migrated folder.

Enjoy! 😎

Each dependency has its own list with checkboxes. When a checkbox is ✔️, it means the change has been implemented.

Here is a list of breaking changes from each dependency that were implemented in the project:

• Vue
• Vuex
• Vue-Router
• Vite
• Highcharts

Over time, the project may receive more migrations of other plugins, libraries, etc., which can cause breaking changes.

• First, leave ⭐ if you liked it!
• Fork this repository.
• Create a branch for your feature: git checkout -b my-feature
• If you are adding a new dependency breaking change:
  1. Create a folder with the dependency's name in src/operation/tranformer.
  2. Inside this folder, create a folder for scripts and/or templates.
  3. Create a constant containing all functions from this dependency as {dependency}_TEMPLATE_TRANSFORM_LIST or {dependency}_SCRIPT_TRANSFORM_LIST.
  4. In src/operation/tranformer/index.js, import your constant to templateRules or scriptRules.
  5. Create a README.md file to list breaking changes, whether they have been migrated or not.
  6. Follow the steps below..
• If you are updating an existing dependency breaking change:
  1. Add a breaking change message in src/utils/message.js.
  2. Create a function in src/operation/tranformer/{dependency}/template/index.js or src/operation/tranformer/{dependency}/script/index.js.
  3. Include showLog with a new breaking change message in the created function.
  4. Add the created function to {dependency}_TEMPLATE_TRANSFORM_LIST or {dependency}_SCRIPT_TRANSFORM_LIST.
• Commit: git commit -m 'feat: my new feature'
• Push your branch: git push origin my-feature

This project is under the MIT license. see the license page for more details.

Made by Matheus Almeida