vueleap

vueleap

Website and live demo · Sample report · Português

vueleap reads a Vue 2 project and tells you what breaks on Vue 3, file by file and line by line. It rewrites the changes that are pure renames, links every other finding to the official migration guide, and prints the @vue/compat flags the rest of the code still needs.

npx vueleap

Nothing to install or configure, and nothing leaves your machine. You can also paste a component on the website and see the Vue 3 version right away.

Usage

npx vueleap                    # report for the current folder
npx vueleap ./app --html report.html
npx vueleap --fix              # preview the safe fixes as a diff
npx vueleap --fix --write      # apply them
npx vueleap --compat           # print only the @vue/compat config
npx vueleap --fail-on error    # exit with code 1 in CI

Run npx vueleap --help for every option, or --list-rules for the 41 checks. They cover templates, scripts, styles and package.json, including filters, $listeners, the event bus API, $set, the global API, lifecycle and directive hook renames, v-model and .sync, keyCode modifiers, functional components, transition classes, render functions and Vue 2 only libraries.

Safe fixes

--fix only rewrites changes that keep the same meaning on Vue 3, and it edits the exact characters it reported, so your formatting stays.

Nothing is written without --write, files outside the project are never touched, and a file that changed after the analysis stops the write.

Compat flags

The migration build runs Vue 2 style code on Vue 3, one flag per feature. npx vueleap --compat prints the smallest config for your code: Vue 3 behavior by default (MODE: 3) plus only the flags you still need. Remove flags as findings go away, then remove @vue/compat.

In CI

- run: npx vueleap --fail-on error --html vueleap-report.html

--json prints the full report (summary, effort score, compat flags and every finding) for other tools.

From code

The package is ESM with TypeScript types.

import { analyze, fix, fixSource } from 'vueleap'

const result = await analyze('./my-app')
console.log(result.summary.error, result.compat.runtime)

const { files } = await fix('./my-app') // a dry run unless { write: true }

// One file in memory, also in the browser:
const { code, remaining } = fixSource(vue2Component, { filename: 'Price.vue' })

Other exports: analyzeSource, planFixes, applyEdits, formatPretty, formatJson, formatHtml, compatSnippet and RULES.

Guides

• Migration guide
• Rules reference
• Compat flags
• v-model on components

More from kwy404

Monsoon, Voodoo.js, breakhound, graphemely, numberparrot, edgegoat, cookieowl, installkite, a11ymedic, fontsketch and kastor.

Contributing

Issues and pull requests are welcome. CONTRIBUTING.md explains how to add a rule.

npm install
npm run build && npm run typecheck && npm run lint && npm test

License

MIT. Made by Alexandre Kohler (GitHub, LinkedIn). The website is built with Monsoon and its interactive parts with Voodoo.js.