Vue Composition API

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

Module 2: Reactivity Deep Dive

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

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 }
}

Module 4: Provide/Inject Patterns

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

Module 5: Advanced Patterns

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

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

Debug Steps

1. Verify composable returns refs (not raw values)
2. Check provide/inject key matches
3. Confirm lifecycle hooks are in setup
4. 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