How does Atlas handle renaming a ref variable in Vue Composition API?

Atlas uses the `lsp` tool to query the language server, which understands Vue's Composition API syntax. When renaming a `ref` variable like `count` in a ` ` block, Atlas accurately identifies all its usages, including in the ` ` section of the same `.vue` file and any imported modules, ensuring a complete and correct refactor.

Can Atlas rename a component name used in Vue templates and imports?

Yes, Atlas can rename component names. It leverages `lsp` to find all references to the component, whether it's declared in a `.vue` file, imported in another component's ` ` block, or used within a Vue template (e.g., ` `). The `grep` tool then catches any string-based references in comments or documentation.

What if Atlas finds an ambiguous match during a rename in a Vue project?

Atlas's `edit` tool is designed for safety. If it encounters multiple matches for the `oldString` within a single file and isn't explicitly instructed to `replaceAll`, it will throw an error like "Found multiple matches for oldString." This prevents unintended changes and requires you to either provide more context or confirm a `replaceAll` operation.

How does Atlas ensure my Vue code stays private during refactoring?

Atlas prioritizes privacy by building its code index using local Ollama embeddings. This means your Vue codebase, including sensitive `.vue` component logic and store data, never leaves your local machine or gets sent to third-party servers, maintaining full control over your intellectual property.

How do I verify a symbol rename in a large Vue 3 application?

After Atlas applies renames, you verify by running your project's tests using `pnpm test`, which executes `Vitest with Vue Test Utils`. Atlas uses the `bash` tool for this. A final `grep` for the old symbol name across the entire project confirms that all instances, including comments and documentation, have been successfully updated, ensuring no lingering references.

Does Atlas integrate with Vue's pnpm package manager?

Yes, Atlas direct integrates with `pnpm`, your preferred package manager for Vue projects. When performing verification steps, Atlas uses its `bash` tool to execute commands like `pnpm test` or `pnpm run build`, directly leveraging your project's existing scripts and dependencies.

Can Atlas help me rename a global constant defined in a Vue plugin?

Absolutely. If the global constant is declared in a way that the language server can resolve its references (e.g., exported from a file and imported into your plugin or components), Atlas's `lsp` tool will find its usages. For constants used as magic strings or in configuration files, `grep` will ensure those are also caught and updated.

Rename a symbol across the repo in Vue with Atlas in 2026

To rename a function, class, or constant across your Vue project in 2026, Atlas provides a robust, terminal-native solution that integrates directly with your existing pnpm, Vitest with Vue Test Utils, and prettier toolchain. Atlas ensures every reference, from Composition API setup scripts in .vue files to comments and documentation, is accurately updated, preventing the common pitfalls of naive find-and-replace operations.

How Atlas Locates All Symbol References in Vue 3 Projects

Atlas precisely identifies all references to a function, class, or constant within your Vue 3 project by leveraging the lsp tool's findReferences operation, which queries the language server for an authoritative list. This method, superior to simple text search, ensures that 100% of actual code usages across .vue components and Composition API scripts are correctly targeted, avoiding false positives.

When you initiate a rename, Atlas first employs the lsp tool to perform a findReferences operation. This is critical for Vue projects, especially with the Composition API and single-file components (.vue files), where symbols can be declared in `<script setup>` blocks, used in `<template>` sections, or imported from external modules like `src/stores/counter.js`. Unlike simple text search, lsp understands the semantic meaning of your code, powered by Atlas's AST declarations indexing using tree-sitter. This ensures that renaming a `ref` variable named `count` to `itemCount` in `src/components/Counter.vue` will only affect the actual variable and its usages, not a string literal 'count' or a variable with the same name in an unrelated scope. Atlas's ability to build its code index with local Ollama embeddings also means your Vue codebase remains private, never leaving your machine during this crucial analysis phase.

Catching Non-Code Occurrences: Strings, Comments, and Docs in Vue

Beyond code references, Atlas employs the grep tool to identify instances of the old symbol name in non-code contexts, such as comments, documentation, and configuration files within your Vue project. This critical step ensures a complete refactor, addressing the 20% of occurrences that language servers typically miss, like a function name mentioned in a README.md or a string literal in a console.log.

