vue

Create Vue 3 single-file components using script setup and Composition API.

Updated Apr 8, 2026

Search Tags:#vue #vue3 #composables #props #composition-api #script-setup

Ready to run

npx skills add https://github.com/rafasoares/rafasoares.com --skill vue-rafasoares

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/rafasoares/rafasoares.com/tree/main/.agents/skills/vue
Command: npx skills add https://github.com/rafasoares/rafasoares.com --skill vue-rafasoares

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue 3 + Composition API and script setup streamline building scalable, maintainable user interfaces by reducing boilerplate and improving type inference in SFCs.

Core Features & Use Cases

Script Setup & Macros: concise prop/emit definitions and better IDE support for script setup.
Reactivity & Lifecycle: core APIs like ref, computed, watch, and lifecycle hooks used in real components.
Built-in Components: transitions, teleport, suspense, and keep-alive for common UI patterns.

Quick Start

Create a Vue 3 component using <script setup> with defineProps and defineEmits, and render a simple template.

Frequently Asked Questions about vue

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

FAQPage Schema

How do I build Vue 3 components using the Composition API and script setup?▼

Build Vue 3 components by using script setup to define props and emits with macros, reducing boilerplate while improving type inference for single-file components. This approach streamlines scalable UI development.

What is the best way to define props and emits in Vue 3 SFCs?▼

The best way to define props and emits in Vue 3 SFCs is using script setup macros like defineProps and defineEmits. This concise approach provides better IDE support and enforces best practices.

How does reactivity work with ref, computed, and watch in the Composition API?▼

Reactivity in the Composition API works by using ref for primitive values, computed for derived state, and watch to react to data changes. These core APIs replace Options API methods for lifecycle and state management.

Can I use built-in components like Transition, Teleport, and Suspense with script setup?▼

Yes, you can use built-in components like Transition, Teleport, Suspense, and KeepAlive directly with script setup. They integrate seamlessly to handle common UI patterns like asynchronous loading and component caching.

Does this approach support mixing Options API with composables and props?▼

Yes, this approach supports mixing Options API with composables and props. It enforces best practices when combining these patterns, ensuring reactivity and lifecycle hooks function correctly within Vue 3 components.

When should I use KeepAlive and Suspense in Vue 3 component development?▼

Use KeepAlive and Suspense in Vue 3 component development when you need to cache component state or handle asynchronous dependencies. These built-in components manage common UI patterns for transitions and loading states.