Laravel 13 Project Scaffolding Guide

This guide provides a comprehensive setup for a modern Laravel 13 application with the latest stack technologies.

Core Stack Components

The setup includes:

Backend: Laravel 13 running on PHP 8.5 via Docker containers, with Laravel Breeze providing Vue 3, Inertia.js v3, and TypeScript support.

Database & Services: MySQL 8.4, Redis for caching and sessions, and Mailpit for email testing all orchestrated through Laravel Sail.

Frontend Libraries: State management via Pinia, UI components from HeadlessUI, icons through Lucide, form validation using Vee-Validate with Zod schemas, and toast notifications via Vue Sonner.

Modern Styling: Tailwind CSS v4 with its new native CSS architecture—no config file required, configuration via CSS imports and variables.

Key Production Dependencies

The guide installs Spatie's permission and media library packages for role-based access control and file handling. Development tools include Telescope for request debugging, Laravel Debugbar for in-page insights, and PHPStan (via Larastan) for static code analysis.

What's New in This Stack

Laravel 13: Latest framework features and improvements.

Inertia.js v3: Enhanced performance, improved TypeScript support, and streamlined API.

Tailwind CSS v4: Revolutionary architecture using native CSS features:

No tailwind.config.js file
Configuration via @import directives and CSS variables
Uses @tailwindcss/vite plugin
Faster build times and better IDE support

Implementation Approach

The guide structures setup as 16 sequential steps, each with clear progress indicators. It emphasizes that many features—Vue, TypeScript, Tailwind CSS v4, Inertia.js v3—come bundled with Breeze and shouldn't be installed separately.

Notable Configuration Details

The Vite dev server binds to 0.0.0.0 inside Docker with HMR pointing to localhost. The environment defaults to port 8080 for the application and 15173 for the dev server, with forwarded ports for external service access.

An admin user seeder is included, allowing immediate testing with preconfigured credentials (admin@example.com / password).

Testing & Code Quality

Modern testing with Pest PHP framework, code formatting via Laravel Pint, static analysis with Larastan, and real-time log viewing through Laravel Pail.

Quick Start

# Create project
cd ~/projects
composer create-project laravel/laravel my-app
cd my-app

# Install Breeze with Vue + Inertia.js v3 + TypeScript
composer require laravel/breeze --dev
php artisan breeze:install vue --typescript

# Setup Sail
composer require laravel/sail --dev
php artisan sail:install --with=mysql,redis,mailpit

# Start development
./vendor/bin/sail up -d
./vendor/bin/sail npm run dev

Access Points

After running sail up -d and sail npm run dev:

App: http://localhost:8080
Vite HMR: http://localhost:15173
Telescope: http://localhost:8080/telescope
Mailpit: http://localhost:18025
MySQL: localhost:13306
Redis: localhost:16379

Included Packages

Backend (Production)

spatie/laravel-permission - Role & permission management
spatie/laravel-medialibrary - File/image uploads

Backend (Development)

laravel/telescope - Debug dashboard
barryvdh/laravel-debugbar - In-page debug toolbar
barryvdh/laravel-ide-helper - IDE autocomplete
larastan/larastan - PHPStan static analysis
pestphp/pest - Modern testing framework
laravel/pail - Real-time log viewer

Frontend

pinia - State management
@vueuse/core - Composition utilities
@headlessui/vue - Accessible UI components
lucide-vue-next - Icon library
vue-sonner - Toast notifications
dayjs - Date manipulation
vee-validate + @vee-validate/zod + zod - Form validation
clsx + tailwind-merge - Class utilities
concurrently - Parallel process runner

Tailwind CSS v4 Notes

Tailwind v4 introduces a paradigm shift in configuration:

Old Way (v3):

// tailwind.config.js
export default {
  theme: {
    colors: {
      primary: '#3490dc'
    }
  }
}

New Way (v4):

