Vue 3 Composition API, macros de script setup, sistema de reactividad y componentes integrados como Transition, Teleport, Suspense y KeepAlive.
Reemplaza a: Vue 2 Options API
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
53 tok en reposo
17 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add antfu/skills --skill vue --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
Based on Vue 3.5. Always use Composition API with
<script setup lang="ts">.
<script setup lang="ts"> over <script>shallowRef over ref if deep reactivity is not needed| 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 |
| Topic | Description | Reference |
|---|---|---|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | advanced-patterns |
<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>
// 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'
Reproducido de antfu/skills bajo licencia MIT. Leer esta página en markdown.
5 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 19 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack skills entero y su comando de instalación
Herramientas y convenciones de Anthony Fu para proyectos JavaScript/TypeScript: configuración de ESLint, monorepos y publicación de librerías.
Convenciones de diseño estilo antfu: tokens semánticos basados en clases con UnoCSS para light/dark, más reglas anti-slop y de micro-interacción para devtools y landing pages.
Nitro es el toolkit de servidor agnóstico de framework (usado por Nuxt) para construir y desplegar servidores web en cualquier lugar: routing, config, caching, tasks, websockets y despliegue en Node/Bun/Deno/Cloudflare/Vercel.
Framework full-stack Vue con SSR, auto-imports y routing basado en archivos. Úsalo para apps Nuxt, server routes, useFetch, middleware o hybrid rendering.
Gestor de paquetes de Node.js con resolución estricta de dependencias. Úsalo para comandos de pnpm, pnpm-workspace.yaml, catalogs, patches, overrides, config dependencies o el global virtual store.
Crea y presenta slidedecks web para desarrolladores con Slidev, usando Markdown, componentes Vue, resaltado de código, animaciones y funciones interactivas.
Optimiza la configuración del contexto del agente. Úsalo al iniciar una sesión nueva, cuando la calidad del agente empeora, al cambiar de tarea o al configurar archivos de reglas y contexto de un proyecto.
Gestiona la baja y migración de sistemas: retirar APIs o funciones antiguas, migrar usuarios a una nueva implementación, migrar un esquema de BD en producción (expand/contract) sin downtime, o decidir si mantener o retirar código.
Estructura las prácticas de flujo de trabajo en git: commits, ramas, resolver conflictos, dividir trabajo sin confirmar en commits atómicos, PRs, push, trabajo en paralelo, releases, versión semántica, tags y changelog.
