vue

Name: vue
Author: antfu

Vue 3 Composition API with script setup, reactivity system, and built-in components for single-file components. Use <script setup lang="ts"> with TypeScript; leverage defineProps , defineEmits , defineModel , and other macros for type-safe component APIs Core reactivity includes ref , shallowRef , computed , watch , watchEffect , and lifecycle hooks; prefer shallowRef when deep reactivity isn't needed Built-in components cover Transition , Teleport , Suspense , KeepAlive , and directives like v-memo for advanced patterns Always use Composition API over Options API; avoid reactive props destructuring to maintain reactivity

INSTALLATION

npx skills add https://github.com/antfu/skills --skill vue

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Vue

Based on Vue 3.5, generated at 2026-09-25. Always use Composition API with <script setup lang="ts">.

Preferences

Prefer TypeScript over JavaScript

Prefer <script setup lang="ts"> over <script>

For performance, prefer shallowRef over ref if deep reactivity is not needed

Always use Composition API over Options API

Discourage using Reactive Props Destructure

Core

Topic	Description	Reference
Script Setup & Macros	, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	script-setup-macros
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis

Features

Topic	Description	Reference
Built-in Components & Directives	Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives	advanced-patterns

Quick Reference

Component Template

<script setup lang="ts">

import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{

  title: string

  count?: number

}>()

const emit = defineEmits<{

  update: [value: string]

}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {

  console.log('Title changed:', newVal)

})

onMounted(() => {

  console.log('Component mounted')

})

</script>

<template>

  <div>{{ title }} - {{ doubled }}</div>

</template>

Key Imports

// Reactivity

import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers

import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle

import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities

import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

vue