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

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.