While lsp provides authoritative code references, a comprehensive rename in a Vue project requires addressing instances of the old symbol name that exist outside the type system. This is where Atlas's grep tool comes into play. After identifying all semantic references, Atlas runs grep for the old name to catch occurrences in comments (e.g., `// OldFunctionName is deprecated` in `src/utils/helpers.js`), string literals (e.g., `console.log('Calling OldFunctionName');` in `src/App.vue`), and documentation files like `README.md` or `docs/api.md`. This two-pronged approach ensures that your refactor is truly complete, preventing lingering references that could confuse future developers or lead to broken string-based lookups in your Vue application. Atlas's ability to fuse semantic and keyword retrieval via reciprocal rank fusion ensures no stone is left unturned.

Applying Renames Safely with Atlas in Vue Single-File Components

Once all references are identified, Atlas applies the mechanical renames using the edit tool's replaceAll operation, ensuring consistency across your Vue project. For safety, Atlas computes a unified diff for every file edit and presents it for your approval, allowing you to review changes in src/components/MyComponent.vue or src/stores/index.js before they are written, preventing unintended modifications 100% of the time.

With a complete list of references from lsp and grep, Atlas proceeds to apply the changes using the edit tool. For the bulk of the refactoring, edit uses its replaceAll operation, ensuring every identified instance of the old symbol name is updated to the new one. Atlas prioritizes safety throughout this process. Every tool call, including edit, is permission-gated against allow, ask, and deny rules, meaning Atlas will ask for your explicit permission before making any changes. Before writing to disk, Atlas computes a unified diff for every file edit, surfacing it for your approval. This allows you to meticulously review changes in files like `src/views/HomeView.vue` or `src/router/index.js`. Crucially, edit refuses ambiguous single replacements; if it finds multiple matches for 'oldString' in a file and isn't explicitly told to replaceAll, it throws an error rather than silently corrupting your code. Atlas also snapshots file changes as git patches, so edits can be easily diffed and rolled back if needed.

Verifying Vue Refactors: Testing and Final Checks with Vitest and Grep

After Atlas applies the renames, the final and most critical step is to verify the changes by compiling and running your Vue project's tests using pnpm test with Vitest with Vue Test Utils. This ensures the refactor hasn't introduced regressions, and a subsequent grep for the old name confirms zero remaining hits, providing 100% confidence in the completeness of the rename operation.

The mechanical rename is only complete once verified. Atlas uses its bash tool to execute your Vue project's standard build and test commands. First, you'd typically run a command like `pnpm run build` or `pnpm run dev` to ensure the project compiles without errors. Following this, the most important step is to run your test suite: `pnpm test`. This command executes `Vitest with Vue Test Utils`, the recommended test runner for Vue 3, ensuring that all components, stores, and utilities function correctly after the rename. If all tests pass, it's a strong indicator of a successful refactor. As a final safeguard, Atlas can perform one more `bash grep -r "oldFunctionName" .` across the entire repository. This final grep confirms that absolutely zero instances of the old symbol name remain, providing definitive proof of a clean and complete refactoring operation across your entire Vue codebase.

Step by step

01Initialize Atlas in your Vue project: Ensure Atlas is running within your Vue project's root directory, where `package.json` and your `src/` folder reside. Atlas will automatically read your `.vue` components, stores, and router files.
02Identify the symbol for renaming: Ask Atlas to `lsp findReferences` on the specific function, class, or constant you intend to rename. For example, if renaming `oldFunctionName` in `src/utils/api.js`, Atlas will use the language server to find all its usages across your Vue single-file components and Composition API scripts.
03Scan for non-code occurrences: Instruct Atlas to `grep` for the `oldFunctionName` string. This step catches instances in comments within `src/components/MyComponent.vue`, string literals in `src/App.vue`, or mentions in `README.md` that the language server would typically miss.
04Apply mechanical renames with approval: Direct Atlas to `edit replaceAll` the `oldFunctionName` with `newFunctionName`. Atlas will present a unified diff for each affected file, such as `src/views/Dashboard.vue` or `src/stores/auth.js`, for your explicit approval before writing any changes.
05Compile and run Vue tests: Use Atlas's `bash` tool to execute `pnpm test`. This runs your `Vitest with Vue Test Utils` suite, verifying that the refactor has not introduced any regressions in your Vue application's functionality.
06Final verification for zero hits: Perform a final `bash grep -r "oldFunctionName" .` to confirm that no instances of the old symbol name remain anywhere in your project, ensuring a complete and clean refactor.

Frequently asked questions

