Automate Vue2 to Vue3 Migration with GoGoCode: A Step‑by‑Step Guide

Vue 3 has been released for a while, but many developers still maintain large Vue 2 codebases and find framework upgrades daunting. The official Vue migration guide lists many break‑change items, some of which are simple (e.g., wrapping async components) while others require more effort (e.g., custom directive lifecycle changes).

To automate these repetitive changes, the authors use GoGoCode , an AST‑based code transformation tool they previously introduced. By extracting the migration guide items and Vue‑router/Vuex API changes, they wrote about 30 conversion rules that cover most Vue 2‑to‑Vue 3 break‑change scenarios, enabling one‑click conversion of Vue 2 code to Vue 3.

Try It Out

Install the CLI globally: npm install gogocode-cli -g Navigate to the project directory and run the conversion command:

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out

After execution, the transformed Vue 3 code is written to the src-out folder. Using the official Vue 2 demo project vue-hackernews-2.0, the authors verified that a small adjustment to the build process makes the converted project runnable. Screenshots of the diff are shown below.

For a complete solution, refer to the official documentation.

Implementation Is Simpler Than Expected

GoGoCode now supports parsing .vue files, allowing easy access to the template and script AST nodes. Simple rules, such as the async component conversion, can be expressed as straightforward string replacements because the transformation operates on the AST, making code formatting irrelevant.

script.replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))')
  .replace(`
    () => ({
      component: import($_$1),
      $$$
    })`, `
    Vue.defineAsyncComponent({
      loader: () => import($_$1),
      $$$
    })`);

The tool also handles more complex cases like custom directive lifecycle changes with ease.

Open‑Source and Looking for Feedback

The project is open‑source on GitHub. The authors invite the community to report issues, contribute improvements, and help refine the tool.

GitHub issues: https://github.com/thx/gogocode/issues

Repository: https://github.com/thx/gogocode

Website: https://gogocode.io

Appendix: Covered Conversion Rules

Ref arrays in v‑for

Async components

Attribute forced behavior

$attrs includes class & style

Custom directives

Data option

Emits option

Event API

Filters

Fragments

Functional components

Global API and treeshaking

Key attribute

v‑model

v‑if vs v‑for priority

v‑bind merging behavior

Watch on arrays

Vuex

Vue‑router

and many other Vue 2‑to‑Vue 3 break‑change scenarios