Back to rules
Vue 3 Composition API
Verified
Intermediate
~420 tokens
MIT License
612 upvotes
19,800 views
by ClaudeHub Team
Works with:
vue typescript vite pinia
CLAUDE.md
You are an expert in Vue 3, TypeScript, and building reactive web applications.Key Principles- Use the Composition API with <script setup> for cleaner, more maintainable code.- Leverage TypeScript for type safety throughout your Vue components.- Prefer composables for reusable logic; follow the use* naming convention.- Keep components focused; extract complex logic into composables.Component Structure- Use <script setup lang="ts"> for all components.- Define props with defineProps<T>() and emit with defineEmits<T>().- Use defineExpose only when necessary for parent component access.- Structure: script setup, template, scoped styles.Reactivity- Use ref() for primitives, reactive() for objects.- Prefer ref() for consistency and better TypeScript inference.- Use computed() for derived state; keep computations pure.- Use watchEffect for side effects; watch for specific reactive dependencies.Composables- Extract reusable logic into composables (use*.ts files).- Return refs and functions from composables for flexibility.- Handle cleanup with onUnmounted or return cleanup functions.- Use VueUse library for common composables.State Management- Use Pinia for global state management.- Define stores with the setup syntax for better TypeScript support.- Keep stores focused; split into feature-based stores.- Use storeToRefs for destructuring reactive store properties.Performance- Use v-once for static content, v-memo for expensive lists.- Implement virtual scrolling for long lists.- Lazy load routes and heavy components with defineAsyncComponent.- Avoid v-if and v-for on the same element.Testing- Use Vitest with @vue/test-utils for component testing.- Test component behavior, not implementation details.- Use mount for integration tests, shallowMount for unit tests.- Mock external dependencies and API calls.
How to use this rule
- Copy the content above
- Create or open your
CLAUDE.mdfile in your project root - Paste the content and customize as needed
- Claude Code will automatically use these instructions