Vue

by antfue53a142a2420No license5.9K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 8 days ago

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.

Instructions onlySoftware Development

AI-generated overview

Reference guidance for writing Vue 3 components with the Composition API, script setup macros, reactivity and built-in components.

What it does: Provides a Vue 3.5 reference covering the Composition API, script setup macros such as defineProps, defineEmits and defineModel, the reactivity system, watchers, lifecycle hooks and built-in components. It includes preference rules, a component template, key import lists and links to bundled reference documents on macros, core APIs and advanced patterns. The deliverable is written guidance and code examples rather than generated files.
When to use it: Use when writing or reviewing Vue single-file components, especially with script setup and TypeScript. Also useful when working with defineProps, defineEmits, defineModel, watchers, or Transition, Teleport, Suspense and KeepAlive.
Requirements: No scripts; instructions and reference markdown files only. The agent needs no packages, credentials or network access, though the guidance targets Vue 3.5 and TypeScript projects.

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	`<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	script-setup-macros [blocked]
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis [blocked]

Features

Quick Reference

Component Template

vue

<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>

<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

// Reactivityimport { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchersimport { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycleimport { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilitiesimport { nextTick, defineComponent, defineAsyncComponent } from 'vue'

// Reactivityimport { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
// Watchersimport { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
// Lifecycleimport { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// Utilitiesimport { nextTick, defineComponent, defineAsyncComponent } from 'vue'

Source and attribution

Source:antfu/skillsinskills/vueat commite53a142

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Vue

Vue

Preferences

Core

Features

Quick Reference

Component Template

Key Imports

Source and attribution

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api