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-practicesThis skill uses the workspace's default tool permissions.
| Topic | When to Use | Reference |
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
| 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