vue

Provide Vue 3 Composition API syntax for SFCs, props, emits, and reactivity.

Updated Jan 22, 2026

Search Tags:#components #vue #reactivity #sfc #composition api #script setup

Ready to run

npx skills add https://github.com/cooker/wx-mp-article --skill vue-cooker

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/cooker/wx-mp-article/tree/main/.cursor/skills/vue
Command: npx skills add https://github.com/cooker/wx-mp-article --skill vue-cooker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and quick reference for developing modern Vue.js applications using the Composition API and Single File Components (SFCs).

Core Features & Use Cases

Composition API: Leverage ref, computed, watch, and lifecycle hooks for organized and reusable logic.
<script setup>: Utilize the concise and performant SFC syntax with built-in macros like defineProps, defineEmits, and defineModel.
Advanced Patterns: Understand and implement Transition, Teleport, Suspense, and KeepAlive for enhanced user experiences.
Use Case: When building a new Vue 3 component, use this Skill to quickly recall the correct syntax for defining props, handling emits, and implementing reactivity with <script setup lang="ts">.

Quick Start

Use the vue skill to generate a basic Vue 3 component using <script setup lang="ts"> with a reactive counter and an increment function.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I define props and emits in a Vue 3 component using script setup?▼

To define props and emits in Vue 3 script setup, use the built-in compiler macros `defineProps` and `defineEmits` directly within the `<script setup>` block without importing them. This provides concise syntax for component input and output binding.

What's the best way to manage reactivity in Vue 3 Composition API?▼

The best way to manage reactivity in Vue 3 Composition API is using core primitives like `ref` for reactive values and `computed` for derived state. You can combine these with watchers and lifecycle hooks to organize and reuse logic effectively.

How do I use Teleport and Transition components in Vue 3?▼

You use Vue 3 built-in components like `Transition`, `Teleport`, `Suspense`, and `KeepAlive` by wrapping your target elements within your Single File Component templates. They enhance user experience by managing animations, DOM rendering locations, and async component states.

Can I use defineModel for two-way binding in Vue 3 SFCs?▼

Yes, you can use the `defineModel` macro in Vue 3 Single File Components to establish two-way binding. It simplifies parent-child component communication by generating a reactive model reference that automatically syncs with the parent's `v-model` binding.

When should I use composable patterns in Vue 3?▼

You should use composable patterns in Vue 3 when you need to extract and reuse stateful logic across multiple components. This pattern leverages Composition API primitives and lifecycle hooks to encapsulate functionality cleanly outside of your SFCs.