--- name: vue description: > Vue 3 patterns with Composition API and TypeScript. Trigger: When building Vue.js applications with Composition API. license: Apache-2.0 metadata: author: poletron version: "1.0" scope: [root] auto_invoke: "Working with vue" ## When to Use Use this skill when: - Building Vue 3 applications - Using Composition API with script setup - Managing reactive state - Creating composables --- ## Critical Patterns ### Script Setup (REQUIRED) ```vue ``` ### Composables (REQUIRED) ```typescript // ✅ ALWAYS: Extract reusable logic into composables // composables/useUser.ts export function useUser(userId: Ref) { const user = ref(null); const loading = ref(true); watchEffect(async () => { loading.value = true; user.value = await fetchUser(userId.value); loading.value = false; }); return { user, loading }; } ``` ### Reactive State (REQUIRED) ```typescript // ✅ Use ref for primitives const count = ref(0); // ✅ Use reactive for objects const state = reactive({ users: [] as User[], loading: false, }); // ✅ Use computed for derived state const activeUsers = computed(() => state.users.filter(u => u.active) ); ``` --- ## Decision Tree ``` Need primitive state? → Use ref() Need object state? → Use reactive() Need derived value? → Use computed() Need side effect? → Use watchEffect() Need specific watch? → Use watch() Need reusable logic? → Create composable ``` --- ## Code Examples ### Component with v-model ```vue ``` ### Async Component ```typescript const AsyncModal = defineAsyncComponent(() => import('./components/Modal.vue') ); ``` --- ## Commands ```bash npm create vue@latest myapp npm run dev npm run build npm run test:unit ```

vue

Scan your own AI components