Nuxt Cursor Rules Template
Generate production-ready Nuxt Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using Nuxt. Vue meta-framework with auto-imports, file-based routing, and server routes.
The Complete Nuxt Cursor Rules
The full rule set in all three formats Cursor understands — copy the one your project uses. Project Rules (.mdc) load per-file via globs, AGENTS.md is portable across AI tools, and .cursorrules is the legacy single-file format.
Replacing a legacy file? Read the guide to migrate .cursorrules to Cursor Project Rules (.mdc) before copying this template into your project.
---
description: "Auto-Imports & Conventions"
alwaysApply: false
---
- Leverage Nuxt auto-imports: no manual imports for composables/components.
- Use useAsyncData() and useFetch() for data fetching.
- Use spaces for indentation.
- Use camelCase for composable and function names.
- Place composables in composables/ directory for auto-import.
- Use auto-imported ref(), computed(), watch() from Vue.---
description: "Pages & Routing"
alwaysApply: false
---
- Use file-based routing under pages/ directory.
- Use [param].vue for dynamic routes.
- Use [...slug].vue for catch-all routes.
- Use definePageMeta() for per-page configuration (layout, middleware, auth).
- Use navigateTo() for programmatic navigation.
- Use middleware/ directory for route-level middleware with named exports.---
description: "Server & API Routes"
alwaysApply: false
---
- Use server/api/ for API endpoints with defineEventHandler().
- Use server/middleware/ for server-level middleware.
- Use useRuntimeConfig() for environment variables and public config.
- Use server routes with proper HTTP method handling (getMethod(), readBody()).
- Use server/utils/ for shared server utilities.
- Prefer Nitro storage (useStorage()) for KV and file storage.---
description: "SSR & Rendering Modes"
alwaysApply: false
---
- Use hybrid rendering: configure ssr per route with routeRules.
- Use <ClientOnly> for components that must not SSR.
- Use useHead() for per-page SEO meta and head management.
- Use useSeoMeta() for type-safe SEO configuration.
- Use server components (.server.vue) for server-only rendering.
- Use lazy loading with Lazy prefix for dynamic imports.Customize These Rules
The generator below is preloaded with the Nuxt template. Adjust indentation, quotes, naming, add your own rules, then download — no need to start from scratch on the homepage.
What This Template Covers
Required guidance
- - Auto-Imports & Conventions
- - Pages & Routing
- - Server & API Routes
- - SSR & Rendering Modes
Default style
- - Indentation: 2 spaces
- - Quotes: single
- - Semicolons: disabled
- - Naming: camelCase
Frequently Asked Questions
- What does the Nuxt Cursor rules template include?
- It includes 4 rule sections covering auto-imports & conventions, pages & routing, server & api routes and other Nuxt development conventions.
- Can I generate Nuxt Project Rules and AGENTS.md from the same template?
- Yes. The generator can export the same stack-specific guidance as modern Project Rules (.mdc), AGENTS.md, or a legacy .cursorrules file.
- Should I combine Nuxt with other Cursor rules templates?
- Yes. You can combine Nuxt with related templates such as TypeScript, Tailwind CSS, Docker, or backend frameworks when your project uses multiple technologies.