vue

Generate Vue 3 components with typed props, emits, and composables.

Updated Apr 10, 2026

Search Tags:#typescript #vue #composables #composition-api #script-setup #defineprops #defineemits

Ready to run

npx skills add https://github.com/majedsiefalnasr/bunyan-app-cursor --skill vue-majedsiefalnasr

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue 3 Composition API patterns help developers write scalable, maintainable Vue code by encouraging composables, setup script patterns, and consistent props/emit usage across components.

Core Features & Use Cases

Component Template: demonstrates script setup with typed props and emits for consistent component structure.
Composable Pattern: shows a reusable function that fetches data and manages loading and error state with proper typing.
Reactive Destructuring: illustrates extracting reactive props with defineProps so values stay reactive refs.
Use Cases: building modular components and reusable logic across Vue 3 projects.

Quick Start

Create a new component using script setup with typed props, then implement a composable to fetch data and expose it to the component.

Frequently Asked Questions about vue

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

FAQPage Schema

How do I define typed props and emits in Vue 3 script setup?▼

You define typed props and emits in Vue 3 script setup using TypeScript with the defineProps and defineEmits compiler macros to ensure consistent component structure and type safety.

What is the best way to create reusable data-fetching logic in Vue 3?▼

The best way to create reusable data-fetching logic in Vue 3 is by extracting it into a composable function that manages loading and error states while returning properly typed reactive data.

How do I destructure reactive props in Vue 3 without losing reactivity?▼

You destructure reactive props in Vue 3 without losing reactivity by using defineProps, which preserves the extracted values as reactive refs throughout your component logic.

When should I use Vue 3 Composition API patterns over the Options API?▼

Use Vue 3 Composition API patterns when building modular components and reusable logic across multiple pages, as it encourages scalable and maintainable code structures through composables.

Does this Vue 3 composable pattern work with TypeScript?▼

Yes, this Vue 3 composable pattern works seamlessly with TypeScript, demonstrating best practices for script setup by providing proper typing for props, emits, and data-fetching logic.