Build Vue 3 components with TypeScript and Composition API, a way to organize component logic. Define inputs, events, and two-way bindings, manage reactive data, and use built-in components for transitions and state preservation.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
Based on Vue 3.5, generated at 2026-09-25. 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'
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Set up JavaScript and TypeScript projects using Anthony Fu’s conventions for code organization, development tools, and package publishing. Establish shared checks for formatting, types, unused code, and tests before committing changes.
中文简介正在准备中。当前显示英语简介。
Create a GitHub pull request from the current branch with a structured title, a clear explanation of behavior changes, and recorded check results. For UI changes, attach before-and-after screenshots so reviewers can assess the visual differences.
中文简介正在准备中。当前显示英语简介。
Build and configure web servers with Nitro, including request handlers, caching, storage, and scheduled tasks. The skill also guides deployment to supported runtimes and platforms, plus migration from Nitro v2 to v3.
中文简介正在准备中。当前显示英语简介。
Develop Vue web applications with Nuxt, covering pages, data fetching, shared state, and server API routes. Configure rendering on the server or in the browser, and prepare deployment settings for supported platforms.
中文简介正在准备中。当前显示英语简介。
Organize shared data and update logic in Vue apps using Pinia stores, containers for application state. The skill guides store definitions, reactive data access, communication between stores, testing, and integration with Nuxt and server-side rendering.
中文简介正在准备中。当前显示英语简介。
Manage Node.js dependencies with pnpm, from installing packages to coordinating multiple projects in one workspace. The skill covers shared version settings, third-party package patches, dependency overrides, and consistent installation procedures for automated build environments.
中文简介正在准备中。当前显示英语简介。