Automating Vue2 to Vue3 Migration with GoGoCode

Vue 3 has been available for a while, and many developers are eager to adopt its Composition API, but most still maintain extensive Vue 2 projects; upgrading such projects is often as daunting as renovating an old house.

The Vue team offers a detailed migration guide, but many of the required changes are manual, such as wrapping async components with an extra layer.

Other changes, like renaming custom directive lifecycle hooks and subtle parameter adjustments, are more cumbersome.

To automate these repetitive tasks, the authors introduce GoGoCode , an AST‑based code‑modification tool that simplifies writing conversion logic.

Building on a previous article about GoGoCode, they have crafted roughly 30 conversion rules that cover most break‑change scenarios when moving from Vue 2 to Vue 3, including updates to vue‑router and vuex APIs. The tool can convert an entire Vue 2 codebase to Vue 3 with a single command.

Try it out:

npm install gogocode-cli -g

Navigate to the project directory and run:

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

After the conversion finishes, the new Vue 3 code is written to the src-out folder.

The authors tested the tool on the official Vue 2 demo project vue‑hackernews‑2.0 . With only minor adjustments to the build process, the transformed project runs successfully; a diff screenshot is provided in the original article.

GoGoCode now supports parsing .vue files, allowing easy access to both the template and script AST nodes for further processing.

Simple rules, such as converting async components, can be expressed as straightforward string replacements on the AST, without worrying about code formatting:

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

More complex scenarios, like custom directive lifecycle changes, are also handled effortlessly by the tool.

The project is open‑source on GitHub ( github.com/thx/gogocode ) and welcomes feedback and contributions.

Supported conversion rules (summary):

Rule

Supported

Documentation

Ref array in v‑for

✔

Link

Async component

✔

Link

Attribute forced behavior

✔

Link

$attrs includes class & style

✔

Link

$children

✖️

Link

Custom directive

✔

Link

Custom element interaction

Not needed

Link

Data option

✔

Link

Emits option

✔

Link

Event API

✔

Link

Filters

✔

Link

Fragments

✔

Link

Functional component

✔

Link

Global API

✔

Link

Global API treeshaking

✔

Link

Inline template attribute

✖️

Link

key attribute

✔

Link

Key modifier

✔

Link

Remove $listeners

✔

Link

Mounting API changes

✔

Link

propsData

In development

Link

Access this in prop default function

Not needed

Link

Render function API

✔

Link

Unified slots

✔

Link

Suspense

Not needed

Link

Transition class name changes

✔

Link

Transition as root

In development

Link

Transition‑Group root element

✔

Link

Remove v‑on.native modifier

✔

Link

v‑model

✔

Link

v‑if vs v‑for priority

✔

Link

v‑bind merge behavior

✔

Link

VNode lifecycle events

In development

Link

Watch on arrays

✔

Link

vuex

✔

Link

vue‑router

✔

Link

For full documentation, see the linked migration guide and the GoGoCode specification page.

References include the official Vue migration guide, the GoGoCode repository, the demo project vue‑hackernews‑2.0 , and various issue and documentation links.