Nuxt 3 Project Rules

nuxtvuefullstack

Enforces Nuxt 3 conventions including composables, server routes, auto-imports, and file-based routing for Vue-powered full-stack applications.

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

## Nuxt 3 Project Rules ### Directory Structure - `components/` — auto-imported Vue components; use subdirectory prefixes for namespacing - `composables/` — auto-imported composables; prefix with `use` (e.g., `useAuth.ts`) - `pages/` — file-based routing; every file becomes a route automatically - `server/api/` — server-only API routes; files map to `/api/[path]` endpoints - `server/middleware/` — server middleware runs before every request - `middleware/` — client/universal route middleware - `plugins/` — Vue plugins; suffix `.client.ts` or `.server.ts` for environment targeting - `utils/` — auto-imported utility functions; keep pure, no side effects ### Composables - All composables must start with `use` prefix - Use `useState<T>(key, init)` for SSR-safe shared state across components - Use `useFetch()` or `useAsyncData()` for data fetching — never raw `fetch()` in setup - Use `useCookie()` instead of `document.cookie` for SSR-compatible cookie access - Composables must be called at the top level of `setup()` — not inside conditionals or loops - Return only what the consumer needs; avoid leaking internal refs ### Pages & Routing - Use `definePageMeta()` for layout, middleware, and keepalive configuration - Dynamic routes use `[param].vue` syntax; catch-all routes use `[...slug].vue` - Always validate route params in `useRoute()` — never trust raw param values - Use `navigateTo()` for programmatic navigation, not `router.push()` - Nested layouts must be explicit with `<NuxtLayout name="layout-name" />` ### Data Fetching - Prefer `useFetch()` for straightforward fetches; use `useAsyncData()` for complex logic - Always provide a unique `key` to `useAsyncData()` to avoid cache collisions - Use `lazy: true` option for non-critical data that can load after hydration - Handle `error` and `pending` states from every `useFetch`/`useAsyncData` call - Use `$fetch()` inside event handlers and server routes, not `useFetch()` ### Server Routes - Server routes live in `server/api/`; method-specific files use `.get.ts`, `.post.ts` suffixes - Always validate request body with a schema (zod or h3 `readValidatedBody`) - Use `createError()` to throw typed HTTP errors with status codes - Access environment variables via `useRuntimeConfig()` in server routes — never `process.env` in client code - Return plain objects; h3 auto-serializes to JSON ### Auto-imports - Do not explicitly import Vue APIs (`ref`, `computed`, `watch`) — they are auto-imported - Do not import composables from `~/composables/` — they are auto-imported - Components in `components/` are auto-imported; use PascalCase in templates - If a symbol conflicts, use explicit import with `#imports` alias ### State Management - Use `useState()` for simple cross-component state - Use Pinia for complex state with actions and getters - Define Pinia stores in `stores/` directory with `defineStore('name', ...)` - Never mutate state directly in Pinia — use actions ### Performance - Use `<NuxtImage>` for all images; never raw `<img>` tags - Use `<LazyComponent>` prefix for components below the fold - Use `prerender` routes in `nuxt.config.ts` for static content - Enable Nitro compression and caching headers for API routes ### Anti-patterns - Do not use `window` or `document` at the top level of composables — wrap in `onMounted()` - Do not store sensitive values in `useRuntimeConfig().public` — use server-only runtime config - Do not use `<a>` tags for internal navigation — use `<NuxtLink>` - Do not define routes manually in `router.js` — use file-based routing

CLI

npx mindaxis apply nuxt-rules --target cursor --scope project

Используется в паках

Nuxt Fullstack

Full-stack Nuxt 3 development kit

Открыть пак →

← Правила