vue-composition-api

What problem does it solve?

This Skill provides structured guidance for applying Vue 3's Composition API to build maintainable components, covering the patterns for script setup, refs, reactive state, watcher logic, and lifecycle hooks.

Core Features & Use Cases

• Script Setup (Preferred): Showcases how to use script setup with defineProps and defineEmits, and practical typing strategies.
• Refs vs Reactive: Explains when to use ref vs reactive for primitives and objects, and how to access values in template vs script.
• Composables Pattern: Demonstrates creating reusable logic via composables that expose reactive state and derived values.
• Watchers & Lifecycle: Covers watch, watchEffect, and lifecycle hooks like onMounted and onUnmounted for side effects.
• Provide/Inject, Template Refs: Includes dependency injection patterns and template ref usage for DOM access.

Quick Start

Create a Vue 3 component using the script setup pattern to declare props, emits, and reactive state, then compose reusable logic with a basic composable.