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
⚛
React TypeScript Best Practices
by Claude Rules
Modern React development with TypeScript, hooks, and component patterns.
ReactTypeScriptFrontend
🔷
TypeScript Clean Code
by Claude Rules
Writing clean, idiomatic TypeScript with proper types, patterns, and architecture.
TypeScriptJavaScriptBest Practices
Browse by Tag
Get the Claude Code Starter Pack
Top CLAUDE.md rules for Next.js, TypeScript, Python, Go, and React — free.