Automating Vue2‑to‑Vue3 Migration with GoGoCode: A Practical Guide

Vue 3 has been released for a while, but many developers still maintain massive Vue 2 projects and find full‑stack upgrades daunting. The official migration guide lists many breaking changes, many of which require repetitive manual edits such as wrapping async components or renaming custom directive lifecycles.

To alleviate this pain, the author introduces GoGoCode , an AST‑based code‑mod tool that can batch‑apply the migration rules. After a brief recap of the migration guide, the article shows how GoGoCode was previously described in another post and how it now supports Vue‑specific transformations.

Installation

npm install gogocode-cli -g

Run the CLI in the project directory to transform all Vue files:

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

The transformed Vue 3 code is written to src-out . Using the official vue-hackernews-2.0 demo, the author demonstrates that after conversion only minor adjustments to the build process are needed, and shows a diff of the changes.

The article lists the conversion rules that have been implemented (about 30 rules), covering most break‑change scenarios such as async components, custom directives, data/options, emits, event API, filters, fragments, functional components, global API, v‑model, v‑if/v‑for priority, v‑bind merging, watch on arrays, vuex, vue‑router, etc. A table summarises each rule, whether it is supported, and links to detailed documentation.

Finally, the author invites the community to give feedback via the GitHub issue tracker, provides links to the repository, documentation site, and mentions that the tool also now parses .vue files to access template and script AST nodes.

References include the official Vue migration guide, the GoGoCode GitHub repo, the original article about the tool, and various related resources.