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.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.