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

LICENSE

MIT License

Copyright (c) 2025-PRESENT Anthony Fu <https://github.com/antfu>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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