vue-best-practices
Vue 3 development workflow enforcing Composition API, TypeScript, and focused component architecture.
- Requires Composition API with
<script setup lang="ts">as the default approach; load alternative skills for Options API or JSX projects - Mandates reading four core references (reactivity, SFC structure, component data flow, composables) before implementation and keeping them active throughout the task
- Enforces component splitting when responsibilities exceed one clear purpose, with explicit rules for entry/root/view components staying thin and feature logic moving into child components and composables
- Covers essential foundations: minimal source state with computed derivation, props-down/events-up data flow, template safety, and composable extraction for reusable or side-effect-heavy logic
- Defers optional features (slots, transitions, async components, directives, state management) until requirements explicitly call for them, and reserves performance optimization for post-functionality passes
Vue Best Practices Workflow
Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.
Core Principles
- Keep state predictable: one source of truth, derive everything else.
- Make data flow explicit: Props down, Events up for most cases.
- Favor small, focused components: easier to test, reuse, and maintain.
- Avoid unnecessary re-renders: use computed properties and watchers wisely.
- Readability counts: write clear, self-documenting code.
1) Confirm architecture before coding (required)
- Default stack: Vue 3 + Composition API +
<script setup lang="ts">. - If the project explicitly uses Options API, load
vue-options-api-best-practicesskill if available. - If the project explicitly uses JSX, load
vue-jsx-best-practicesskill if available.
1.1 Must-read core references (required)
More from antfu/skills
vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
21.9Kvue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
21.9Kvitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
18.1Knuxt
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
14.9Kvueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
14.7Kweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
12.9K