Atlas onboards you to an unfamiliar Vue codebase by starting from meaning, not filenames. codebase_search queries the semantic index for the concepts you care about, glob maps the directory shape of `src/components/`, `src/stores/`, and `src/router/`, and read pulls only the single-file components that actually matter. Heavy fan-out goes to the explore subagent, which is permissioned read-only so it cannot change a `.vue` file while it looks around. You end with a mental model of the app's Composition API layers, not a week of scrolling through every SFC.
How do I understand a Vue codebase I have never seen before?
Start with a plain-language question to Atlas's codebase_search, not with a file tree of 300 single-file components. Ask how requests are authenticated, and the semantic index returns ranked snippets with real file paths, which in a Vue project usually means a composable under src/composables/ or a Pinia store under src/stores/.
Onboarding to a Vue app fails when you start by opening files. There are 300 single-file components under `src/components/` and nothing tells you which 4 matter. Atlas starts from meaning instead. codebase_search takes a plain-language question and queries the semantic index, returning ranked snippets with file paths, so a question about how a route guard decides who is allowed in returns the actual guard in `src/router/index.ts` rather than a directory listing. Atlas searches code with hybrid semantic and keyword retrieval fused by reciprocal rank fusion, so the exact token `defineStore` still matches while the semantic side answers the conceptual question. Because Atlas indexes code by AST declarations using tree-sitter, a hit in a `.vue` single-file component is a real declaration, a `setup` block or a composable, rather than a blind window sliced across the template and script sections.
How do I map the directory layout of a Vue project with Atlas?
Run Atlas's glob tool on the top-level directories to see the Vue package layout and naming conventions before opening anything. A glob over src/ reveals whether the project separates views from components, whether stores live in src/stores/, and whether the router is 1 file or many.
Atlas's glob answers the shape question that codebase_search does not. In a Vue project the shape carries real information: `src/views/` versus `src/pages/` tells you whether the app follows the classic Vue Router convention or a file-based routing convention. A `src/composables/` directory tells you the team is on the Composition API rather than Options API. A `src/stores/` directory full of `defineStore` files tells you state is centralized. `vite.config.ts` at the root tells you the bundler. Atlas runs glob before reading anything, which means it opens `.vue` files with a working hypothesis about where the app's seams are, rather than reading files at random. Combine glob with codebase_search and the two together give you a map plus the coordinates that matter on it.
How do I follow imports through Vue single-file components?
Read the 2 or 3 files Atlas's codebase_search ranked highest, then follow imports with the lsp tool's goToDefinition operation. In a Vue app that walks you from a .vue component's script setup block into the composable it imports, and from the composable into the Pinia store it touches.
Reading the top hits is the cheap part. Understanding how a Vue app fits together means following the chain: a `.vue` single-file component imports a composable, the composable calls a Pinia store, the store calls an HTTP client. Atlas's lsp tool exposes a goToDefinition operation that walks that chain through the language server rather than by guessing at import paths, which matters in a Vue project full of `@/` path aliases resolved by `vite.config.ts`. Atlas reads each hop with its read tool, so at each step you see the real file. Atlas reads git branches, status, and diffs too, which is useful during onboarding: the recent commit history tells you which parts of `src/` are alive and which are frozen.
What is the Atlas explore subagent and why is it read-only?
Atlas delegates wide sweeps of a Vue codebase to the explore subagent through the task tool. The explore subagent is defined with a deny-by-default permission set that allows only 6 tools, grep, glob, read, bash, webfetch, and websearch, so it cannot modify a .vue file, a Pinia store, or vite.config.ts.
Onboarding to a large Vue monorepo means reading a lot, and reading a lot burns context. Atlas fans out work to subagents that can run in the foreground or in parallel background sessions, and the explore subagent is the one built for reconnaissance. Its permission set is deny-by-default and allows only grep, glob, read, bash, webfetch, and websearch. Nothing in that list can write. That is the guarantee that lets you turn a subagent loose across `src/components/`, `src/stores/`, and `src/router/` without worrying about what it might do. Every Atlas tool call is permission-gated against allow, ask, and deny rules before it runs, and the explore agent's denials are part of its definition rather than something you have to remember to configure. You get the summary back and your Vue working tree is untouched.
How do I keep what I learned about a Vue app from evaporating?
Record what you learned as a todowrite list so the open questions survive into the next turn. After an onboarding pass over a Vue codebase, the valuable output is not the 20 files you read, it is the list of unresolved questions about the router, the Pinia stores, and the Composition API patterns in use.
Atlas's todowrite is not only for tasks. During onboarding to a Vue project it captures the shape of your ignorance: which store owns the auth token, why two composables both wrap the same API, whether the `src/views/` components are lazily loaded. Writing those into a todowrite list makes them survive into the next turn instead of dying with the context window. Once you start making changes, Atlas drafts a plan in a read-only plan agent and asks before switching to a build agent, so the transition from understanding a Vue app to changing it is an explicit step you approve. Atlas computes a unified diff for every file edit and surfaces it for approval before writing, so your first change to a `.vue` file is reviewed. Verify with Vitest with Vue Test Utils, run prettier, and install anything missing with pnpm.
Step by step
- 01Run atlas in the Vue project with a package.json, so it can see the workspace root and vite.config.ts.
- 02Ask Atlas's codebase_search a plain-language question, for example how requests are authenticated. The semantic index returns ranked snippets with file paths under src/composables/ or src/stores/.
- 03Run Atlas's glob on the top-level directories to see the Vue package layout before opening anything: whether views live in src/views/, whether there is a src/composables/ directory, whether stores use Pinia.
- 04Read the two or three .vue files or composables codebase_search ranked highest with Atlas's read tool, rather than opening components at random.
- 05Follow imports with the lsp tool's goToDefinition operation, walking from a single-file component's script setup block into the composable and then into the store it calls.
- 06Delegate wide sweeps to the explore subagent through the task tool. The explore subagent's deny-by-default permission set allows only grep, glob, read, bash, webfetch, and websearch, so it cannot modify a .vue file.
- 07Record what you learned, and what you still do not know, as a todowrite list so the open questions about the Vue router and stores survive into the next turn.
- 08Before your first change, let Atlas draft the plan in the read-only plan agent, then approve the switch to the build agent.
- 09Verify any change with Vitest with Vue Test Utils, run prettier over the touched files, and install anything missing with pnpm.
Frequently asked questions
- how to get up to speed on a large vue codebase fast
- Ask Atlas's codebase_search a plain-language question about the behavior you care about, run glob to map src/, read only the two or three files ranked highest, and delegate wide sweeps to the read-only explore subagent.
- what does the atlas explore subagent do
- The explore subagent handles wide read-only sweeps through the task tool. It is defined with a deny-by-default permission set that only allows grep, glob, read, bash, webfetch, and websearch, so it cannot change a .vue file while it explores.
- how do I find the pinia store that owns some state in vue
- Describe the state to Atlas's codebase_search rather than guessing the store name. The semantic index returns ranked declarations with file paths, and the lsp tool's goToDefinition then follows the import chain from the composable into the store.
- can atlas read vue single file components properly
- Yes. Atlas indexes code by AST declarations using tree-sitter rather than blind line windows, so a hit inside a .vue single-file component is a real declaration such as a script setup block, not a window sliced across template and script.
- how do I follow imports across vite path aliases in vue
- Use the lsp tool's goToDefinition operation, which resolves through the language server rather than by string-matching paths. That handles the @/ aliases configured in vite.config.ts that a naive path guess would fail on.
- is it safe to let an ai agent explore my vue repo
- With Atlas, yes. Every tool call is permission-gated against allow, ask, and deny rules before it runs, and the explore subagent's permission set is deny-by-default, allowing only read-only tools. Any later edit arrives as a unified diff for approval.
- how do I remember what I learned onboarding to a vue project
- Record it as a todowrite list. Atlas's todowrite entries survive into the next turn, so open questions about the Vue router, the Pinia stores, and the Composition API patterns in use do not vanish with the context window.
- how do I verify my first change to an unfamiliar vue app
- Run Vitest with Vue Test Utils through Atlas's bash tool, run prettier over the touched files, and install anything missing with pnpm. Atlas surfaces a unified diff for approval before writing to any .vue file.
Try Atlas in your terminal
The terminal-native AI coding agent. Free core, single binary.
Install AtlasRelated guides
Onboard to an Unfamiliar Codebase with Atlas in 2026
How to onboard to an unfamiliar codebase with Atlas in 2026: use codebase_search, glob, read, lsp, task, and todowrite to build a mental model fast.
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.
Rename a symbol across the repo in Vue with Atlas in 2026
Effortlessly rename functions, classes, or constants across your Vue 3 codebase in 2026 using Atlas. Leverage lsp, grep, and edit for precise, safe refactoring in single-file components and Composition API projects.
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.
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.
Write unit tests for untested code in Vue with Atlas in 2026
Add real unit tests to your untested Vue components in 2026 using Atlas. Leverage Vitest with Vue Test Utils, pnpm, and prettier to match existing repo conventions.
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.
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.