Composables Overview

PIP AI uses Vue 3 composables extensively to encapsulate business logic, data access, and UI behavior. There are 20+ composables in app/composables/.

Conventions

• Naming — All composables follow the use* convention (e.g., useAuth, usePipItems)
• Location — All composables live in app/composables/ and are auto-imported
• Pattern — Each composable returns reactive state (ref/computed) and methods
• TypeScript — Fully typed with interfaces for parameters and return values
• Supabase — Data composables use useSupabaseClient() for database operations

Typical Pattern

export const useExample = (projectId: Ref<string>) => {
  const supabase = useSupabaseClient<Database>()

  // Reactive state
  const items = ref<Item[]>([])
  const isLoading = ref(false)
  const error = ref<string | null>(null)

  // Methods
  const fetchItems = async () => {
    isLoading.value = true
    const { data, error: err } = await supabase
      .from('pip_ai_items')
      .select('*')
      .eq('project_id', projectId.value)
    items.value = data ?? []
    error.value = err?.message ?? null
    isLoading.value = false
  }

  return { items, isLoading, error, fetchItems }
}

Categories

Core & Data Access

• useAuth — Authentication and user management
• useProjects — Project CRUD operations
• usePipItems — PIP item management
• useUserRole — Role checking

Spec Matching

• useSpecMatching — Match management
• useSpecSearch — Spec search
• useSpecUpload — Spec upload (admin)

Floor Plans

• useFloorPlans — Floor plan data and operations
• useFloorPlanRenderer — PDF rendering
• useFloorPlanImages — Image optimization

Document Builder

• useDocumentBuilder — Builder state and logic
• useDocumentExport — PDF export
• useCanvasHistory — Undo/redo

AI & External

• useNanoBanana — AI image generation
• usePolyhavenMaterials — Material library
• useBrands — Brand management

Utilities

• useComments — Comment system
• useActivityLog — Activity tracking
• useTableExport — Table data export
• useResizablePanel — Panel resizing
• useNetworkStatus — Online/offline detection
• useImageOptimization — Image processing