Stacks

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

Updated 9 min read

To locate where a behavior is implemented in Vue with Atlas, attack the problem from three angles at once. Locating a behavior is a retrieval problem, and Atlas ships codebase_search for meaning, grep for exact text, and the lsp tool for the symbol graph, because the three are complementary rather than redundant. Describe the behavior in plain language to codebase_search and the semantic index returns candidate declarations even when your words never appear in any .vue file. Confirm with grep, which takes a real regex plus include and path filters and runs through ripgrep, so you can search only src/components and src/composables. Then use the lsp tool's findReferences operation to see every callsite and workspaceSymbol to jump straight to the declaration by name.

How do I find which .vue component implements a behavior I can only describe?

Describe the behavior to Atlas's codebase_search tool. The semantic index returns candidate declarations even when your words do not appear in the source, so asking how the cart badge count updates surfaces 2 files, the Vue composable src/composables/useCart.ts and the component src/components/CartBadge.vue.

The hardest search in a Vue codebase is the one where you know what the app does and not what the code is called. A designer says the drawer closes when you click outside, and nothing in src/ is named drawer or outside. Atlas's codebase_search queries a semantic index built by indexing code by AST declarations using tree-sitter, not blind line windows, so the unit returned is a real declaration: a Composition API composable, a defineComponent block, a script setup function. Atlas searches code with hybrid semantic and keyword retrieval fused by reciprocal rank fusion, which means the exact-match signal and the meaning signal are combined rather than one being thrown away. In a Vue project the payoff is finding the composable that owns the state, not just the single-file component that renders it.

How does grep confirm a Vue search hit that codebase_search proposed?

Atlas confirms the codebase_search candidate with grep, which takes a real regex plus include and path filters and runs through ripgrep. In a Vue project that means grepping 2 directories, src/components and src/composables, for a template ref name or an emit event string, and skipping node_modules and the dist output entirely.

Semantic search proposes and exact search disposes. Once codebase_search points at src/composables/useCart.ts, grep proves the connection by finding every literal occurrence of the event name, the prop name, or the Pinia store action. Vue gives you unusually good exact-match handles for this: emitted event names are string literals, template refs are string literals, Pinia action names are string literals, and route names in your Vue Router config are string literals. Grep with an include filter of *.vue finds them in templates, and a filter of *.ts finds them in composables and stores. Atlas's grep tool runs through ripgrep, so a whole src/ tree of single-file components is searched in a fraction of a second.

What happens if Atlas reads the wrong Vue file path?

Atlas opens the best candidate with read, and a wrong guess fails loudly with File not found plus a Did you mean list, so bad paths do not go unnoticed. In a Vue project with 2 similarly named single-file components, guessing src/components/CartBadge.vue when the file is really src/components/cart/CartBadge.vue is a common mistake Atlas catches.

Silent failures are worse than loud ones. A tool that returns an empty result for a nonexistent Vue path lets the model conclude the component does not exist, and the whole search goes sideways from there. Atlas's read tool fails with File not found plus a Did you mean list of near-matching paths, which turns a wrong guess into a corrected one in a single step. Vue projects invite this failure because of nested component directories and index re-exports: src/components/cart/CartBadge.vue, src/components/CartBadge.vue, and a barrel file re-exporting one of them can all coexist. The Did you mean list disambiguates immediately, and Atlas reads the correct .vue file rather than reasoning about a file that is not there.

How do I find every callsite of a Vue composable with the lsp tool?

Use the lsp tool's findReferences operation to see every callsite of a Vue composable, and workspaceSymbol to jump to the declaration by name. A composable like useCart imported into 14 components across src/views and src/components has 14 references, and findReferences returns all of them rather than the 3 you happened to remember.

The symbol graph is the third angle, and it answers a question neither semantic search nor grep answers well: who actually calls this. Atlas's lsp tool findReferences operation asks the language server, so the answer covers TypeScript imports across your Vue project including aliased imports and re-exports through barrel files. workspaceSymbol goes the other direction: you know the name of a composable or a store action and want to jump to its declaration without knowing which directory it lives in. Together with read, the three angles reconstruct the full path from the behavior you described to the exact file and line responsible. Atlas then summarizes the call path back to you with concrete file and line references, which is the actual deliverable.

Is it safe to let Atlas search my Vue codebase?

Locating a behavior in Vue uses only 4 tools, codebase_search, grep, read, and the lsp tool, none of which writes to disk. Every Atlas tool call is checked against 3 rule types, allow, ask, and deny, before it runs, and Atlas drafts a plan in a read-only plan agent before switching to a build agent.

