Vue

vue

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.

antfu/skills·34.9Kinstalls5.9KstarsBackend & APIs

SKILL.md

Full skill instructions

Vue

Based on Vue 3.5. 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
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis

Features

Topic	Description	Reference
Built-in Components & 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'

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/antfu/skills --skill vue

View on GitHub

vue

More Backend & APIs skills

View all

Backend & APIs

supabase-postgres-best-practices

Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.

2.7K 431.1K

View

Backend & APIs

prisma-database-setup

Step-by-step configuration guides for Prisma ORM across PostgreSQL, MySQL, SQLite, MongoDB, SQL Server, CockroachDB, and Prisma Postgres.

67 336.1K

View

Backend & APIs

prisma-client-api

Complete Prisma Client API reference for model queries, CRUD operations, filtering, relations, and transactions.

67 336.1K

View

Backend & APIs

prisma-cli

Complete reference for Prisma CLI commands, options, and workflows across setup, migrations, and database operations.

67 333.6K

View

Backend & APIs

prisma-postgres

prisma postgres

67 328.6K

View

Backend & APIs

prisma-driver-adapter-implementation

prisma driver adapter implementation

67 323.5K

View

Backend & APIs

prisma-upgrade-v7

prisma upgrade v7

67 323.2K

View

Backend & APIs

prisma-postgres-setup

prisma postgres setup

67 322.9K

View

Backend & APIs

supabase

Handles the full Supabase workflow from schema changes to deployment, with built-in security guardrails that catch common traps like RLS...

2.7K 308.9K

View

Backend & APIs

neon-postgres

Comprehensive guides and best practices for Neon Serverless Postgres, covering setup, connection methods, authentication, and platform APIs.

98 216.2K

View

Backend & APIs

firebase-basics

462 164.9K

View

Backend & APIs

firebase-auth-basics

Guide for setting up and using Firebase Authentication. Use this skill when the user's app requires user sign-in, user management, or secure data access using auth rules.

462 163.8K

View