Guide Vue 3 SFC development using the Composition API and script setup.
npx skills add https://github.com/WOOWOOYONG/Curl-Ticket --skill vue-woowooyong
Please help me install this Agent Skill. Skill: vue Source: https://github.com/WOOWOOYONG/Curl-Ticket/tree/main/.agents/skills/vue Command: npx skills add https://github.com/WOOWOOYONG/Curl-Ticket --skill vue-woowooyong
This Skill helps developers efficiently write Vue 3 Single File Components (SFCs) using the Composition API, leveraging modern features like <script setup> and compiler macros for cleaner, more performant code.
ref, computed, watch, and lifecycle hooks for organized stateful logic.<script setup>: Write SFCs with less boilerplate and better type inference.defineProps), emits (defineEmits), and models (defineModel).Transition, Teleport, Suspense, and KeepAlive for advanced UI patterns.ref and computed within <script setup>.Use the vue skill to define a component with a title prop and a count ref, then render a button that increments the count.
High-intent search queries and answers about installing and using this skill.
The Vue 3 Composition API replaces Options API boilerplate by using `ref` and `reactive` for state, `computed` for derived values, and `watch` for side effects, allowing you to organize component logic by feature rather than by option type.
Manage component state in Vue 3 by using `ref` or `reactive` to track reactive variables, `computed` for derived state, and `watch` to trigger side effects when dependencies change, all organized within the `<script setup>` block.
Wrap dynamic elements with `Transition` for enter/leave animations, use `Teleport` to render DOM nodes outside the component hierarchy, `KeepAlive` to cache component instances, and `Suspense` to handle asynchronous component loading states.
Yes, `<script setup>` provides better type inference for props and emits. By passing a type literal to `defineProps`, the compiler automatically generates runtime declarations while maintaining strict TypeScript integration for your component interfaces.
Use Composition API lifecycle hooks like `onMounted` or `onUnmounted` within `<script setup>` to register side effects, fetch data, or clean up event listeners at specific stages of the component's lifecycle.
Use `defineModel` to simplify two-way binding by automatically generating a `modelValue` prop and an `update:modelValue` event, reducing boilerplate compared to manually defining and syncing `defineProps` and `defineEmits`.
CloudyWingEnforce Vue 3 Composition API and script setup guidelines with TypeScript.
RuzenieGenerate Vue Single File Components and composable functions for Vue.js projects.
doanchienthangdevDevelop Vue 3 applications with Composition API, TypeScript, Pinia, and Vue Router.
quanngynxShare stateful logic across React components via render props returning JSX.