vue
Vue 3 Composition API with script setup, reactivity system, and built-in components for single-file components.
- Use
<script setup lang="ts">with TypeScript; leveragedefineProps,defineEmits,defineModel, and other macros for type-safe component APIs - Core reactivity includes
ref,shallowRef,computed,watch,watchEffect, and lifecycle hooks; prefershallowRefwhen deep reactivity isn't needed - Built-in components cover
Transition,Teleport,Suspense,KeepAlive, and directives likev-memofor advanced patterns - Always use Composition API over Options API; avoid reactive props destructuring to maintain reactivity
Vue
Based on Vue 3.5. Always use Composition API with
<script setup lang="ts">.
Preferences
- Prefer TypeScript over JavaScript
- Prefer
<script setup lang="ts">over<script> - For performance, prefer
shallowRefoverrefif deep reactivity is not needed - Always use Composition API over Options API
- Discourage using Reactive Props Destructure
Core
| Topic | Description | Reference |
|---|---|---|
| Script Setup & Macros | <script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics |
script-setup-macros |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | core-new-apis |
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.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.1Kvue-best-practices
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
16.0Knuxt
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