Vue 3 Composition API coding guide - **name_fr:** Guide de code Vue 3 Composition API - **tl_en:** Write modern Vue 3.5 single-file components with script setup, macros, reactivity APIs and built-in components - **tl_fr:** Écrire des composants Vue 3.5 modernes en script setup, macros, API de réactivité et composants intégrés - **creator:** @antfu - **type:** Agent skill - **url:** https://github.com/antfu/skills - **cat:** Frontend - **kws:** vue, vue 3, composition api, script setup, frontend, typescript, reactivity, sfc - **license:** MIT **Description EN:** Curated by Skill Harbor — Anthony Fu's Vue 3 skill (the creator of VueUse and a Vue core contributor): an opinionated agent guide to modern Vue 3.5, always Composition API with `<script setup lang="ts">`. Covers script-setup macros (defineProps, defineEmits, defineModel, defineExpose), the reactivity system (ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks), and built-in components and directives (Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives), with a copy-paste component template and key imports. Clear taste rules included: prefer TypeScript, prefer shallowRef when deep reactivity is not needed, always Composition over Options API, discourage reactive props destructure. Honest caveat: generated from the Vue.js docs at 2026-09-25 — verify macro and API details against the current Vue docs if your target version differs. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — le skill Vue 3 d'Anthony Fu (créateur de VueUse et contributeur cœur de Vue) : un guide agentif tranché du Vue 3.5 moderne, toujours en Composition API avec `<script setup lang="ts">`. Couvre les macros de script setup (defineProps, defineEmits, defineModel, defineExpose), le système de réactivité (ref, shallowRef, computed, watch, watchEffect, effectScope, hooks de cycle de vie) et les composants et directives intégrés (Transition, Teleport, Suspense, KeepAlive, v-memo, directives personnalisées), avec un modèle de composant prêt à coller et les imports clés. Règles de goût claires incluses : préférer TypeScript, préférer shallowRef quand la réactivité profonde n'est pas nécessaire, toujours la Composition API plutôt que l'Options API, éviter la déstructuration réactive des props. Bémol honnête : généré depuis la doc Vue.js au 2026-09-25 — vérifiez macros et API contre la doc Vue actuelle si votre version cible diffère. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a Vue 3 project (Vue 3.5 recommended) Install "Vue 3 Composition API coding guide" for me. Anthony Fu's opinionated agent guide to modern Vue 3.5, always Composition API with script setup and TypeScript: script-setup macros, reactivity APIs (ref, shallowRef, computed, watch, lifecycle hooks), built-in components and directives (Transition, Teleport, Suspense, KeepAlive, v-memo), with a component template and key imports. Repository: https://github.com/antfu/skills/blob/main/skills/vue/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "vue". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. pin your Vue version if older than 3.5). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet Vue 3 (Vue 3.5 recommandé) Installe-moi « Guide de code Vue 3 Composition API ». Le guide agentif tranché d'Anthony Fu du Vue 3.5 moderne, toujours en Composition API avec script setup et TypeScript : macros de script setup, API de réactivité (ref, shallowRef, computed, watch, hooks de cycle de vie), composants et directives intégrés (Transition, Teleport, Suspense, KeepAlive, v-memo), avec un modèle de composant et les imports clés. Dépôt : https://github.com/antfu/skills/blob/main/skills/vue/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers auxiliaires éventuels) depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; ARRÊTE-TOI sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « vue ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. figer votre version de Vue si elle est antérieure à 3.5). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Write modern Vue 3.5 single-file components with script setup, macros, reactivity APIs and built-in components - **tl_fr:** Écrire des composants Vue 3.5 modernes en script setup, macros, API de réactivité et composants intégrés - **creator:** @antfu - **type:** Agent skill - **url:** https://github.com/antfu/skills - **cat:** Frontend - **kws:** vue, vue 3, composition api, script setup, frontend, typescript, reactivity, sfc - **license:** MIT **Description EN:** Curated by Skill Harbor — Anthony Fu's Vue 3 skill (the creator of VueUse and a Vue core contributor): an opinionated agent guide to modern Vue 3.5, always Composition API with `<script setup lang="ts">`. Covers script-setup macros (defineProps, defineEmits, defineModel, defineExpose), the reactivity system (ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks), and built-in components and directives (Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives), with a copy-paste component template and key imports. Clear taste rules included: prefer TypeScript, prefer shallowRef when deep reactivity is not needed, always Composition over Options API, discourage reactive props destructure. Honest caveat: generated from the Vue.js docs at 2026-09-25 — verify macro and API details against the current Vue docs if your target version differs. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — le skill Vue 3 d'Anthony Fu (créateur de VueUse et contributeur cœur de Vue) : un guide agentif tranché du Vue 3.5 moderne, toujours en Composition API avec `<script setup lang="ts">`. Couvre les macros de script setup (defineProps, defineEmits, defineModel, defineExpose), le système de réactivité (ref, shallowRef, computed, watch, watchEffect, effectScope, hooks de cycle de vie) et les composants et directives intégrés (Transition, Teleport, Suspense, KeepAlive, v-memo, directives personnalisées), avec un modèle de composant prêt à coller et les imports clés. Règles de goût claires incluses : préférer TypeScript, préférer shallowRef quand la réactivité profonde n'est pas nécessaire, toujours la Composition API plutôt que l'Options API, éviter la déstructuration réactive des props. Bémol honnête : généré depuis la doc Vue.js au 2026-09-25 — vérifiez macros et API contre la doc Vue actuelle si votre version cible diffère. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a Vue 3 project (Vue 3.5 recommended) Install "Vue 3 Composition API coding guide" for me. Anthony Fu's opinionated agent guide to modern Vue 3.5, always Composition API with script setup and TypeScript: script-setup macros, reactivity APIs (ref, shallowRef, computed, watch, lifecycle hooks), built-in components and directives (Transition, Teleport, Suspense, KeepAlive, v-memo), with a component template and key imports. Repository: https://github.com/antfu/skills/blob/main/skills/vue/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "vue". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. pin your Vue version if older than 3.5). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet Vue 3 (Vue 3.5 recommandé) Installe-moi « Guide de code Vue 3 Composition API ». Le guide agentif tranché d'Anthony Fu du Vue 3.5 moderne, toujours en Composition API avec script setup et TypeScript : macros de script setup, API de réactivité (ref, shallowRef, computed, watch, hooks de cycle de vie), composants et directives intégrés (Transition, Teleport, Suspense, KeepAlive, v-memo), avec un modèle de composant et les imports clés. Dépôt : https://github.com/antfu/skills/blob/main/skills/vue/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers auxiliaires éventuels) depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; ARRÊTE-TOI sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « vue ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. figer votre version de Vue si elle est antérieure à 3.5). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Version: