> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/zrclouddev-oss/saas-starter-vue/llms.txt > Use this file to discover all available pages before exploring further. # Frontend Development > Guide to Vue 3, Inertia.js, and frontend architecture in SaaS Starter Vue The frontend is built with **Vue 3**, **Inertia.js**, **TypeScript**, and **Tailwind CSS 4**, providing a modern, type-safe, and reactive user interface. ## Tech Stack Composition API, TypeScript support, and reactive state management Server-side routing with SPA-like experience, no separate API needed Utility-first CSS with custom design system Type safety for Vue components and application logic ## Project Structure The frontend code lives in `resources/js/`: ``` resources/js/ ├── app.ts # Main entry point ├── ssr.ts # SSR entry point ├── components/ # Reusable components │ ├── ui/ # shadcn-vue components │ ├── AppShell.vue │ ├── AppHeader.vue │ ├── AppSidebar.vue │ └── Breadcrumbs.vue ├── composables/ # Vue composables (hooks) ├── layouts/ # Page layouts ├── pages/ # Inertia pages ├── lib/ # Utility functions └── types/ # TypeScript types ``` ## Inertia.js Architecture Inertia.js bridges Laravel and Vue without building a separate API. Controllers return Inertia responses that render Vue components. ### How It Works Laravel controller returns an Inertia response with page component and props: ```php app/Http/Controllers/System/DashboardController.php theme={null} public function index() { $stats = [ 'total_tenants' => Tenant::count(), 'active_tenants' => Tenant::where('status', 'Active')->count(), 'trial_tenants' => Tenant::where('status', 'Trial')->count(), ]; return Inertia::render('system/Dashboard', [ 'stats' => $stats, 'recentTenants' => $this->getRecentTenants(), ]); } ``` The Vue component receives the data as typed props: ```vue resources/js/pages/system/Dashboard.vue theme={null} ``` Inertia intercepts links and form submissions, making XHR requests and swapping components: ```vue theme={null} ``` ### Benefits of Inertia Controllers return data directly to Vue components. No need to build REST or GraphQL APIs. Routes are defined in Laravel. No need to sync frontend and backend route definitions. Generate type-safe route helpers from Laravel routes: ```typescript theme={null} import { dashboard, tenants } from '@/routes'; // Type-safe navigation router.visit(dashboard().url); router.visit(tenants.show({ tenant: '123' }).url); ``` Share data across all pages via middleware: ```php theme={null} Inertia::share([ 'auth.user' => fn () => auth()->user(), 'flash.message' => fn () => session('message'), ]); ``` ## Vue Components ### Component Structure Components follow the Composition API with ` ``` ### UI Component Library The project uses **shadcn-vue** components located in `resources/js/components/ui/`: ```vue theme={null} Total Tenants Registered businesses

``` ```vue theme={null} Name Status {{ tenant.name }} {{ tenant.status }}

``` ```vue theme={null} ``` ```vue theme={null} ``` ### Available Components Card, Sheet, Tabs, Separator, Accordion Input, Textarea, Select, Checkbox, Radio, Switch Alert, Toast, Dialog, Popover, Tooltip Breadcrumb, Dropdown Menu, Navigation Menu Table, Badge, Avatar, Calendar Button, Command, Context Menu, Slider ## Layouts Layouts provide consistent structure across pages: ### AppLayout (System) ```vue resources/js/layouts/AppLayout.vue theme={null} ``` ### Usage in Pages ```vue resources/js/pages/system/Dashboard.vue theme={null} ``` ## Composables Reusable logic extracted into composables (Vue's equivalent of React hooks): ### useAppearance ```typescript resources/js/composables/useAppearance.ts theme={null} import { ref } from 'vue'; type Theme = 'light' | 'dark' | 'system'; export function useAppearance() { const theme = ref('system'); const setTheme = (newTheme: Theme) => { theme.value = newTheme; localStorage.setItem('theme', newTheme); applyTheme(newTheme); }; const applyTheme = (theme: Theme) => { const root = window.document.documentElement; root.classList.remove('light', 'dark'); if (theme === 'system') { const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; root.classList.add(systemTheme); } else { root.classList.add(theme); } }; return { theme, setTheme }; } export function initializeTheme() { const savedTheme = localStorage.getItem('theme') as Theme || 'system'; const { setTheme } = useAppearance(); setTheme(savedTheme); } ``` ### useTwoFactorAuth ```typescript resources/js/composables/useTwoFactorAuth.ts theme={null} import { ref } from 'vue'; import { router } from '@inertiajs/vue3'; export function useTwoFactorAuth() { const enabling = ref(false); const disabling = ref(false); const enable = () => { enabling.value = true; router.post('/user/two-factor-authentication', {}, { onFinish: () => (enabling.value = false), }); }; const disable = () => { disabling.value = true; router.delete('/user/two-factor-authentication', { onFinish: () => (disabling.value = false), }); }; return { enabling, disabling, enable, disable }; } ``` ## Tailwind CSS The project uses **Tailwind CSS 4** with custom configuration: ### Configuration ```typescript vite.config.ts theme={null} import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ tailwindcss(), // other plugins ], }); ``` ### Utility Classes ```vue theme={null}

...

``` ```vue theme={null}

Dashboard

Welcome back

``` ```vue theme={null} Trial ``` ```vue theme={null}

``` ### Custom Utilities Use `clsx` and `tailwind-merge` for conditional classes: ```typescript resources/js/lib/utils.ts theme={null} import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // Usage const buttonClass = cn( 'px-4 py-2 rounded', variant === 'primary' && 'bg-blue-500 text-white', variant === 'secondary' && 'bg-gray-200 text-gray-900', disabled && 'opacity-50 cursor-not-allowed' ); ``` ## Form Handling Inertia provides a `useForm` helper for managing form state: ```vue resources/js/pages/system/tenants/Create.vue theme={null} ``` ### Form Features * **Automatic CSRF protection**: Handled by Inertia * **Validation errors**: Automatically populated in `form.errors` * **Loading states**: Track submission with `form.processing` * **Optimistic updates**: Update UI before server response * **File uploads**: Support for `multipart/form-data` ## TypeScript The project uses TypeScript for type safety: ```typescript resources/js/types/index.ts theme={null} export interface User { id: string; name: string; email: string; email_verified_at: string | null; two_factor_enabled: boolean; } export interface Tenant { id: string; name: string; owner_email: string; status: 'Active' | 'Trial' | 'Canceled'; plan: Plan; created_at: string; } export interface Plan { id: string; name: string; price: number; features: Feature[]; } export interface BreadcrumbItem { title: string; href?: string; } ``` ### Type-Safe Props ```vue theme={null} ``` ## Build Configuration Vite powers the frontend build process: ```typescript vite.config.ts theme={null} import { wayfinder } from '@laravel/vite-plugin-wayfinder'; import tailwindcss from '@tailwindcss/vite'; import vue from '@vitejs/plugin-vue'; import laravel from 'laravel-vite-plugin'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.ts'], ssr: 'resources/js/ssr.ts', refresh: true, }), tailwindcss(), wayfinder({ formVariants: true }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], }); ``` ### Development ```bash theme={null} pnpm run dev ``` ### Production Build ```bash theme={null} pnpm run build ``` ### SSR Build ```bash theme={null} pnpm run build:ssr ``` ## Best Practices * Keep components small and focused * Use composition API with `