playbooks

home / skills / onmax / nuxt-skills / vue

vue skill

/skills/vue

This skill helps you develop Vue 3 components and composables by applying Composition API patterns, props/emits guidance, and VueUse integration.

npx playbooks add skill onmax/nuxt-skills --skill vue

Review the files below or copy the command above to add this skill to your agents.

Files (7)
SKILL.md
3.2 KB
---
name: vue
description: 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
license: MIT
---

# 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       |

## Loading Files

**Load one file at a time based on file context:**

- Component work → [references/components.md](references/components.md)
- Composable work → [references/composables.md](references/composables.md)
- Utils work → [references/utils-client.md](references/utils-client.md)
- Testing → [references/testing.md](references/testing.md)
- TypeScript → [references/typescript.md](references/typescript.md)
- Vue Router → [references/router.md](references/router.md)

**DO NOT load all files at once** - wastes context on irrelevant patterns.

## Available Guidance

**[references/components.md](references/components.md)** - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand

**[references/composables.md](references/composables.md)** - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas

**[references/utils-client.md](references/utils-client.md)** - Pure functions, formatters, validators, transformers, when NOT to use utils

**[references/testing.md](references/testing.md)** - Vitest + @vue/test-utils, component testing, composable testing, router mocking

**[references/typescript.md](references/typescript.md)** - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components

**[references/router.md](references/router.md)** - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards

## Examples

Working examples in `resources/examples/`:

- `component-example.vue` - Full component with all patterns
- `composable-example.ts` - Reusable composition function

Overview

This skill provides practical guidance for editing .vue files, building Vue 3 components, authoring composables, and testing Vue code with modern Composition API patterns. It focuses on pragmatic patterns: props and emits best practices, VueUse integration, reactive destructuring, and TypeScript-aware component design. Use it to write clear, testable, and performant Vue 3 code.

How this skill works

The skill inspects the current file context and recommends focused guidance based on file type: components, composables, utils, tests, TypeScript patterns, or router code. It suggests only the single relevant reference to load for the task to minimize context usage and avoid unrelated suggestions. For each area it offers concrete patterns, lifecycle and reactivity tips, and testing setups (Vitest + @vue/test-utils).

When to use it

  • Editing .vue component files in components/
  • Creating reusable composables (use* functions)
  • Building client-side utilities or formatters
  • Writing unit tests or composable tests (.spec.ts/.test.ts)
  • Refactoring props/emits or integrating VueUse patterns
  • Adding TypeScript typings for components or routes

Best practices

  • Load a single focused reference for the file type to avoid noisy context
  • Prefer reactive destructuring with toRef/toRefs to keep reactivity predictable
  • Define props and emits explicitly; use defineEmits/defineProps and typed interfaces for clarity
  • Integrate VueUse composables for common utilities rather than reinventing them
  • Use Vitest with @vue/test-utils for component and composable tests and mock router behavior when needed
  • Keep utils pure and well-typed; avoid coupling utils to Vue reactivity unless necessary

Example use cases

  • Convert an Options API component to Vue 3 Composition API with typed props and emits
  • Create a composable that wraps VueUse state and lifecycle hooks for reuse across components
  • Write unit tests for a component that uses router navigation and mock route params
  • Refactor a utility in utils/ into a pure, tested function and call it from a component
  • Implement typed route params and navigation guards with unplugin-vue-router patterns

FAQ

Should I use this for Nuxt server routes?

No. Use this skill for client-side Vue 3 work. For Nuxt server routes, middleware, or file-based routing, use a Nuxt-focused reference instead.

How do I handle reactive destructuring safely?

Use toRef or toRefs when destructuring props or reactive objects so reactivity is preserved. Avoid plain object destructuring on refs unless you wrap values back into refs.