Deft
Ask AI

Search

Search skills, authors and topics

antfu / skills

vue

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

View sourceVueInteraction

Install

npx skills add https://github.com/antfu/skills --skill vue
metadata
author: Anthony Fu version: "2026.9.25" source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills

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 [blocked]
Reactivity & Lifecycleref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composablescore-new-apis [blocked]

Features

TopicDescriptionReference
Built-in Components & DirectivesTransition, Teleport, Suspense, KeepAlive, v-memo, custom directivesadvanced-patterns [blocked]

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