Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/ejirocodes/agent-skills/tree/main/vue/skills/vue-best-practices
Metadata
Additional technical details for this skill
- author
- ejirocodes
- version
- 1.0.0
SKILL.md
Vue 3 Best Practices
Quick Reference
| 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 |
Essential Patterns
Extract Component Props
import type { ComponentProps } from 'vue-component-type-helpers'
import MyButton from './MyButton.vue'
type Props = ComponentProps<typeof MyButton>
Reactive Props Destructure (Vue 3.5+)
<script setup lang="ts">
// Destructured props are reactive - preferred in Vue 3.5+
const { name, count = 0 } = defineProps<{ name: string; count?: number }>()
</script>
useTemplateRef (Vue 3.5+)
<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>
onWatcherCleanup (Vue 3.5+)
import { watch, onWatcherCleanup } from 'vue'
watch(query, async (q) => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
await fetch(`/api?q=${q}`, { signal: controller.signal })
})
defineModel with Required
// Returns Ref<Item> instead of Ref<Item | undefined>
const model = defineModel<Item>({ required: true })
Deep Watch with Numeric Depth
// Vue 3.5+ - watch array mutations without full traversal
watch(items, handler, { deep: 1 })
Pinia Store Test Setup
import { createTestingPinia } from '@pinia/testing'
import { vi } from 'vitest'
mount(Component, {
global: {
plugins: [createTestingPinia({ createSpy: vi.fn })]
}
})
Common Mistakes
- Using
InstanceType<typeof Component>['$props']- UseComponentPropsinstead - Missing
createSpyin createTestingPinia - Required in @pinia/testing 1.0+ - Using
withDefaultswith union types - Use Reactive Props Destructure strictTemplatesin wrong tsconfig - Add totsconfig.app.json, not root- ts_ls with Volar 3.0 - Use vtsls instead (Neovim)
deep: trueon large structures - Use numeric depth for performance- Watching destructured props directly - Wrap in getter:
watch(() => count, ...) - Random IDs in SSR - Use
useId()for hydration-safe IDs
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ejirocodes/agent-skills
svelte5-best-practices
Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.
ejirocodes/agent-skills
exa-research
Exa.ai deep research and answer generation with citations. Use when building research automation, implementing Answer API for Q&A with sources, creating research reports, or using deep search with summaries. Triggers on: Exa Answer, answer endpoint, exa.answer, deep search, research API, Exa Research, async research, research report, citation extraction, summarization with sources, fact verification, streaming answers, research tasks.
ejirocodes/agent-skills
exa-rag
Build RAG pipelines with Exa.ai for real-time web retrieval. Use when building retrieval-augmented generation, integrating Exa with LangChain, LlamaIndex, Vercel AI SDK, or implementing AI agents with web search capabilities. Triggers on: RAG pipeline, retrieval augmented generation, Exa LangChain, Exa LlamaIndex, ExaSearchRetriever, ExaSearchResults, Exa MCP, Exa tool calling, Claude tool use, AI agent web search, grounded generation, citation generation, fact checking, hallucination detection, OpenAI compatibility, chat completions.
ejirocodes/agent-skills
exa-search
Exa.ai search API integration for neural and keyword web search with content retrieval. Use when implementing web search features, integrating Exa SDK (exa_py, exa-js), or retrieving web content. Triggers on: Exa, exa_py, exa-js, neural search, web search API, search_and_contents, searchAndContents, find_similar, findSimilar, domain filtering, date filtering, text extraction, page summaries, highlights, search auto mode, fast search, search categories, livecrawl, excluding domains, include text, exclude text, EXA_API_KEY.
ejirocodes/agent-skills
exa-entities
Exa.ai company and people search for lead generation, competitive intelligence, and data enrichment. Use when searching for companies, finding people profiles, building lead gen tools, or implementing Websets for data collection at scale. Triggers on: Exa company search, Exa people search, category company, lead generation, company research, profile search, LinkedIn profiles, Websets API, data enrichment, company lookup, find companies, competitive intelligence, recruiting, talent search, 1B profiles.
ejirocodes/agent-skills
nestjs-best-practices
NestJS 11+ best practices for enterprise Node.js applications with TypeScript. Use when writing, reviewing, or refactoring NestJS controllers, services, modules, or APIs. Triggers on: NestJS modules, controllers, providers, dependency injection, @Injectable, @Controller, @Module, middleware, guards, interceptors, pipes, exception filters, ValidationPipe, class-validator, class-transformer, DTOs, JWT authentication, Passport strategies, @nestjs/passport, TypeORM entities, Prisma client, Drizzle ORM, repository pattern, circular dependencies, forwardRef, @nestjs/swagger, OpenAPI decorators, GraphQL resolvers, @nestjs/graphql, microservices, TCP transport, Redis transport, NATS, Kafka, NestJS 11 breaking changes, Express v5 migration, custom decorators, ConfigService, @nestjs/config, health checks, or NestJS testing patterns.
Didn't find tool you were looking for?