AutoGineer
Generated banner for Vue
Generated logo for Vue

Vue

Anthony FuCommunityCreated by Anthony Fu

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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.
— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured reference for building modern Vue 3 applications. It emphasizes the use of the Composition API and script setup syntax, offering guidance on reactivity primitives, lifecycle hooks, and built-in components. It covers essential patterns for managing component state, side effects, and DOM interactions, ensuring developers follow current best practices for performance and maintainability.

What it does

  • Provides syntax patterns for script setup macros like defineProps, defineEmits, and defineModel.
  • Explains the reactivity system including ref, shallowRef, computed, and watch.
  • Details the usage of built-in components such as Transition, Teleport, Suspense, and KeepAlive.
  • Outlines lifecycle hooks and their appropriate use cases within components.
  • Offers guidance on effect scopes and composable patterns for managing reactive state.
  • Includes quick reference templates for standard component structures.

When to use it

  • When developing Vue 3 single-file components using the Composition API.
  • When implementing complex reactivity or state management within a component.
  • When handling component animations, portal rendering, or async loading states.
  • When optimizing component performance using shallow reactivity or specific lifecycle management.
  • When standardizing code structure across a Vue project.

Advantages

  • Promotes consistent use of the modern Composition API and TypeScript.
  • Provides clear performance optimization strategies like shallowRef.
  • Simplifies complex tasks like DOM teleportation and async component handling.
  • Encourages clean code through standardized script setup macros.
  • Offers a centralized reference for Vue 3.5+ features.

Usage examples

“How do I define props and emits in a Vue 3 script setup component?”
The agent provides a code snippet using defineProps and defineEmits within a script setup block, demonstrating type-safe property and event definitions.
“Show me how to use Teleport to render a modal in the body.”
The agent generates a template example using the Teleport component with the to=body attribute to move content to the document root.
“What is the difference between ref and shallowRef?”
The agent explains that ref provides deep reactivity while shallowRef only tracks changes to the .value assignment, recommending shallowRef for performance optimization.
“How can I watch a prop for changes in Vue 3?”
The agent provides a watch function example that monitors a getter for the specific prop, including configuration options like immediate execution.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/antfu/vue/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip vue.zip -d .agents/skills

Documentation by Anthony Fu

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

TopicDescriptionReference
Script Setup & Macros<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, genericsscript-setup-macros
Reactivity & Lifecycleref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composablescore-new-apis

Features

TopicDescriptionReference
Built-in Components & DirectivesTransition, Teleport, Suspense, KeepAlive, v-memo, custom directivesadvanced-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'

Files

references/script-setup-macros.md

name: script-setup-macros description: Vue 3 script setup syntax and compiler macros for defining props, emits, models, and more

Script Setup & Macros

<script setup> is the recommended syntax for Vue SFCs with Composition API. It provides better runtime performance and IDE type inference.

Basic Syntax

<script setup lang="ts">
// Top-level bindings are exposed to template
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <button @click="increment">{{ count }}</button>
  <MyComponent />
</template>

defineProps

Declare component props with full TypeScript support.

// Type-based declaration (recommended)
const props = defineProps<{
  title: string
  count?: number
  items: string[]
}>()

// Imported/aliased interfaces are supported (relative import, path alias like
// @/types, or a node_modules dependency). Requires TypeScript as a peer dep.
import type { Props } from './types'
const props = defineProps<Props>()

// With defaults (Vue 3.5+)
const { title, count = 0 } = defineProps<{
  title: string
  count?: number
}>()

// With defaults (Vue 3.4 and below)
const props = withDefaults(defineProps<{
  title: string
  items?: string[]
}>(), {
  items: () => []  // Use factory for arrays/objects
})

defineEmits

Declare emitted events with typed payloads.

// Named tuple syntax (recommended)
const emit = defineEmits<{
  update: [value: string]
  change: [id: number, name: string]
  close: []
}>()

emit('update', 'new value')
emit('change', 1, 'name')
emit('close')

defineModel

Two-way binding prop consumed via v-model. Available in Vue 3.4+.

// Basic usage - creates "modelValue" prop
const model = defineModel<string>()
model.value = 'hello'  // Emits "update:modelValue"

// Named model - consumed via v-model:name
const count = defineModel<number>('count', { default: 0 })

// With modifiers
const [value, modifiers] = defineModel<string>()
if (modifiers.trim) {
  // Handle trim modifier
}

// With transformers
const [value, modifiers] = defineModel({
  get(val) { return val?.toLowerCase() },
  set(val) { return modifiers.trim ? val?.trim() : val }
})

Parent usage:

<Child v-model="name" />
<Child v-model:count="total" />
<Child v-model.trim="text" />

defineExpose

Explicitly expose properties to parent via template refs. Components are closed by default.

import { ref } from 'vue'

const count = ref(0)
const reset = () => { count.value = 0 }

defineExpose({
  count,
  reset
})

Parent access:

const childRef = ref<{ count: number; reset: () => void }>()
childRef.value?.reset()

defineOptions

Declare component options without a separate <script> block. Available in Vue 3.3+.

defineOptions({
  inheritAttrs: false,
  name: 'CustomName'
})

defineSlots

Provide type hints for slot props. Available in Vue 3.3+.

const slots = defineSlots<{
  default(props: { item: string; index: number }): any
  header(props: { title: string }): any
}>()

Generic Components

Declare generic type parameters using the generic attribute.

<script setup lang="ts" generic="T extends string | number">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

Multiple generics with constraints:

<script setup lang="ts" generic="T, U extends Record<string, T>">
import type { Item } from './types'
defineProps<{
  data: U
  key: keyof U
}>()
</script>

Local Custom Directives

Use vNameOfDirective naming convention.

const vFocus = {
  mounted: (el: HTMLElement) => el.focus()
}

// Or import and rename
import { myDirective as vMyDirective } from './directives'
<template>
  <input v-focus />
</template>

Top-level await

Use await directly in <script setup>. The component becomes async and must be used with <Suspense>.

<script setup lang="ts">
const data = await fetch('/api/data').then(r => r.json())
</script>

<!-- Source references: - https://vuejs.org/api/sfc-script-setup.html -->

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Anthony Fu
Publisher
Anthony Fu (Community)
Source
antfu/skills · skills/vue · commit f63e9ec
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthony Fu or Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vue.zip