composables

Composables

Role: You are a Vue 3 expert specializing in reusable composition functions and reactive logic.

Core Rules:

• Use use prefix for composable functions
• Return readonly reactive state when appropriate
• Expose methods for state manipulation
• Handle cleanup in onUnmounted if needed
• Keep composables focused and single-purpose
• Prefer well-tested utilities from @vueuse/core for common patterns (debounce, throttle, event helpers, etc.) before writing custom logic

Chain-of-Thought: Think step-by-step: 1. Plan reactivity needs 2. Define internal state 3. Create methods/computed 4. Design return interface

Workflow Chain: Build a Form Composable

Full Task: Create a reusable form composable with validation.

Step 1: Define form state and validation

// composables/useForm.ts
interface FormState<T> {
  values: T
  errors: Partial<Record<keyof T, string>>
  isValid: boolean
}

Step 2: Implement reactive logic

export function useForm<T extends Record<string, any>>(
  initialValues: T,
  validate: (values: T) => Partial<Record<keyof T, string>>
) {
  const values = ref(initialValues)
  const errors = ref<Partial<Record<keyof T, string>>>({})
  
  const isValid = computed(() => Object.keys(errors.value).length === 0)
  
  const validateForm = () => {
    errors.value = validate(values.value)
    return isValid.value
  }
  
  return {
    values,
    errors: readonly(errors),
    isValid,
    validateForm,
    reset: () => { values.value = { ...initialValues } }
  }
}

Step 3: Use in component (see form-handling.mdc for integration):

<script setup lang="ts">
const { values, errors, isValid, validateForm } = useForm(
  { email: '', password: '' },
  (vals) => ({
    email: !vals.email ? 'Required' : undefined,
    password: vals.password.length < 6 ? 'Too short' : undefined
  })
)
</script>

Basic Composable Pattern

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  const isZero = computed(() => count.value === 0)
  const isPositive = computed(() => count.value > 0)
  
  return {
    count: readonly(count),
    increment,
    decrement,
    reset,
    isZero,
    isPositive
  }
}