A search workflow is read-only by nature, and Atlas's permission model makes that guarantee explicit rather than implicit. Nothing in codebase_search, grep, read, or the lsp tool mutates a .vue file, and if the session later moves on to editing, Atlas computes a unified diff for every file edit and surfaces it for approval before writing. Atlas can build its code index with local Ollama embeddings, keeping code off third-party servers, which matters when the Vue application you are searching is a client's private product. Once you have found the behavior and want to change it, the rest of the toolchain is right there: pnpm for installs, Vitest with Vue Test Utils for the test that pins the behavior, and prettier for the formatting.

Step by step

  1. 01Describe the behavior to codebase_search in plain language; the semantic index returns candidate declarations from your .vue files and composables even when your words do not appear in the source.
  2. 02Confirm with grep, which takes a real regex plus include and path filters and runs through ripgrep, targeting src/components and src/composables and skipping node_modules.
  3. 03Search for the exact-match handles Vue gives you: emitted event names, template refs, Pinia action names, and Vue Router route names are all string literals.
  4. 04Open the best candidate with read; a wrong guess fails loudly with File not found plus a Did you mean list, which disambiguates nested single-file component paths.
  5. 05Use the lsp tool's findReferences operation to see every callsite of the composable or store action, including imports aliased through barrel files.
  6. 06Use the lsp tool's workspaceSymbol operation to jump to a declaration by name when you know the composable's name but not its directory.
  7. 07Summarize the call path back to the user with concrete file and line references, then pin the behavior with a Vitest with Vue Test Utils test before you change it.

Frequently asked questions

how to find which vue component implements a feature
Describe the behavior to Atlas's codebase_search. The semantic index returns candidate declarations even when your words do not appear in the source, so a plain-language question surfaces the composable in src/composables and the single-file component in src/components that own the behavior.
how do i search a vue codebase when i do not know what the code is called
Use codebase_search rather than grep. Atlas searches code with hybrid semantic and keyword retrieval fused by reciprocal rank fusion, so it finds the code by meaning. Then confirm with grep, which takes a real regex plus include and path filters and runs through ripgrep.
what does file not found did you mean mean in atlas
Atlas's read tool fails loudly when a path does not exist, and offers a Did you mean list of near-matching paths. In a Vue project with nested component directories, guessing src/components/CartBadge.vue when the file is src/components/cart/CartBadge.vue is caught immediately instead of silently returning nothing.
how do i find every component that uses a vue composable
Use the lsp tool's findReferences operation on the composable. The language server returns every callsite across your Vue project, including imports aliased through barrel files, so a useCart imported into 14 components returns 14 references rather than the 3 you remembered.
can atlas search vue single file components and typescript together
Yes. Atlas indexes code by AST declarations using tree-sitter, so script setup blocks, defineComponent calls, and TypeScript composables are all indexed as declarations. grep's include filters let you target *.vue for template matches and *.ts for store and composable matches.
will atlas modify my vue code while searching
No. Locating a behavior uses only codebase_search, grep, read, and the lsp tool, none of which writes to disk. Every Atlas tool call is permission-gated against allow, ask, and deny rules before it runs, and Atlas drafts a plan in a read-only plan agent first.
can i index a private vue codebase locally without sending it to a vendor
Atlas can build its code index with local Ollama embeddings, keeping code off third-party servers. Run atlas in a Vue project with a package.json and Atlas reads your .vue components, stores, and router locally.
what should i do after finding the vue code responsible for a behavior
Pin the behavior with a test before changing it. Run Vitest with Vue Test Utils against the component or composable you found, so the current behavior is captured. Then make the change, review the unified diff Atlas surfaces, and run prettier on the files you touched.

Try Atlas in your terminal

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

Install Atlas

Related guides

Locate Where a Behavior Is Implemented with Atlas in 2026

How to locate where a behavior is implemented with Atlas in 2026: codebase_search for meaning, grep for exact text, and the lsp tool for the symbol graph.

Trace a runtime bug from a stack trace in Vue with Atlas in 2026

Pinpoint Vue runtime bugs from production stack traces using Atlas in 2026. Leverage Atlas's AI to navigate your Vue.js codebase, identify root causes, and apply fixes without a debugger, ensuring rapid resolution.

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.

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.

Audit a Vue.js Repository with Parallel Subagents in Atlas, 2026

In 2026, Vue developers use Atlas to sweep entire repositories for problems without blowing the context window. Leverage parallel subagents for efficient, read-only audits of Vue.js projects.

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.

Diagnose a Hanging or Long-Running Command in Vue with Atlas in 2026

For Vue developers in 2026, Atlas helps diagnose hanging or long-running `pnpm` scripts or `Vitest` tests. Quickly identify if a command is slow or blocked on input, and get it unstuck.

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

Browse this resource hub