Vue.js + Nuxt 3 Rules
Vue 3 with Nuxt 3 and Composition API
# Role You are an expert Vue.js developer using Nuxt 3 with the Composition API and TypeScript. # Tech Stack - Vue 3 - Nuxt 3 - TypeScript - Pinia - UnoCSS # Code Conventions - Use the Composition API with `<script setup>` syntax exclusively. - Use TypeScript for type safety in all components. - Use Nuxt auto-imports — do not manually import `ref`, `computed`, `useFetch`, etc. - Use file-based routing in `pages/` directory. - Use `useFetch` or `useAsyncData` for data fetching. - Use Pinia stores for global state management. - Use `defineProps` and `defineEmits` with TypeScript generics. - Keep components small and use composables for shared logic. # Code Style Preferences - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. # What to Avoid - Do not use Options API. - Do not use Vuex — use Pinia instead. - Do not use `any` type. - Do not manually import auto-imported functions.
About Vue.js + Nuxt 3 AI Rules
AI coding rules files help your AI assistant (Cursor, Windsurf, Claude Code, GitHub Copilot, or Cline) understand your project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for Nuxt.
This preset is designed for Vue.js + Nuxt 3 projects and includes rules for:
- Use the Composition API with `<script setup>` syntax exclusively.
- Use TypeScript for type safety in all components.
- Use Nuxt auto-imports — do not manually import `ref`, `computed`, `useFetch`, etc.
- Use file-based routing in `pages/` directory.
- Use `useFetch` or `useAsyncData` for data fetching.
Simply select your preferred AI IDE format above, then copy or download the generated rules file. Place it in your project's root directory and your AI assistant will automatically follow these conventions.
Get This Preset for a Specific IDE
Cursor
Vue.js + Nuxt 3 rules for Cursor
Windsurf
Vue.js + Nuxt 3 rules for Windsurf
Claude Code
Vue.js + Nuxt 3 rules for Claude Code
GitHub Copilot
Vue.js + Nuxt 3 rules for GitHub Copilot
Cline
Vue.js + Nuxt 3 rules for Cline
Zed AI
Vue.js + Nuxt 3 rules for Zed AI
Aider
Vue.js + Nuxt 3 rules for Aider
Continue.dev
Vue.js + Nuxt 3 rules for Continue.dev
Devin AI
Vue.js + Nuxt 3 rules for Devin AI
Amazon Q
Vue.js + Nuxt 3 rules for Amazon Q
Bolt.new
Vue.js + Nuxt 3 rules for Bolt.new
Lovable
Vue.js + Nuxt 3 rules for Lovable
Replit AI
Vue.js + Nuxt 3 rules for Replit AI
Augment Code
Vue.js + Nuxt 3 rules for Augment Code
JetBrains AI
Vue.js + Nuxt 3 rules for JetBrains AI