Cursor Agent is the terminal coding agent from Cursor. In a Vue.js project, start it by running cursor-agent from the project root, then describe the change. It reads your project files, edits components, stores, and tests, and follows the commands and conventions you define in AGENTS.md or .cursor/rules.
Why Cursor Agent fits Vue.js components and stores
Vue’s single-file components are a strong fit for an agent that can edit template, script setup, and scoped styles in one pass. Cursor Agent understands Composition API patterns such as ref, computed, watch, and composables, so it can keep related code consistent. It also handles Pinia stores and Vite’s fast test loop well: after a component edit, it can run Vitest or Vue Test Utils tests and use the output to fix regressions. Because Vue’s reactivity rules are explicit, a project-specific rules file gives the agent enough context to avoid common mistakes.
Vue’s SFC format also rewards an agent that can keep three sections of one file in sync. When a prop or event changes, Cursor Agent can update defineProps, the template bindings, and the scoped style class in a single edit. The Composition API’s reliance on ordered ref and computed declarations makes it easier for the agent to reason about data flow than deeply nested Options API objects. With script setup, the agent can add imports and reactive state without boilerplate, which keeps diffs small.
Preparing AGENTS.md for a Vue.js codebase
Put a short instruction file at AGENTS.md in the repo root, or store the same rules under .cursor/rules for Cursor-specific loading. The file should list build, test, and lint commands, folder conventions, and Vue-specific rules. Keep it short; the agent reads it at the start of a session. If you use .cursor/rules, keep one rule per file, such as vue-style.md and testing.md, so updates are easier. For a step-by-step terminal workflow outside a Vue project, see how to use Cursor CLI. A realistic example for a Vue 3 + Vite + Pinia + TypeScript project:
# AGENTS.md for a Vue.js + Vite + Pinia project
## Commands
- install: npm install
- dev: npm run dev
- build: npm run build
- test: npm run test:unit -- --run
- lint: npm run lint
## Conventions
- Use TypeScript with `<script setup lang='ts'>`.
- Components are PascalCase in `src/components/`.
- Views/pages are in `src/views/` and registered in `src/router/index.ts`.
- Pinia stores are in `src/stores/` and use `defineStore` with setup syntax.
- Shared logic goes in `src/composables/use*.ts`.
- Keep components small; extract reusable logic into composables.
- Use Vitest and Vue Test Utils; name test files `*.spec.ts` next to the component or in `src/tests/`.
## Vue-specific rules
- Prefer `ref` for primitives, `reactive` for objects only when needed.
- Never mutate props directly; emit events or use v-model.
- Use `defineEmits` and `defineProps` with TypeScript.
- For forms, prefer `v-model` and validate in the component or composable.
- Scoped styles use `<style scoped lang='scss'>` where the project already uses SCSS.
- When adding a Pinia store, export the store and use it with `storeToRefs` in components.
- Do not introduce Options API unless the existing file uses it.
- When changing a prop or emit, update the parent component and its tests in the same pass.
- Keep route-level components lazy-loaded and add new routes to `src/router/index.ts`.This gives the agent the exact commands it can run and the Vue.js style you expect. It is more useful than a long onboarding document because every rule is actionable during a code change.
A practical workflow with small steps and test runs
Work in small steps: pick one component, composable, or Pinia store at a time. After each prompt, ask the agent to run the relevant test or lint command, then review git diff before moving on. For a new feature, start by asking the agent to write a failing test, then implement the minimal code to pass. This is especially effective with Pinia stores, where the store API is easy to spec. When a change touches a component, ask the agent to run only that component’s test file rather than the whole suite, then run the full suite at the end. Example prompts for typical Vue.js tasks:
Create a useDebouncedRef composable in src/composables/useDebouncedRef.ts and add a unit test with Vitest. Follow the project's TypeScript rules in AGENTS.md.In src/components/ProductCard.vue, replace the local isFavorite ref with a Pinia store action toggleFavorite. Update the button event and add a store test.Add form validation to src/views/CheckoutView.vue using a useCheckoutForm composable. Show errors below each field and disable submit until valid.Refactor src/views/UserList.vue to use defineAsyncComponent for the user detail modal. Run tests and lint after the change.Update vite.config.ts to add an alias for @/ and update the tests that import from relative paths to use the alias.
The first two are good starting points because they exercise both component code and Pinia state; the third shows form validation, where templates can be verbose.
Where Cursor Agent shines and where it falters in Vue.js
Cursor Agent is strong at updating SFCs in place, adding TypeScript props and emits, creating Pinia stores, and fixing failing tests after a component change. The table shows three common tasks and what to verify.
| Task | Good prompt | What to check |
|---|---|---|
| Add a composable | Create useMediaQuery in src/composables/useMediaQuery.ts with Vitest coverage. | The composable returns refs and cleans up listeners on unmount. |
| Update a Pinia store | Add setUser action to src/stores/auth.ts and update the user profile component. | The action is synchronous or async as intended, and state updates are reactive. |
| Change a prop type | Change the date prop in EventCard.vue from string to Date and update parent and tests. | All defineProps and type imports are updated, and tests use the new type. |
Watch out for reactivity pitfalls: the agent may accidentally destructure reactive objects or props, losing reactivity. Tell it to use toRefs or storeToRefs for Pinia. It may also add a new import to the script setup block but forget to add the corresponding component to the components option if using Options API; with script setup, that is less frequent. When writing SFC templates, the agent might use v-if and v-for together on the same element; instruct it to wrap the element instead. Template expressions should stay simple; ask it to move complex logic to computed or methods. Finally, scoped styles can become too large; ask the agent to use CSS modules or style binding for dynamic classes.
Verifying changes with Vitest and Vue Test Utils
Use the agent to run tests after every small change. For a component, a good loop is: write the test first, ask the agent to implement, then have it run npm run test:unit -- --run and fix any failures. With Vitest and Vue Test Utils, the agent can mount components, inspect the rendered DOM, and trigger events. For Pinia, ask it to test store actions and getters directly, then test component reactivity with storeToRefs. If a test fails, paste the full error back into the prompt; the agent can use the stack trace and Vue Test Utils error messages to locate the issue. Always require the agent to run the linter and formatter before ending a task, so your AGENTS.md commands are actually used. For a deeper workflow on safe coding practices, see how to vibe code safely.
Parallel Vue.js work with AgentVera
When you need parallel work on multiple Vue.js features, AgentVera is a good fit. It runs real CLI agents like Cursor Agent in separate terminal panels, each agent able to work in its own git worktree so files don’t clash. Automatic code review after each turn catches Vue-specific issues like lost reactivity or unhandled prop changes, with findings linked to file:line. Token budgets keep each agent within limits, and checkpoints allow undoing a bad change quickly. These features matter because Vue projects mix components, stores, and tests, and parallel agents need isolation and review to avoid inconsistent code across files. See best tools to run AI coding agents in parallel.
Final notes for Vue.js teams
Cursor Agent becomes a reliable Vue.js pair programmer when you give it the project commands and Vue-specific rules up front. Work in small, testable steps, and use Vitest plus Vue Test Utils to verify every change. For multiple parallel tasks, use separate git worktrees and consider a tool like AgentVera to manage isolation, review, and budgets. With this setup, you can hand off routine SFC, Pinia, and composable work to the agent and focus on architecture and product decisions.