Skip to main content

Architecture Overview

Saucebase is a modular Laravel SaaS starter kit built on the VILT stack (Vue 3, Inertia.js, Laravel 12, Tailwind CSS 4). It combines Laravel's backend power with Vue's reactive frontend, connected seamlessly through Inertia.js.

High-Level Architecture​

The flow:

  1. Browser requests a page
  2. Laravel routes to a controller
  3. Controller returns Inertia response (JSON with component name and props)
  4. Vue receives props and renders the appropriate page
  5. Subsequent navigation happens client-side without full page reloads

This architecture eliminates the need for a separate REST API while providing a modern SPA experience.

Core Concepts​

Modular by Design​

Saucebase uses modules to organize features. Each module is self-contained with its own:

  • Routes, controllers, and models
  • Vue pages and components
  • Migrations and tests
  • Translations

Modules live in your repository (modules/<Name>/), not in external packages. You own the code and can modify it freely.

Learn more: Module System Architecture

Inertia.js: No API Required​

Traditional SPAs require building and maintaining API endpoints. Inertia.js eliminates this by allowing controllers to pass data directly to Vue components as props.

// Controller
return Inertia::render('Dashboard', [
    'stats' => $stats,
    'user' => $user,
]);

Vue components receive these props with full type safety:

<script setup lang="ts">
const props = defineProps<{
    stats: Stats;
    user: User;
}>();
</script>

No API layer, no REST endpoints, no GraphQL schema. Just straightforward data flow from backend to frontend.

Learn more: Frontend Architecture

Server-Side Rendering (Opt-In)​

SSR is available but disabled by default. Enable it per-route for pages that benefit from SEO:

// Public page with SEO benefits
return Inertia::render('Products/Index')->withSSR();

// Authenticated page without SSR
return Inertia::render('Dashboard')->withoutSSR();

This gives you control over when SSR overhead makes sense.

Learn more: SSR Guide

Type Safety End-to-End​

TypeScript flows from backend to frontend:

  • Controllers define data types
  • Inertia props are type-safe
  • Vue components get autocomplete and type checking
  • Build-time validation catches errors early

This makes refactoring safe and development faster.

Copy-and-Own Philosophy​

When you install a module, its code is copied into your repository. You're not depending on external packages—you own the code.

Why? Full control, no version conflicts, easy customization, simplified debugging.

Trade-off? No automatic updates, but you gain complete ownership.

Learn more: Design Philosophy

Request Flow​

Initial Page Load​

  1. Browser requests /dashboard
  2. Nginx forwards to Laravel
  3. Route resolves to controller
  4. Controller returns Inertia response (JSON)
  5. Blade template renders with embedded JSON
  6. Vue hydrates and displays the page

Subsequent Navigation (SPA)​

  1. User clicks a link
  2. Inertia intercepts and makes XHR request
  3. Laravel returns JSON (no full HTML)
  4. Vue swaps page component
  5. URL updates, page renders instantly

This combines the best of traditional server-side apps (simple data flow) with modern SPAs (smooth navigation).

Next Steps​

Dive deeper into specific architectural areas:

Understanding the architecture helps you build features that feel natural in Saucebase and make the most of its design.