home / skills / bahayonghang / my-claude-code-settings / vue-best-practices

vue-best-practices skill

safe

/content/skills/development-skills/vue-best-practices

This skill helps you enforce Vue 3 and TypeScript best practices in components, props typing, and Volar configuration for reliable code.

This is most likely a fork of the vue-best-practices skill from antfu

npx playbooks add skill bahayonghang/my-claude-code-settings --skill vue-best-practices

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

Files (18)

SKILL.md

2.7 KB

---
name: vue-best-practices
description: Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration.
category: frontend-development
tags:
  - vue
  - vue3
  - typescript
  - best-practices
  - volar
  - component-design
license: MIT
metadata:
  author: hyf0
  version: "8.0.0"
---

## Capability Rules

| Rule | Keywords | Description |
|------|----------|-------------|
| [extract-component-props](rules/extract-component-props.md) | get props type, wrapper component, extend props, inherit props, ComponentProps | Extract types from .vue components |
| [vue-tsc-strict-templates](rules/vue-tsc-strict-templates.md) | undefined component, template error, strictTemplates | Catch undefined components in templates |
| [fallthrough-attributes](rules/fallthrough-attributes.md) | fallthrough, $attrs, wrapper component | Type-check fallthrough attributes |
| [strict-css-modules](rules/strict-css-modules.md) | css modules, $style, typo | Catch CSS module class typos |
| [data-attributes-config](rules/data-attributes-config.md) | data-*, strictTemplates, attribute | Allow data-* attributes |
| [volar-3-breaking-changes](rules/volar-3-breaking-changes.md) | volar, vue-language-server, editor | Fix Volar 3.0 upgrade issues |
| [module-resolution-bundler](rules/module-resolution-bundler.md) | cannot find module, @vue/tsconfig, moduleResolution | Fix module resolution errors |
| [define-model-update-event](rules/define-model-update-event.md) | defineModel, update event, undefined | Fix model update errors |
| [with-defaults-union-types](rules/with-defaults-union-types.md) | withDefaults, union type, default | Fix union type defaults |
| [deep-watch-numeric](rules/deep-watch-numeric.md) | watch, deep, array, Vue 3.5 | Efficient array watching |
| [vue-directive-comments](rules/vue-directive-comments.md) | @vue-ignore, @vue-skip, template | Control template type checking |
| [vue-router-typed-params](rules/vue-router-typed-params.md) | route params, typed router, unplugin | Fix route params typing |

## Efficiency Rules

| Rule | Keywords | Description |
|------|----------|-------------|
| [hmr-vue-ssr](rules/hmr-vue-ssr.md) | hmr, ssr, hot reload | Fix HMR in SSR apps |
| [pinia-store-mocking](rules/pinia-store-mocking.md) | pinia, mock, vitest, store | Mock Pinia stores |

## Reference

- [Vue Language Tools](https://github.com/vuejs/language-tools)
- [vue-component-type-helpers](https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers)
- [Vue 3 Documentation](https://vuejs.org/)

Overview

This skill provides Vue 3 best practices focused on TypeScript, vue-tsc, and Volar to ensure correct typing patterns in components. It helps writing, reviewing, and refactoring Vue components so templates and props are fully type-safe and editor tooling (Volar/vue-tsc) behaves predictably. Use it to catch common typing pitfalls, Volar 3 migration issues, and template-level errors early.

How this skill works

I inspect component definitions, props extraction patterns, wrapper components, and template usage to surface typing mistakes and misconfigurations. The skill checks for incorrect prop inference, fallthrough attribute handling, CSS module typos, data-* attr allowances, and known Volar or module resolution problems. It suggests fixes and patterns for defineModel, withDefaults unions, watch usage, and router-typed params so vue-tsc/strictTemplates pass cleanly.

When to use it

Writing or refactoring .vue components with TypeScript and Volar enabled
Creating or reviewing wrapper components that should inherit or extend props
Debugging template type errors reported by vue-tsc or Volar strictTemplates
Upgrading to Volar 3.0 or fixing module resolution errors in editor builds
Validating CSS module class names and preventing runtime typos

Best practices

Extract prop types using component type helpers and prefer explicit ComponentProps when wrapping
Enable vue-tsc strictTemplates and use @vue-ignore/@vue-skip sparingly for edge cases
Handle fallthrough attributes with proper $attrs typing in wrapper components
Allow data-* attributes via configuration instead of silencing template checks
Use defineModel for v-model bindings and declare update events to avoid undefined errors

Example use cases

Refactor a wrapper component to correctly inherit and extend child props without losing type safety
Fix a template error where a component or prop appears undefined under strictTemplates
Resolve Volar 3 upgrade issues by applying known configuration adjustments
Prevent CSS module class typos by enforcing strict $style typings
Implement typed Vue Router params with unplugin-based helpers for end-to-end typing

FAQ

Will this skill change my project configuration automatically?

No. It recommends concrete changes and patterns to apply, but you must update your config or code manually.

Does this cover runtime behavior or only type checking?

The focus is on type checking, template correctness, and editor tooling compatibility; recommendations also improve runtime safety indirectly.