/* resources/css/app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3490dc;
}

Benefits:

Native CSS, no JavaScript config
Faster builds
Better IDE support
Type-safe CSS variables
No PostCSS configuration needed

Useful Commands

# Development
sail up -d                    # Start containers
sail npm run dev              # Start Vite dev server
composer dev                  # Run server + queue + logs + vite (no Sail)

# Testing
sail composer test            # Run Pest tests
sail composer format          # Fix code style with Pint
sail composer analyse         # Run Larastan static analysis

# Database
sail artisan migrate          # Run migrations
sail artisan db:seed          # Seed database

# Logs
sail artisan pail             # Tail logs in real-time

# Setup
sail artisan ide-helper:generate   # Generate IDE helpers
sail artisan ide-helper:meta       # Generate meta files

Project Structure

my-app/
├── app/
│   ├── Http/
│   │   └── Controllers/
│   ├── Models/
│   └── Providers/
├── config/
├── database/
│   ├── migrations/
│   └── seeders/
├── docker/              # Published Sail Docker configs
├── resources/
│   ├── css/
│   │   └── app.css     # Tailwind v4 config here
│   ├── js/
│   │   ├── app.ts
│   │   ├── Pages/      # Inertia pages
│   │   ├── Layouts/
│   │   ├── Components/
│   │   └── plugins/
│   └── views/
├── routes/
│   ├── web.php
│   └── auth.php
├── tests/
├── compose.yaml        # Sail services
└── vite.config.js

Admin User

The setup includes a default admin user:

Email: admin@example.com
Password: password
Role: admin
Permissions: Full access via is_admin flag and admin role

Best Practices

Use Sail for consistency - All team members use identical environments
TypeScript everywhere - Type safety in Vue components and composables
Server-side validation - Use FormRequest for primary validation
Client-side validation - Use vee-validate + zod for UX enhancement
Inertia conventions - Keep form submissions server-driven
Tailwind v4 patterns - Use CSS variables for theming
Test everything - Write Pest tests for features and models

What Breeze Provides

Breeze scaffolds complete authentication:

Login / Register
Password reset
Email verification
Profile management
Two-factor authentication (optional)

All pages use Inertia.js v3 + Vue 3 + TypeScript + Tailwind CSS v4.

Customization Tips

Adding a Custom Font (Tailwind v4)

/* resources/css/app.css */
@import "tailwindcss";

@theme {
  --font-family-display: 'Montserrat', sans-serif;
}

Then use in components:

<h1 class="font-display">Hello World</h1>

Adding Dark Mode

/* resources/css/app.css */
@import "tailwindcss";

@theme {
  --color-background: light-dark(white, #1a1a1a);
  --color-text: light-dark(#333, #fff);
}

Creating Custom Components

// resources/js/Components/Button.vue
<script setup lang="ts">
import { cn } from '@/utils/cn'

interface Props {
  variant?: 'primary' | 'secondary'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary'
})

const classes = cn(
  'px-4 py-2 rounded',
  props.variant === 'primary' && 'bg-blue-500 text-white',
  props.variant === 'secondary' && 'bg-gray-200 text-gray-800'
)
</script>

<template>
  <button :class="classes">
    <slot />
  </button>
</template>

Migration from Laravel 12

If you have an existing Laravel 12 project:

Upgrade Laravel: Follow official upgrade guide
Upgrade Inertia: Update to v3 (npm install @inertiajs/vue3@latest)
Upgrade Tailwind: Remove tailwind.config.js, move config to CSS
Update Vite: Update to latest @tailwindcss/vite plugin
Test thoroughly: Check all Inertia forms and Tailwind classes

Resources

Credits

Built with Claude Code - Anthropic's official CLI for Claude.

Ready to scaffold your Laravel 13 project? Use the /new-laravel-project command in Claude Code CLI.

bhaidar/laravel-13-scaffolding-guide.md

Select an option

No results found