vue_skill

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