Build Smarter Vue 4 Composables with AI in 20 Minutes

// .ai/vue4-context.md
# Vue 4.0 Composition API Rules

## Key Differences from Vue 3
- Auto-unwrapping: No .value in templates or computed returns
- defineModel() replaces manual v-model handling
- Stricter TypeScript: All props need explicit types
- New lifecycle: onServerPrefetch removed, use Suspense

## Required Patterns
- Use generic types: <T extends Record<string, unknown>>
- Always export return type interfaces
- Include error boundaries in async composables
- Add JSDoc with @example blocks

## Banned Patterns
- ❌ ref() for primitive returns (use computed)
- ❌ Manual v-model emit logic
- ❌ any type usage
- ❌ Non-destructured props access

Using Vue 4.0 Composition API and the context in .ai/vue4-context.md:

Create a composable `useFetch<T>` that:
1. Accepts a URL and optional RequestInit
2. Returns { data: Ref<T | null>, error, loading, refetch }
3. Uses Vue 4 auto-unwrapping (no .value in return types)
4. Includes proper error boundaries
5. TypeScript strict mode compatible
6. Has a working @example in JSDoc

Name it useFetch.ts and follow Vue 4 conventions.

// composables/useFetch.ts
import { ref, watchEffect, type Ref } from 'vue';

export interface UseFetchReturn<T> {
  /** Auto-unwrapped data - access directly in templates */
  data: Ref<T | null>;
  error: Ref<Error | null>;
  loading: Ref<boolean>;
  refetch: () => Promise<void>;
}

/**
 * Type-safe data fetching with automatic reactivity
 * 
 * @example
 * ```vue
 * <script setup lang="ts">
 * interface User { id: number; name: string }
 * 
 * const { data, error, loading } = useFetch<User>('/api/user/1');
 * // In template: {{ data?.name }} - no .value needed
 * </script>
 * ```
 */
export function useFetch<T>(
  url: string | Ref<string>,
  options?: RequestInit
): UseFetchReturn<T> {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const loading = ref(false);

  const fetchData = async () => {
    loading.value = true;
    error.value = null;
    
    try {
      const response = await fetch(
        typeof url === 'string' ? url : url.value,
        options
      );
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      data.value = await response.json();
    } catch (e) {
      error.value = e instanceof Error ? e : new Error(String(e));
      data.value = null; // Reset on error
    } finally {
      loading.value = false;
    }
  };

  // Auto-refetch when URL changes (if reactive)
  watchEffect(() => {
    void fetchData();
  });

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

# Add strict type checking
npm run build -- --mode=production

# Should see
# ✓ Type checking passed
# ✓ 0 reactivity warnings

Create useForm<T> composable using Vue 4 defineModel() that:
- Takes a generic schema T with validation rules
- Returns { values, errors, isValid, handleSubmit }
- Uses Vue 4 auto-unwrapping
- Validates on blur and submit
- TypeScript strict mode

Include a realistic example with nested objects.

// composables/useForm.ts
import { reactive, computed, type ComputedRef } from 'vue';

type ValidationRule<T> = (value: T) => string | null;

export interface FieldSchema<T> {
  initialValue: T;
  rules?: ValidationRule<T>[];
}

export interface FormSchema {
  [key: string]: FieldSchema<unknown>;
}

export interface UseFormReturn<T extends FormSchema> {
  values: { [K in keyof T]: T[K]['initialValue'] };
  errors: { [K in keyof T]: string | null };
  isValid: ComputedRef<boolean>;
  handleSubmit: (onSuccess: (values: unknown) => void) => void;
  validateField: (field: keyof T) => void;
}

/**
 * Vue 4 form handling with type-safe validation
 * 
 * @example
 * ```vue
 * <script setup lang="ts">
 * const { values, errors, isValid, handleSubmit } = useForm({
 *   email: {
 *     initialValue: '',
 *     rules: [(v) => v.includes('@') ? null : 'Invalid email']
 *   },
 *   password: {
 *     initialValue: '',
 *     rules: [(v) => v.length >= 8 ? null : 'Min 8 chars']
 *   }
 * });
 * 
 * // Template usage (auto-unwrapped):
 * // <input v-model="values.email" @blur="validateField('email')" />
 * // <span v-if="errors.email">{{ errors.email }}</span>
 * </script>
 * ```
 */
export function useForm<T extends FormSchema>(schema: T): UseFormReturn<T> {
  // Implementation here - AI should generate this following Vue 4 patterns
  // ... (full implementation would be generated by AI)
}

# Vue 4 AI Code Review Checklist

Before accepting AI-generated Vue composables:

## Type Safety
- [ ] All function parameters have explicit types
- [ ] Return type interface exported
- [ ] No `any` types used
- [ ] Generics constrained properly (<T extends ...>)

## Vue 4 Specifics  
- [ ] Uses auto-unwrapping (no .value in return types)
- [ ] defineModel() used instead of manual v-model
- [ ] Imports from 'vue' not 'vue/composition-api'
- [ ] No deprecated lifecycle hooks (onServerPrefetch)

## Production Ready
- [ ] Error boundaries included
- [ ] Loading states handled
- [ ] JSDoc with working @example
- [ ] Cleanup in onBeforeUnmount if needed

## Build Validation
- [ ] Passes `npm run build`
- [ ] No TypeScript errors
- [ ] No reactivity warnings

# Type check
npm run type-check

# Unit test (adjust for your setup)
npm test -- useFetch.test.ts

# Build for production
npm run build