One-click install
npx skills add https://github.com/majedsiefalnasr/bunyan-app-cursor --skill vue-majedsiefalnasr
Or copy as Structured Prompt for Agent
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.