Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From vue-best-practices
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, Volar, and component patterns. Use when writing, reviewing, or refactoring Vue 3 components with TypeScript, configuring Volar/vueCompilerOptions, extracting component types, working with defineModel/withDefaults, setting up Pinia store tests, or debugging Vue tooling issues. Triggers on Vue components, props extraction, wrapper components, template type checking, strictTemplates, vueCompilerOptions, Volar 3, CSS modules, fallthrough attributes, defineModel, withDefaults, deep watch, vue-router typed params, Pinia mocking, HMR SSR, moduleResolution bundler, useTemplateRef, onWatcherCleanup, useId, generic components, reactive props destructure.
npx claudepluginhub ejirocodes/agent-skills --plugin vue-best-practicesHow this skill is triggered — by the user, by Claude, or both
Slash command
/vue-best-practices:vue-best-practicesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Topic | When to Use | Reference |
Delivers Vue 3 best practices for Composition API script setup, composables, ref/reactive patterns, Pinia state management, and Nuxt apps. Activates on .vue files and Vue triggers.
Provides Vue 3 Composition API patterns, component architecture, and testing practices. Use when editing .vue files, creating composables, or testing Vue code.
Vue 3 conventions, Composition API patterns, SFC structure, reactivity, composables, and TypeScript integration. Invoke whenever task involves any interaction with Vue code — writing, reviewing, refactoring, debugging, or understanding .vue files, composables, and Vue component architecture.
Share bugs, ideas, or general feedback.
| Topic | When to Use | Reference |
|---|---|---|
| TypeScript | Props extraction, generic components, useTemplateRef, JSDoc, reactive props destructure | typescript.md |
| Volar | IDE config, strictTemplates, CSS modules, directive comments, Volar 3.0 migration | volar.md |
| Components | defineModel, deep watch, onWatcherCleanup, useId, deferred teleport | components.md |
| Tooling | moduleResolution, HMR SSR, duplicate plugin detection | tooling.md |
| Testing | Pinia store mocking, setup stores, Vue Router typed params | testing.md |
import type { ComponentProps } from 'vue-component-type-helpers'
import MyButton from './MyButton.vue'
type Props = ComponentProps<typeof MyButton>
<script setup lang="ts">
// Destructured props are reactive - preferred in Vue 3.5+
const { name, count = 0 } = defineProps<{ name: string; count?: number }>()
</script>
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'
const inputRef = useTemplateRef('input') // Auto-typed
onMounted(() => inputRef.value?.focus())
</script>
<template><input ref="input" /></template>
import { watch, onWatcherCleanup } from 'vue'
watch(query, async (q) => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
await fetch(`/api?q=${q}`, { signal: controller.signal })
})
// Returns Ref<Item> instead of Ref<Item | undefined>
const model = defineModel<Item>({ required: true })
// Vue 3.5+ - watch array mutations without full traversal
watch(items, handler, { deep: 1 })
import { createTestingPinia } from '@pinia/testing'
import { vi } from 'vitest'
mount(Component, {
global: {
plugins: [createTestingPinia({ createSpy: vi.fn })]
}
})
InstanceType<typeof Component>['$props'] - Use ComponentProps insteadcreateSpy in createTestingPinia - Required in @pinia/testing 1.0+withDefaults with union types - Use Reactive Props DestructurestrictTemplates in wrong tsconfig - Add to tsconfig.app.json, not rootdeep: true on large structures - Use numeric depth for performancewatch(() => count, ...)useId() for hydration-safe IDs