Home › Vue / Nuxt › Vue 3 + Pinia AGENTS.md

Vue 3 + Pinia AGENTS.md

AGENTS.md for Vue 3.5 single-page apps on Vite with the Composition API, Pinia, and Vue Router 4.

AGENTS.mdVue / Nuxt

Copy AGENTS.md

How to use

Save this as AGENTS.md in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.

# AGENTS.md: Vue 3 + Pinia

## Commands
- Dev: `npm run dev` · Types: `npx vue-tsc --noEmit` · Tests: `npx vitest run` · Lint: `npm run lint`

## Conventions
- Single-file components with `<script setup lang="ts">`. No Options API in new code.
- Props via `defineProps<{...}>()` with reactive destructuring (Vue 3.5) and defaults in the destructure; emits via `defineEmits<{...}>()`; two-way binding via `defineModel()`.
- Reuse logic as composables in `src/composables/useX.ts` that return refs.
- Global state in Pinia setup stores (`defineStore('cart', () => {...})`). Read in components with `storeToRefs` so reactivity survives destructuring.
- Prefer `computed` over `watch`. Use `watch` only for side effects; clean up with `onWatcherCleanup`.
- Routes are lazy (`component: () => import('...')`) and typed route names are used in `router.push({ name })`.
- Template refs via `useTemplateRef('name')`.

## Don't
- Don't mutate props, and don't use `this` or mixins.
- Don't call stores at module top level outside setup (Pinia isn't installed yet).
- Don't add Vuex.

## Done
Types, tests, lint and `npm run build` pass. Mention any new component's props in the summary.