How does Atlas handle renaming a ref variable in Vue Composition API?: Atlas uses the `lsp` tool to query the language server, which understands Vue's Composition API syntax. When renaming a `ref` variable like `count` in a `<script setup>` block, Atlas accurately identifies all its usages, including in the `<template>` section of the same `.vue` file and any imported modules, ensuring a complete and correct refactor.
Can Atlas rename a component name used in Vue templates and imports?: Yes, Atlas can rename component names. It leverages `lsp` to find all references to the component, whether it's declared in a `.vue` file, imported in another component's `<script>` block, or used within a Vue template (e.g., `<MyOldComponent />`). The `grep` tool then catches any string-based references in comments or documentation.
What if Atlas finds an ambiguous match during a rename in a Vue project?: Atlas's `edit` tool is designed for safety. If it encounters multiple matches for the `oldString` within a single file and isn't explicitly instructed to `replaceAll`, it will throw an error like "Found multiple matches for oldString." This prevents unintended changes and requires you to either provide more context or confirm a `replaceAll` operation.
How does Atlas ensure my Vue code stays private during refactoring?: Atlas prioritizes privacy by building its code index using local Ollama embeddings. This means your Vue codebase, including sensitive `.vue` component logic and store data, never leaves your local machine or gets sent to third-party servers, maintaining full control over your intellectual property.
How do I verify a symbol rename in a large Vue 3 application?: After Atlas applies renames, you verify by running your project's tests using `pnpm test`, which executes `Vitest with Vue Test Utils`. Atlas uses the `bash` tool for this. A final `grep` for the old symbol name across the entire project confirms that all instances, including comments and documentation, have been successfully updated, ensuring no lingering references.
Does Atlas integrate with Vue's pnpm package manager?: Yes, Atlas direct integrates with `pnpm`, your preferred package manager for Vue projects. When performing verification steps, Atlas uses its `bash` tool to execute commands like `pnpm test` or `pnpm run build`, directly leveraging your project's existing scripts and dependencies.
Can Atlas help me rename a global constant defined in a Vue plugin?: Absolutely. If the global constant is declared in a way that the language server can resolve its references (e.g., exported from a file and imported into your plugin or components), Atlas's `lsp` tool will find its usages. For constants used as magic strings or in configuration files, `grep` will ensure those are also caught and updated.

Try Atlas in your terminal

The terminal-native AI coding agent. Free core, single binary.

Install Atlas

Related guides

Rename a Symbol Across the Repo with Atlas in 2026

How to rename a symbol across a repo with Atlas in 2026: findReferences gets the true reference set, grep catches strings and docs, and edit refuses ambiguous matches.

Extract a Shared Helper from Duplicated Code in Vue with Atlas in 2026

In 2026, Vue developers use Atlas to efficiently refactor duplicated logic into a single, tested helper. Find, extract, and replace code across .vue components and stores, ensuring maintainability with Vitest and pnpm.

Automate GitHub Issue and Pull Request Triage in Vue with Atlas in 2026

Streamline GitHub issue and pull request triage in your Vue.js projects using Atlas. Configure secure, automated responses for trusted users in 2026, integrating with pnpm, Vitest, and prettier.

Debug a single failing test in Vue with Atlas in 2026

Pinpoint and fix failing Vue.js tests using Atlas, the terminal-native AI agent. Leverage Vitest with Vue Test Utils, pnpm, and real Vue idioms for efficient debugging in 2026.

Locate Where a Behavior Is Implemented in a Vue App With Atlas (2026)

Find the .vue file behind a behavior with Atlas: codebase_search for meaning, grep for exact text, and the lsp tool for the symbol graph across your Vue project.

Run the Vitest Test Suite and Triage Failures in Vue with Atlas in 2026

In 2026, Vue developers use Atlas to efficiently triage Vitest test failures. Turn a wall of red output into a prioritized list of distinct root causes, leveraging pnpm and Vue Test Utils.

Migrate a deprecated API across every callsite in Vue with Atlas in 2026

Effortlessly migrate deprecated APIs across all Vue single-file components and Composition API calls in 2026. Atlas, the terminal-native AI agent, ensures no callsite is missed, integrating with pnpm, Vitest with Vue

Run Atlas Headless in CI for Vue Projects in 2026

Automate Vue development workflows in CI with Atlas. Learn how to run Atlas headless, integrate with pnpm and Vitest, and get machine-readable output for your Vue.js projects.

Browse this resource hub