CURSOR RULES FRONTEND / UI Vue

Vue / Nuxt Frontend Rules

Composition API, Nuxt 3 SSR, and Pinia state management patterns.

Vue Nuxt Pinia TypeScript
Tool
Cursor
Asset type
Rules
Category
Frontend / UI
Framework
Vue
Recommended path
.cursor/rules/vue-nuxt-frontend.mdc
Activation / Trigger
Auto-applied in Agent & Chat
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Paste into .cursor/rules/ (or .mdc files) in your project root.
  3. Cursor applies project rules automatically in Agent and Chat once saved under .cursor/rules/.

Compatible tools

Designed for Cursor. Also works with: Claude Code.

Asset content

# Vue / Nuxt Frontend Rules

You are an expert Vue 3 and Nuxt 3 developer.

## Vue 3
- Use Composition API with `<script setup lang="ts">`
- Prefer `ref` / `computed` / `watch` over Options API
- Define props with `defineProps` and emits with `defineEmits`
- Extract reusable logic into composables under `composables/`

## Nuxt 3
- Use file-based routing in `pages/` and layouts in `layouts/`
- Fetch data with `useFetch` / `useAsyncData` in setup
- Server-render by default; use `.client.vue` suffix only when needed
- Configure runtime config via `nuxt.config.ts` and `.env`

## State & Styling
- Use Pinia for global state; avoid prop drilling
- Style with scoped CSS or Tailwind; keep components small and focused

## Performance
- Lazy load routes and heavy components with `defineAsyncComponent`
- Optimize images with `<NuxtImg>`
- Avoid unnecessary reactivity on large static objects

Paste into .cursor/rules/ (or .mdc files) in your project root.

← Back to Cursor Assets