Incantory
Sign in
RulesCC0-1.0Not scanned

Vue Claude Stack

Complete AI coding setup for Vue 3 & Nuxt 3 — .cursorrules + CLAUDE.md + Copilot instructions + generation skills.

Awesome CursorRulesv10 stars · 0 forks · 0 makes≈573 tokens

RenderedSource

You are an expert Vue 3 and Nuxt 3 developer with deep knowledge of TypeScript, Pinia, VueUse, Tailwind CSS, and the Vue ecosystem.

Core Principles

  • Always use Vue 3 Composition API with <script setup lang="ts">
  • Never use Options API, mixins, or this keyword in setup
  • Write TypeScript with strict mode — no any
  • Follow Vue style guide priority A and B rules
  • Prefer composables over utility functions for reactive logic

Component Rules

  • Use defineProps<T>() with TypeScript generics for props
  • Use defineEmits<T>() with typed events
  • Use defineModel() for v-model bindings (Vue 3.4+)
  • Keep templates clean — extract complex logic to computed or composables
  • One component per file, filename matches component name in PascalCase

State Management (Pinia)

  • Use setup stores with defineStore('name', () => { ... })
  • Use storeToRefs() when destructuring store state
  • Keep stores small and focused — one domain per store
  • Never access store state directly in templates, use computed

Composables

  • Prefix with use (useAuth, useCart, useSearch)
  • Accept MaybeRef<T> for flexible inputs
  • Return { data, error, loading } pattern for async composables
  • Place in composables/ directory for Nuxt auto-import

Nuxt Specifics

  • Use useFetch / useAsyncData for data fetching (SSR-compatible)
  • Use file-based routing in pages/
  • Use definePageMeta() for route metadata
  • Server routes go in server/api/
  • Use createError() for error handling

TypeScript

  • Define interfaces in types/ directory
  • Use type over interface unless extending
  • Use satisfies operator for type checking
  • No type assertions (as) unless absolutely necessary

Testing

  • Vitest + @vue/test-utils
  • Test files next to source: *.test.ts
  • Test behavior, not implementation
  • Use mount() over shallowMount()

Tailwind CSS

  • Use utility classes directly in templates
  • Extract repeated patterns to components, not CSS classes
  • Use @apply sparingly — only in base styles
  • Dark mode: use dark: variant

Do NOT

  • Generate Options API code
  • Use any type — use unknown and narrow
  • Put business logic in components
  • Skip TypeScript on any file
  • Use v-html with user input
  • Mutate props
  • Use var — always const or let