Frontend Architecture

The PIP AI frontend is built with Nuxt 4 (Vue 3 Composition API), using file-based routing, auto-imports, and Pinia for state management.

Framework Stack

Layer	Technology	Purpose
Framework	Nuxt 4	SSR, routing, auto-imports
UI	Vue 3 Composition API	Reactive components with <script setup>
Styling	Tailwind CSS	Utility-first styling
State	Pinia	Global state management
Tables	TanStack Vue Table	Advanced data grid
Canvas	Fabric.js 5.2.4	Floor plan interaction
PDF	PDF.js 3.11.174	PDF rendering
Icons	Lucide Vue Next	Icon library
Animation	VueUse Motion	Transition animations
UI Primitives	Reka UI	Accessible component primitives

Pages

Pages use Nuxt file-based routing in app/pages/:

Route	Page	Description
/	index.vue	Dashboard — project list
/projects/[id]	projects/[id]/index.vue	Project detail — 5-tab workflow
/admin/specs	admin/specs.vue	Admin spec library management
/auth/login	auth/login.vue	Login page
/auth/register	auth/register.vue	Registration page
/auth/callback	auth/callback.vue	OAuth callback handler

Layouts

Layouts in app/layouts/ provide page structure. The default layout includes the Header component with navigation and theme switching.

Middleware

Middleware	File	Purpose
auth	app/middleware/auth.ts	Redirects unauthenticated users to login
admin	app/middleware/admin.ts	Restricts routes to admin users

When NUXT_PUBLIC_DEV_AUTH_BYPASS=true, the auth middleware is skipped entirely.

Component Organization

Components are organized by feature domain:

app/components/
├── tabs/              # Top-level workflow tabs
├── floorplan/         # Floor plan editor and related UI
├── document-builder/  # Document builder components
│   └── sidebar/       # Builder sidebar sections
├── ui/                # Reusable primitives
│   ├── badge/
│   ├── button/
│   ├── input/
│   └── table/
└── *.vue              # Shared feature components

All components are auto-imported by Nuxt — no manual import statements needed.

Composables

Over 20 composables in app/composables/ encapsulate business logic:

• Data Access — useProjects, usePipItems, useFloorPlans, useComments
• Search & Matching — useSpecMatching, useSpecSearch, useSpecUpload
• Canvas — useCanvasHistory, useFloorPlanRenderer, useFloorPlanImages
• Document Builder — useDocumentBuilder, useDocumentExport
• AI Integration — useNanoBanana, usePolyhavenMaterials
• Infrastructure — useAuth, useUserRole, useNetworkStatus, useResizablePanel

State Management

Pinia stores provide global state:

Store	File	Scope
useAppStore	app/stores/app.ts	Theme, sidebar, global UI state
useProjectsStore	app/stores/projects.ts	Project list, current project
usePipItemsStore	app/stores/pipItems.ts	PIP items for active project

Theming

Five themes are defined in app/constants/themes.ts:

• Dark — Dark background with light text
• Light — Clean light theme
• Sandstone — Warm earth tones
• Neo Mint — Fresh green accents
• Corporate — Professional blue palette

Theme state is persisted via useAppStore and initialized by app/plugins/theme.client.ts.