Vue Pinia (.cursorrules)

{
    "prompt": "You are an expert in Vue 3, TypeScript, and Pinia state management. # Vue + Pinia Guidelines ## State Ownership - Keep component-only state in the component with `ref`, `reactive`, or `computed`. - Use Pinia for shared client state that spans routes, layouts, or unrelated component trees. - Use route params and query strings for shareable navigation state. - Use Nuxt `useFetch` / `useAsyncData`, TanStack Query for Vue, or the existing API layer for server state. - Do not copy server cache data into Pinia unless it is an intentional editable draft, offline cache, or workflow snapshot. ## Store Structure - Prefer setup stores with `defineStore('name', () => {. })` for Vue 3 Composition API projects. - Use one store file per domain under `stores/`, such as `stores/` or `stores/`. - Keep state, computed getters, and actions together when they represent one cohesive domain. - Return every state property from setup stores so Pinia can track it for devtools, SSR, and plugins. - Keep getters pure and side-effect free; put writes, I/O, and orchestration in actions. ```ts import { computed, ref } from 'vue' import { defineStore } from 'pinia' interface CartLine { id: string name: string quantity: number unitPrice: number } export const useCartStore = defineStore('cart', () => { const lines = ref<CartLine[]>([]) const itemCount = computed(() => ((total, line) => total + ty, 0), ) function addLine(line: CartLine) { const existing = ((item) => === ) if (existing) { ty += ty return } (line) } function clearCart() { = [] } return { lines, itemCount, addLine, clearCart, } }) ``` ## Component Usage - Call stores at the top of `<script setup>` or inside setup functions, getters, and actions. - Use `storeToRefs()` when destructuring store state or getters in components. - Destructure actions directly when useful; actions remain bound to the store. - Avoid writing large business workflows in components; move them to store actions or composables. - Prefer computed values over watchers when deriving state. ```vue <script setup lang=\"ts\"> import { storeToRefs } from 'pinia' import { useCartStore } from '@/stores/cart' const cart = useCartStore() const { itemCount } = storeToRefs(cart) const { clearCart } = cart </script> <template> <button type=\"button\" :disabled=\"itemCount === 0\" =\"clearCart\"> Clear cart </button> </template> ``` ## TypeScript - Type store state, action payloads, and API responses explicitly. - Avoid `any`; use `unknown` and narrow external inputs before committing them to state. - Use interfaces for object state that is shared across components or API boundaries. - Prefer discriminated unions for workflow status and error state. - Keep store IDs stable and descriptive because they appear in devtools and persistence keys. ## Actions and Side Effects - Actions may be sync or async; keep each action focused on one user or domain workflow. - Validate action inputs at the boundary before mutating store state. - Represent async workflows with explicit `status`, `error`, and `lastUpdatedAt` fields when the UI depends on them. - Reset stale errors before retrying an async action. - Keep subscriptions, intervals, sockets, and browser listeners outside stores unless the store owns their lifecycle and cleanup. ##",
    "model": "Claude 3.7 Sonnet / Cursor",
    "aspect_ratio": "1:1",
    "category": "Coding Agents",
    "content_type": "coding_prompt",
    "surface": "agents_hub",
    "quality_score": 83,
    "provenance": "SYSTEM_RULE"
}