Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Migration tool Vue 2.0 application for Vue 3.0
https://github.com/tthheusalmeida/vue-migration-tool

highcharts migration vite vue vue2 vue3 vuemigration vuemigrationtool vuerouter vuex

Last synced: about 1 month ago
JSON representation

Migration tool Vue 2.0 application for Vue 3.0

Awesome Lists containing this project

README

        


Vue Migration Tool



Better than doing it manually 😁




License: MIT


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.

## 📂 Table of Contents

- [⚙️ How to use](#how-to-use)
- [🔨 Breaking changes](#breaking-changes)
- [😃 How to contribute](#how-to-contribute)
- [📝 License](#license)

## ⚙️ How to use

To use [Vue Migration Tool](https://github.com/tthheusalmeida/vue-migration-tool), your code must follow the standards in this [Vue Guide](https://v2.vuejs.org/v2/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

#### For main branch:
```
cross-env REPOSITORY= npm start
```
Example: `cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git npm start`

#### For a specific branch:
```
cross-env REPOSITORY= BRANCH= npm start
```
Example: `cross-env REPOSITORY=https://github.com/tthheusalmeida/pokedex.git BRANCH=migrate npm start`

#### For main branch and log info:
```
cross-env REPOSITORY= 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= 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! 😎

## 🔨 Breaking Changes

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](https://github.com/tthheusalmeida/vue-migration-tool/tree/main/src/operations/transformer/vue/README.md)
- [Vuex](https://github.com/tthheusalmeida/vue-migration-tool/tree/main/src/operations/transformer/vuex/README.md)
- [Vue-Router](https://github.com/tthheusalmeida/vue-migration-tool/tree/main/src/operations/transformer/router/README.md)
- [Vite](https://github.com/tthheusalmeida/vue-migration-tool/tree/main/src/operations/transformer/vite/README.md)
- [Highcharts](https://github.com/tthheusalmeida/vue-migration-tool/tree/main/src/operations/transformer/highcharts/README.md)

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

## 😃 How to contribute
- 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.
5. 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`

## 📝 License

This project is under the MIT license. see the [license page](https://opensource.org/licenses/MIT) for more details.

Made by Matheus Almeida