Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.0 KiB

Raw Blame History

name, description, metadata

name

description

metadata

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.

author	version	source
Anthony Fu	2026.1.31	Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills

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

3.0 KiB Raw Blame History

Vue