{"id":12434,"library":"vue-codemod","title":"Vue Codemod Scripts","description":"vue-codemod is an experimental utility providing a collection of codemod scripts to assist developers in updating Vue.js APIs, primarily for migrating applications from Vue 2 to Vue 3. It leverages Facebook's JSCodeshift for abstract syntax tree (AST) transformations and offers specific support for `.vue` single-file components. As of version `0.0.5`, it includes transformations like `remove-vue-set-and-delete` and outlines a roadmap for further features, including TypeScript support and broader module system compatibility. Maintained by the Vue.js team, its \"experimental\" status and low version number indicate a development cadence focused on feature completion rather than rapid, frequent releases, positioning it as a tool for early adopters or those undertaking significant migrations. Its key differentiators include official Vue team backing and direct support for `.vue` file transformations, which are critical for comprehensive Vue application upgrades.","status":"active","version":"0.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-codemod","tags":["javascript"],"install":[{"cmd":"npm install vue-codemod","lang":"bash","label":"npm"},{"cmd":"yarn add vue-codemod","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-codemod","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core engine for applying AST transformations to code. It is a peer dependency.","package":"jscodeshift","optional":false}],"imports":[{"note":"Primarily a CLI tool, but exposes a programmatic API. Ensure your project is configured for ESM if importing directly into modern Node.js environments.","wrong":"const { runTransformation } = require('vue-codemod')","symbol":"runTransformation","correct":"import { runTransformation } from 'vue-codemod'"},{"note":"The most common usage pattern is via the command line using `npx` or a globally installed package. No direct import is required for CLI execution.","symbol":"CLI Usage (npx)","correct":"npx vue-codemod <path> -t <transformation> --params [transformation params]"},{"note":"To apply a specific built-in codemod, use the `-t` flag with its name. Replace `./src` with your target files or directory.","symbol":"Specific Codemod (e.g., remove-vue-set-and-delete)","correct":"npx vue-codemod ./src -t remove-vue-set-and-delete"}],"quickstart":{"code":"import { runTransformation } from 'vue-codemod';\nimport path from 'path';\nimport fs from 'fs';\nimport os from 'os';\n\n// Create a temporary directory and file for the quickstart to operate on\nconst tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'vue-codemod-quickstart-'));\nconst filePath = path.join(tempDir, 'main.js');\nconst originalCode = 'import Vue from \"vue\";\\nnew Vue().mount(\"#app\");\\nconsole.log(\"Hello Vue\");';\nfs.writeFileSync(filePath, originalCode, 'utf8');\n\nconst fileInfo = {\n  path: filePath,\n  source: fs.readFileSync(filePath, 'utf8')\n};\n\n// This dummy transformation replaces 'Vue' with 'App' for demonstration.\n// In a real scenario, the 'transformation' argument for 'runTransformation'\n// would typically be a loaded module from 'vue-codemod/dist/transformations/<name>'.\n// The 'api' object passed to the transformation function contains 'jscodeshift'.\nconst dummyTransformation = (file: { path: string; source: string }, api: { jscodeshift: any }) => {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n  return root.find(j.Identifier, { name: 'Vue' })\n    .replaceWith(j.identifier('App'))\n    .toSource();\n};\n\nasync function applyCodemod() {\n  console.log(`Created temporary file at: ${filePath}`);\n  console.log(`Applying codemod to ${filePath}...`);\n  try {\n    const transformedCode = await runTransformation(\n      fileInfo,\n      dummyTransformation, // Pass the transformation function\n      {} // Optional parameters for the transformation\n    );\n    console.log('Transformation complete.');\n    console.log('Original code (first 50 chars):\\n' + fileInfo.source.substring(0, 50) + '...');\n    console.log('Transformed code (first 50 chars):\\n' + transformedCode.substring(0, 50) + '...');\n    // In a real application, you'd write `transformedCode` back to the file\n    // fs.writeFileSync(filePath, transformedCode, 'utf8');\n  } catch (error) {\n    console.error('Error during transformation:', error);\n  } finally {\n    // Clean up the temporary directory and file\n    fs.rmSync(tempDir, { recursive: true, force: true });\n    console.log(`Cleaned up temporary directory: ${tempDir}`);\n  }\n}\n\napplyCodemod();","lang":"typescript","description":"Demonstrates the programmatic usage of `vue-codemod` by applying a simple, custom transformation to a temporary file. This illustrates how to interface with `runTransformation` directly, though CLI usage is more common."},"warnings":[{"fix":"Upgrade your Node.js installation to version 10 or newer. Tools like `nvm` (Node Version Manager) can facilitate this.","message":"Node.js versions below 10 are no longer supported since `v0.0.5`. Ensure your development environment uses Node.js 10 or higher.","severity":"breaking","affected_versions":">=0.0.5"},{"fix":"Always use a version control system and conduct thorough testing of your application after applying codemods. Review the generated code carefully before deploying to production environments.","message":"The package is currently in an experimental state (version 0.0.5). While officially maintained, developers should anticipate potential edge cases, subtle differences in migration, or incomplete transformations.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Adhere to the complete migration path outlined in the official Vue 3 migration guide, which includes leveraging ESLint, manual review, and the compatibility build alongside codemods.","message":"The codemods are designed as part of a comprehensive Vue 3 migration strategy. Some issues may require manual fixes or reliance on ESLint rules (e.g., `eslint-plugin-vue@7`) rather than automated codemods.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify the transformation name against the list of included transformations in the `vue-codemod` documentation, or ensure the path to your custom transformation is accurate and accessible.","cause":"The specified transformation name does not exist among the built-in codemods, or the path to a custom transformation module is incorrect.","error":"Error: transformation <name> not found."},{"fix":"Double-check the provided `<path>` for typos, incorrect relative/absolute paths, or ensure that the target files/directory are accessible from where the command is executed.","cause":"The file or directory path provided to the `vue-codemod` CLI does not correspond to an existing location on the filesystem.","error":"Error: Path <path> does not exist."},{"fix":"For ES modules, ensure your `package.json` includes `\"type\": \"module\"` or use `.mjs` file extensions. For CommonJS, use `require()` statements and `.cjs` file extensions if explicitly needed, or configure your bundler/runtime accordingly.","cause":"You are attempting to use an ES module syntax (`import`) in a CommonJS (`require`) environment, or vice-versa, when using the programmatic API or developing custom transformation scripts.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}