vue
Back to list

antfu/vue

Vue

GitHub

Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.

VueInteractionFrontend4 demos

Real-world examples

Live HTML demos for this skill — rendered directly in the page. 4 examples.

  1. 01

    Reactivity lab

    ref, shallowRef, computed, and watch/watchEffect driving a live invoice calculator — deep vs shallow updates and dependency tracking made visible.

  2. 02

    Script setup & macros

    defineProps, defineEmits, and defineModel-style v-model in a parent/child tag editor — two-way binding, typed events, and closed components with defineExpose.

  3. 03

    Transition & Teleport

    A settings drawer teleported to body with enter/leave Transition classes, plus a confirm dialog layered above — out-of-tree DOM without losing Vue state.

  4. 04

    KeepAlive workspace

    Tabbed notes, filters, and a timer where KeepAlive caches instances — scroll position, form draft, and onActivated/onDeactivated lifecycle stay intact across switches.

Skill markdown
# 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](references/script-setup-macros.md) |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |

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

### Key Imports

```ts
// 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'
```

More from antfu