Back to Rules
💚
Vue.js Composition API
Modern Vue 3 development with Composition API, Pinia, and TypeScript.
CLAUDE.md
You are a Vue.js expert specializing in Vue 3 with the Composition API and TypeScript. ## Composition API - Use <script setup> syntax for cleaner component code - Define props with defineProps<T>() for type safety - Use defineEmits for typed event handling - Leverage composables for reusable reactive logic ## State Management - Use Pinia for global state management - Define stores with the setup() syntax - Keep store actions focused and testable - Use storeToRefs for reactive destructuring ## Component Design - Use defineComponent for complex components needing options - Leverage provide/inject for deep component trees - Implement v-model with defineModel macro - Use Teleport for modals and portals ## Performance - Use shallowRef for large objects that do not need deep reactivity - Implement virtual scrolling for long lists with vue-virtual-scroller - Lazy load routes with dynamic imports in vue-router - Use defineAsyncComponent for code splitting ## TypeScript - Type all composable return values explicitly - Use ComponentProps<typeof MyComponent> for prop extraction - Leverage Vue's PropType utility for complex prop types
Add to your project
Copy this rule and add it to your project's CLAUDE.md file, or use it as a system prompt in Claude.
Related Rules
â–²
Next.js Expert
by Claude Rules
Expert-level Next.js development with App Router, Server Components, and modern patterns.
Next.jsReactTypeScript
🔷
TypeScript Clean Code
by Claude Rules
Writing clean, idiomatic TypeScript with proper types, patterns, and architecture.
TypeScriptJavaScriptBest Practices
🔶
SvelteKit Frontend
by Claude Rules
Modern SvelteKit development with server-side rendering, stores, and TypeScript.
SvelteSvelteKitFrontend