Home › Vue / Nuxt › Nuxt 3 + Vue rules

Nuxt 3 + Vue rules

Cursor rules for Nuxt 3 / Vue 3 apps using the Composition API, script setup and Pinia.

CursorVue / Nuxt

How to use

Save this as .cursor/rules/nuxt.mdc in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.

---
description: Nuxt + Vue conventions
globs: ["**/*.vue", "composables/**/*.ts", "server/**/*.ts"]
---

# Nuxt 3 / Vue 3

- Always `<script setup lang="ts">` with the Composition API. No Options API in new code.
- Type props with `defineProps<{...}>()` and emits with `defineEmits<{...}>()`.
- Data fetching with `useFetch`/`useAsyncData` (SSR-safe); never fetch in `onMounted` for initial page data.
- Rely on Nuxt auto-imports for components, composables and Vue APIs; don't add redundant imports.
- Shared logic in `composables/useX.ts`; global state in Pinia stores under `stores/`.
- Server endpoints in `server/api/*.ts` with `defineEventHandler`; validate input with zod (`readValidatedBody`).
- SEO per page with `useSeoMeta`.
- Run `npx nuxi typecheck` and `npm run lint` before finishing.