vue

Write Vue 3 components using the Composition API and script setup.

13|Updated Feb 4, 2026

Search Tags:#typescript #frontend #vue #reactivity #composition-api #script-setup #sfc

Ready to run

npx skills add https://github.com/abeldotam/bmad-viewer --skill vue-abeldotam

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue developers often struggle to structure components with the Composition API and script setup, leading to inconsistent patterns and maintenance challenges.

Core Features & Use Cases

Guidance on defineProps, defineEmits, defineModel, and defineExpose for strongly typed single-file components.
Best practices for Composition API usage, reactivity patterns, and integration with built-in components like Transition, Teleport, Suspense, and KeepAlive.
Use cases include building reusable UI components, starter templates, and comprehensive documentation references.

Quick Start

Create a minimal Vue 3 single-file component using the script setup syntax and the Composition API to begin experimenting.

Frequently Asked Questions about vue

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

FAQPage Schema

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

To write Vue 3 components using the Composition API and script setup, use the `<script setup>` syntax in your single-file components to define reactive patterns and component logic concisely. This approach provides a cleaner structure for maintainable SFCs.

What is the best way to structure strongly typed single-file components in Vue 3?▼

The best way to structure strongly typed single-file components in Vue 3 is by using compiler macros like defineProps, defineEmits, defineModel, and defineExpose within your script setup block to enforce strict typing and consistent reactivity patterns.

Does Vue 3 Composition API work with built-in components like Teleport and Suspense?▼

Yes, Vue 3 Composition API works seamlessly with built-in components like Teleport, Suspense, Transition, and KeepAlive. You can integrate these built-in features within your script setup for advanced UI rendering and asynchronous component handling.

When should I use defineModel instead of defineEmits in Vue 3?▼

Use defineModel instead of defineEmits in Vue 3 when you need two-way binding for form inputs or child components. defineModel simplifies reactive state synchronization, whereas defineEmits is better suited for one-way event notifications to parent components.

How does defineExpose work with reactivity patterns in Vue 3 script setup?▼

defineExpose works with reactivity patterns in Vue 3 script setup by explicitly exposing specific properties or methods from a child component to its parent. This allows parent components to access selected reactive state without exposing the entire component instance.