vue

Vue 3 Composition API with script setup, reactivity system, and built-in components for single-file components. Use <script setup lang="ts"> with TypeScript; leverage defineProps , defineEmits , defineModel , and other macros for type-safe component APIs Core reactivity includes ref , shallowRef , computed , watch , watchEffect , and lifecycle hooks; prefer shallowRef when deep reactivity isn't needed Built-in components cover Transition , Teleport , Suspense , KeepAlive , and directives like v-memo for advanced patterns Always use Composition API over Options API; avoid reactive props destructuring to maintain reactivity

INSTALLATION
npx skills add https://github.com/antfu/skills --skill vue
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

Features

Topic

Description

Reference

Built-in Components &#x26; Directives

Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives

advanced-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'
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card