vue-composition-api

spjoshis's avatarfrom spjoshis

Master Vue 3 Composition API with setup, ref, reactive, computed, watch, and composables for building scalable reactive applications.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides expert-level assistance in mastering the Vue 3 Composition API, enabling developers to build scalable, type-safe, and highly reactive web applications. It streamlines the implementation of core concepts like script setup, reactive state management, and custom composables while ensuring adherence to modern frontend development best practices and performance optimization.

Use Cases

  • Refactoring Legacy Code: Efficiently migrating Vue 2 Options API components to the Vue 3 Composition API to improve code maintainability and logic reuse.
  • Custom Composable Development: Designing and implementing reusable logic patterns, such as data fetching or event listeners, into clean and testable composables.
  • Reactive State Architecture: Building complex application states using ref and reactive while maintaining full TypeScript support and reactivity.
  • Performance Tuning: Leveraging computed properties and watchEffect to optimize component rendering and handle side effects in high-performance web apps.
namevue-composition-api
descriptionMaster Vue 3 Composition API with setup, ref, reactive, computed, watch, and composables for building scalable reactive applications.

Vue Composition API

Master Vue 3's Composition API for building scalable, reusable, and type-safe reactive applications.

Core Concepts

Script Setup

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>{{ count }} x 2 = {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Composables

// composables/useFetch.ts
export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const loading = ref(true)

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { data, error, loading, refetch: fetchData }
}

Reactive State

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

// Destructure while maintaining reactivity
const { count, message } = toRefs(state)

Best Practices

  1. Use ref for primitives, reactive for objects
  2. Extract reusable logic into composables
  3. Use TypeScript for type safety
  4. Implement proper cleanup in onUnmounted
  5. Use computed for derived state
  6. Leverage watchEffect for side effects

Resources