vue

Original：🇺🇸 English

Translated

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

25installs

Sourceonmax/nuxt-skills

Added on2026-02-04

NPX Install

npx skill4agent add onmax/nuxt-skills vue

SKILL.md Content

View Translation Comparison →

Vue 3 Development

Reference for Vue 3 Composition API patterns, component architecture, and testing practices.

Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.

Overview

Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file).

When to Use

Use this skill when:

Writing
```
.vue
```
components
Creating composables (
```
use*
```
functions)
Building client-side utilities
Testing Vue components/composables

Use
nuxt
skill instead for:

Server routes, API endpoints
File-based routing, middleware
Nuxt-specific patterns

For styled UI components: use

nuxt-ui

skill For headless accessible components: use

reka-ui

skill For VueUse composables: use

vueuse

skill

Quick Reference

Working on...	Load file
`.vue` in `components/`	references/components.md
File in `composables/`	references/composables.md
File in `utils/`	references/utils-client.md
`.spec.ts` or `.test.ts`	references/testing.md
TypeScript patterns	references/typescript.md
Vue Router typing	references/router.md
Reactivity (ref, watch)	references/reactivity.md
Custom directives	references/directives.md
Provide/inject	references/provide-inject.md
Edge cases, vue-tsc	references/gotchas.md

Loading Files

Consider loading these reference files based on your task:

references/components.md - if working in
```
components/
```
or writing
```
.vue
```
files
references/composables.md - if creating composables (
```
use*
```
functions)
references/utils-client.md - if working in
```
utils/
```
or writing client utilities
references/testing.md - if writing
```
.spec.ts
```
or
```
.test.ts
```
files
references/typescript.md - if working with Vue TypeScript patterns or generics
references/router.md - if working with Vue Router or route typing
references/reactivity.md - if using ref, reactive, computed, watch, or watchEffect
references/directives.md - if creating or using custom directives
references/provide-inject.md - if using provide/inject patterns
references/gotchas.md - if debugging edge cases or hydration issues

DO NOT load all files at once. Load only what's relevant to your current task.

Available Guidance

references/components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand

references/composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas

references/utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils

references/testing.md - Vitest + @vue/test-utils, component testing, composable testing, router mocking

references/typescript.md - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components

references/router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards

references/reactivity.md - ref, reactive, computed, watch, watchEffect, reactivity fundamentals

references/directives.md - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns

references/provide-inject.md - InjectionKey typing, app-level provide, readonly patterns

references/gotchas.md - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/skills)

vue