Vue Composition API Skill Skill

Vue Composition API Skill

Production-grade skill for mastering Vue's Composition API and building reusable, scalable logic.

Purpose

Single Responsibility: Teach composable design patterns, advanced reactivity utilities, and modern Vue 3 composition techniques.

Parameter Schema

interface CompositionAPIParams {
  topic: 'composables' | 'reactivity' | 'script-setup' | 'provide-inject' | 'all';
  level: 'beginner' | 'intermediate' | 'advanced';
  context?: {
    existing_knowledge?: string[];
    use_case?: string;
  };
}

Learning Modules

Module 1: Script Setup Basics

Prerequisites: vue-fundamentals
Duration: 1-2 hours
Outcome: Use <script setup> effectively

| Topic | Concept | Exercise | |-------|---------|----------| | Syntax | <script setup> shorthand | Convert Options API | | defineProps | Type-safe props | Typed component | | defineEmits | Type-safe events | Event handling | | defineExpose | Public API | Component ref access |

Module 2: Reactivity Deep Dive

Prerequisites: Module 1
Duration: 3-4 hours
Outcome: Master all reactivity utilities

| Utility | When to Use | Exercise | |---------|-------------|----------| | ref() | Primitives | Counter state | | reactive() | Objects | Form state | | readonly() | Immutable exposure | Store state | | toRef() | Single prop reference | Props handling | | toRefs() | Destructure reactive | Store destructure | | shallowRef() | Large objects | Performance opt | | customRef() | Custom behavior | Debounced input |

Module 3: Composables Architecture

Prerequisites: Modules 1-2
Duration: 4-5 hours
Outcome: Design production composables

Composable Anatomy:

// composables/useFeature.ts
export function useFeature(options?: Options) {
  // 1. State (refs)
  const state = ref(initialValue)

  // 2. Computed (derived)
  const derived = computed(() => transform(state.value))

  // 3. Methods (actions)
  function action() { /* ... */ }

  // 4. Lifecycle (setup/cleanup)
  onMounted(() => { /* setup */ })
  onUnmounted(() => { /* cleanup */ })

  // 5. Return (public API)
  return { state: readonly(state), derived, action }
}

| Exercise | Composable | Features | |----------|------------|----------| | Data Fetching | useFetch | loading, error, refetch | | Local Storage | useStorage | sync, parse, stringify | | Media Query | useMediaQuery | reactive breakpoints | | Debounce | useDebounce | value, delay | | Intersection | useIntersection | observer, cleanup |

Module 4: Provide/Inject Patterns

Prerequisites: Module 3
Duration: 2 hours
Outcome: Share state across components

| Pattern | Use Case | Example | |---------|----------|---------| | Theme Provider | App-wide theming | Dark/light mode | | Auth Context | User state | Auth provider | | Config Injection | Feature flags | Runtime config | | Form Context | Multi-step forms | Form validation |

Module 5: Advanced Patterns

Prerequisites: Modules 1-4
Duration: 3-4 hours
Outcome: Expert-level composition

| Pattern | Description | Exercise | |---------|-------------|----------| | Composable Composition | Composables using composables | useAuth + useFetch | | State Machines | Finite state composables | useWizard | | Plugin Pattern | Extend with plugins | useLogger plugin | | Async Composables | Handle async setup | useAsyncData |

Validation Checkpoints

Beginner Checkpoint

[ ] Convert Options API to Composition
[ ] Use ref and computed
[ ] Write basic composable
[ ] Use defineProps/Emits

Intermediate Checkpoint

[ ] Build reusable composable
[ ] Implement cleanup in composable
[ ] Use provide/inject correctly
[ ] Handle async in composables

Advanced Checkpoint

[ ] Design composable library
[ ] Compose multiple composables
[ ] Implement SSR-safe composables
[ ] Test composables in isolation

Retry Logic

const skillConfig = {
  maxAttempts: 3,
  backoffMs: [1000, 2000, 4000],
  onFailure: 'provide_simpler_example'
}

Observability

tracking:
  - event: composable_created
    data: [name, complexity_score]
  - event: pattern_learned
    data: [pattern_name, exercises_completed]
  - event: skill_mastery
    data: [modules_completed, project_quality]

Troubleshooting

Common Issues

| Issue | Cause | Solution | |-------|-------|----------| | Lost reactivity | Destructured reactive | Use toRefs() | | inject undefined | Missing provider | Check tree hierarchy | | Memory leak | No cleanup | Add onUnmounted cleanup | | Type errors | Wrong generics | Specify type params |

Debug Steps

Verify composable returns refs (not raw values)
Check provide/inject key matches
Confirm lifecycle hooks are in setup
Use Vue Devtools to inspect state

Unit Test Template

import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('initializes with default value', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })

  it('increments correctly', () => {
    const { count, increment } = useCounter()
    increment()
    expect(count.value).toBe(1)
  })

  it('resets to initial value', () => {
    const { count, increment, reset } = useCounter(5)
    increment()
    increment()
    reset()
    expect(count.value).toBe(5)
  })
})

Usage

Skill("vue-composition-api")

Related Skills

vue-fundamentals - Prerequisite
vue-pinia - State management
vue-typescript - Type-safe composables

Resources

Composition API Guide
VueUse - Collection of composables
Vue Patterns

Agent Skills: Vue Composition API Skill

Skill Files