TypeScript · Vue · Nuxt
Nuxt rules for Cursor
Auto-imports, SSR-safe data fetching and server route rules for Nuxt apps.
The rule
Save as .cursor/rules/nuxt.mdc. Cursor picks it up on the next request.
.cursor/rules/nuxt.mdc
--- description: Nuxt app conventions globs: **/*.vue, app/**/*.ts, server/**/*.ts, nuxt.config.ts alwaysApply: false --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
How Cursor loads this rule
Read from the frontmatter above, per Cursor's rules documentation.
alwaysApply: falsewithglobs: **/*.vue, app/**/*.ts, server/**/*.ts, nuxt.config.ts: attached automatically when a matching file is in context.- Keep the
.mdcextension. A plain.mdfile in .cursor/rules is ignored by the rules system. - Prefer to generate your own? Type
/create-rulein Agent and describe what you want; Cursor saves the file to .cursor/rules. - Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.
Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking
Nuxt rules for Claude Code, Copilot, Kiro and other agents
The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.
AGENTS.md (section)
## Nuxt - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Claude Code.claude/rules/nuxt.md
.claude/rules/nuxt.md
--- paths: - "**/*.vue" - "app/**/*.ts" - "server/**/*.ts" - "nuxt.config.ts" --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for GitHub Copilot.github/instructions/nuxt.instructions.md
.github/instructions/nuxt.instructions.md
--- applyTo: "**/*.vue,app/**/*.ts,server/**/*.ts,nuxt.config.ts" --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Kiro.kiro/steering/nuxt.md
.kiro/steering/nuxt.md
--- inclusion: fileMatch fileMatchPattern: ["**/*.vue", "app/**/*.ts", "server/**/*.ts", "nuxt.config.ts"] --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Antigravity.agents/rules/nuxt.md
.agents/rules/nuxt.md
--- trigger: glob globs: "**/*.vue, app/**/*.ts, server/**/*.ts, nuxt.config.ts" --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Devin Desktop (Windsurf).devin/rules/nuxt.md
.devin/rules/nuxt.md
--- trigger: glob globs: **/*.vue, app/**/*.ts, server/**/*.ts, nuxt.config.ts --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Cline.clinerules/nuxt.md
.clinerules/nuxt.md
--- paths: - "**/*.vue" - "app/**/*.ts" - "server/**/*.ts" - "nuxt.config.ts" --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
Nuxt rules for Continue.continue/rules/nuxt.md
.continue/rules/nuxt.md
--- name: "nuxt" globs: ["**/*.vue", "app/**/*.ts", "server/**/*.ts", "nuxt.config.ts"] --- - Rely on auto-imports for Vue APIs, Nuxt composables, components and files in composables/ and utils/. Do not add manual imports for them. - Fetch data for rendering with useFetch or useAsyncData so it runs once on the server and hydrates on the client. Use $fetch only in event handlers and server code. - useFetch and useAsyncData return refs: handle status and error, and do not assume data is set on first render. - Put API endpoints in server/api using defineEventHandler. Validate input with readValidatedBody or getValidatedQuery. - Share state with useState or a Pinia store, never a module-level ref; module state leaks between requests on the server. - Read config with useRuntimeConfig(). Only runtimeConfig.public reaches the browser, so keep secrets out of it. - Use <NuxtLink> for internal links and navigateTo() for programmatic navigation. - Set head tags with useSeoMeta or useHead, and layout or middleware with definePageMeta. - Keep browser-only code in onMounted, <ClientOnly> or .client.vue files.
More templates
Next.js App RouterTypeScript (strict)React componentsPythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrailsVue 3 (Composition API)SvelteKit (Svelte 5 runes)Angular (standalone components, signals)DjangoLaravelRuby on RailsNestJSSpring BootASP.NET CoreFlutterSwiftUI (iOS)Android (Kotlin, Jetpack Compose)React Native (Expo)Tailwind CSS (v4)Prisma ORM
Get Cursor rules and settings changes by email
When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.
Reviewed Oct 20, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.