Blade

Overview Laravel Folio shifts the Laravel routing paradigm from code-defined routes in `web.php` to a file-based system. This approach maps your directory structure directly to your application's URLs. It is particularly effective for content-heavy sections like marketing pages, blogs, or documentation where creating a dedicated controller for every static view feels like overkill. By removing the middleman, you can build faster and keep your logic closer to the UI. Prerequisites To get the most out of this tutorial, you should be comfortable with the PHP programming language and the basics of the Laravel framework. Familiarity with Blade templating and the Composer package manager is necessary to manage dependencies and create views. Key Libraries & Tools * **Laravel Folio**: The primary page-based router package. * **Blade**: Laravel's powerful templating engine used for the page files. * **Artisan**: Laravel's command-line interface for generating pages and managing the environment. * **Sushi**: A flat-file database driver (optional, mentioned for markdown-based workflows). Code Walkthrough Installation First, pull the package into your project and run the installation command to prepare your directories. ```bash composer require laravel/folio php artisan folio:install ``` Creating a Basic Page Folio looks for files inside `resources/views/pages`. Any Blade file created here automatically becomes a route. ```php <!-- resources/views/pages/hi.blade.php --> <div> <h1>Hi there!</h1> </div> ``` Navigating to `/hi` in your browser will now render this view instantly without any entry in `web.php`. Route Model Binding You can capture dynamic parameters or even perform Route Model Binding by naming your files with brackets. ```bash Creates a route at /users/{user} php artisan folio:page "users/[User]" ``` Inside the file, you access the model directly: ```php @php use function Laravel\Folio\name; name('profile'); @endphp <h1>User: {{ $user->name }}</h1> ``` Syntax Notes Folio introduces specialized functions that live within `@php` blocks at the top of your Blade files. The `name()` function allows you to assign a route name for easy referencing via the `route()` helper. For security, the `middleware()` function lets you attach authentication or custom logic directly to the page file. Practical Examples * **Marketing Sites**: Rapidly deploy dozens of landing pages by simply dropping Blade files into the pages folder. * **Blogs**: Combine Folio with a markdown parser to turn a directory of text files into a fully functional blog. * **Admin Dashboards**: Use nested directories to create organized, resource-specific management views. Tips & Gotchas Always remember that Folio routes are additive; they do not override existing routes defined in your `web.php` unless you explicitly remove the conflicting definitions. If you are on a Windows environment, note that custom key binding syntax might require dashes instead of colons in filenames. For performance, use `php artisan folio:list` to visualize your route tree and ensure nested directories are resolving as expected.

Overview Modern development often involves leveraging automation to generate boilerplate code, but the real skill lies in identifying which patterns offer the best long-term maintenance. This guide explores the architectural differences in Laravel CRUD implementation, focusing on routing strategy, controller logic, and Blade template reusability. By comparing different approaches to the same task, developers can learn to write cleaner, more idiomatic code. Prerequisites To follow this guide, you should have a baseline understanding of PHP and the Laravel framework. Familiarity with Tailwind CSS, RESTful routing, and basic Blade syntax is recommended. Key Libraries & Tools * **Laravel**: The primary PHP framework used for routing and MVC structure. * **Blade**: The templating engine for creating reusable UI components. * **Tailwind CSS**: A utility-first CSS framework for styling components. Code Walkthrough Strategic Routing Groups When adding new controllers, don't just append routes to the bottom of your file. Group them by middleware to prevent repetition. ```php Route::middleware(['auth'])->group(function () { Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard'); Route::resource('cars', CarController::class); }); ``` This approach ensures that all related authenticated routes share the same security layer, making future changes to access levels easier to manage. Reusable Controller Data Instead of creating temporary variables in both `create` and `edit` methods, use a private helper method to build your data arrays. ```php private function formOptions(): array { return [ 'brands' => Brand::orderBy('name')->pluck('name', 'id'), 'categories' => Category::orderBy('name')->pluck('name', 'id'), ]; } public function create() { return view('cars.create', $this->formOptions()); } ``` The ForElse Directive Handle empty states elegantly within your Blade tables using `@forelse`. This combines a loop and a conditional check for empty collections. ```blade @forelse ($cars as $car) <tr><td>{{ $car->name }}</td></tr> @empty <tr><td>No records found. <a href="{{ route('cars.create') }}">Add one?</a></td></tr> @endforelse ``` Syntax Notes Laravel provides a `@class` directive that simplifies conditional styling. Instead of clunky `if/else` blocks inside your HTML tags, you can pass an array where the key is the CSS class and the value is the boolean condition. Practical Examples These patterns are highly effective when building administrative dashboards or internal management tools where multiple entities require identical form fields for both creation and modification. Using partial forms and shared controller methods reduces the surface area for bugs. Tips & Gotchas While merging `create` and `edit` forms into a single partial sounds efficient, it often leads to a "messy middle" where you have too many `@if` statements to handle subtle differences like password fields or unique IDs. Only use partials if the forms are nearly identical. For dynamic styling, the PHP `match` statement is often more readable than a long `@class` directive when dealing with complex logic.

Overview Selecting a starter kit for a Laravel SaaS is a pivotal decision that impacts long-term maintainability. A starter kit provides the scaffolding for authentication, profile management, and UI layouts, allowing you to focus on unique business logic. The goal is to find a balance between modern features—like Tailwind CSS 4—and a low barrier to entry for backend developers who may not want to manage complex frontend build steps. Prerequisites To follow this implementation, you should have a baseline understanding of PHP and the Laravel framework. Familiarity with the terminal, Composer, and basic Blade templating is essential. You should also have Laravel Herd or a similar local environment installed to serve your application. Key Libraries & Tools * **Livewire**: A full-stack framework for Laravel that builds dynamic interfaces using PHP. * **Flux**: A UI component library (free version included) that powers the modern starter kit aesthetics. * **Tailwind CSS**: The utility-first CSS framework used for styling. * **Laravel Breeze**: A minimal authentication starter kit often used for simple Blade-based projects. Code Walkthrough Initial installation begins with the Laravel installer. Choosing the Livewire stack ensures you have access to modern UI components while remaining compatible with standard Blade workflows. ```bash laravel new my-saas-app Select Livewire when prompted Select No for Laravel Volt if you prefer standard Class-based components Run the frontend build npm install && npm run build ``` Once installed, you can create standard routes and views without touching Livewire logic if you prefer a traditional controller-based approach. For instance, creating an "About" page involves defining a route and extending the application layout. ```php // routes/web.php Route::get('/about', function () { return view('pages.about'); })->name('about'); ``` In the view, use the provided layout component to maintain a consistent sidebar and navigation design. ```html <!-- resources/views/pages/about.blade.php --> <x-layouts.app> <div class="p-6"> <h1 class="text-2xl font-bold">About Our SaaS</h1> <p>This page uses standard Blade syntax within the Livewire starter kit.</p> </div> </x-layouts.app> ``` Syntax Notes The Livewire starter kit utilizes **Blade Components** (prefixed with `x-`) and **Flux Components**. Notice the `<x-layouts.app>` tag; this is a component-based approach to layout management that replaces the older `@extends` and `@section` directives. It simplifies data passing and maintains a cleaner HTML structure. Practical Examples This setup is ideal for building multi-tenant applications or subscription-based platforms. By utilizing the built-in Livewire components for profile management and two-factor authentication, you save dozens of hours of development time. You can then layer your specific SaaS features—like billing or team management—using standard Laravel controllers and Blade views. Tips & Gotchas Avoid the trap of choosing older starter kits like Laravel Breeze with Tailwind CSS 3 if you want the easiest upgrade path to future Laravel versions. While community kits like Lara Fast or Sassy Kit offer more features out of the box, they introduce third-party dependencies that may not be updated as frequently as official first-party tools.

Overview Modern dashboard development often forces a choice between heavy JavaScript frameworks or bare-bones styling. TailAdmin Laravel bridges this gap by offering a comprehensive, Tailwind-based UI designed specifically for the Laravel ecosystem. This guide demonstrates how to utilize the TailAdmin Laravel Starter Kit to implement essential authentication and dynamic data tables without the overhead of React or Vue. Prerequisites To follow this walkthrough, you need a basic understanding of PHP and the Laravel MVC pattern. Familiarity with Tailwind CSS for styling and Blade for templating is required. You should have a local development environment (like Laravel Herd) ready for a fresh installation. Key Libraries & Tools - **TailAdmin**: A high-quality Tailwind CSS admin dashboard template. - **Blade Components**: Laravel's native templating system used for reusable UI elements. - **Alpine.js**: A minimal framework for handling client-side interactions like dropdowns and sidebar toggles. - **Laravel Daily Starter Kit**: The underlying foundation for the authentication logic. Code Walkthrough: Implementing Dynamic Tables To move beyond the hard-coded demos, you must connect the UI components to your database. Here is how to create a dynamic user list. 1. Controller and Routing Define a standard resource route and fetch data in your controller. ```php // routes/web.php Route::resource('users', UserController::class); // app/Http/Controllers/UserController.php public function index() { $users = User::paginate(10); return view('users.index', compact('users')); } ``` 2. Customizing the Blade View Replace the TailAdmin placeholder data with a Blade `@foreach` loop to render actual database records. ```html <!-- resources/views/users/index.blade.php --> <x-app-layout> <div class="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5"> <table class="w-full table-auto"> <thead> <tr class="bg-gray-2 text-left"> <th class="py-4 px-4 font-medium text-black">Name</th> <th class="py-4 px-4 font-medium text-black">Email</th> </tr> </thead> <tbody> @foreach($users as $user) <tr> <td class="border-b border-[#eee] py-5 px-4">{{ $user->name }}</td> <td class="border-b border-[#eee] py-5 px-4">{{ $user->email }}</td> </tr> @endforeach </tbody> </table> </div> </x-app-layout> ``` Syntax Notes This implementation relies on **Blade Components** (using the `x-` prefix). The starter kit utilizes a **Menu Helper** class to manage the sidebar programmatically. Instead of hard-coding links in the HTML, you add arrays to the helper to maintain a clean, centralized navigation structure. Practical Examples This kit is ideal for internal management tools, SaaS backends, or MVP projects where speed of delivery is paramount. It provides out-of-the-box support for **Dark Mode** and **Profile Management**, allowing you to focus on core business logic rather than UI boilerplate. Tips & Gotchas When copying components from the original TailAdmin demo, ensure you remove the `x-data` Alpine.js attributes if you are handling the data rendering via PHP. Keeping unnecessary Alpine logic can lead to conflicts if you attempt to mix server-side rendering with client-side state management incorrectly.

Architecture and Database Design Effective application development begins with a robust database schema. For this Product Hunt mini-clone, the foundation rests on MySQL with a clear entity-relationship model. The system tracks products, tags, comments, and upvotes through Eloquent relationships. Instead of a standard pivot table for upvotes, the implementation treats upvotes as a distinct entity. This allows for more granular control over metadata like timestamps. Comments utilize a self-referencing parent ID to facilitate threaded replies, while Spatie Media Library manages all product thumbnails and gallery images through a dedicated media table. Prerequisites To implement this architecture, you need a firm grasp of the following: * **PHP 8.x** and Laravel framework fundamentals. * **Relational Database** concepts (Foreign keys, many-to-many relationships). * **Blade Components** for front-end modularity. * **Basic JavaScript** (specifically Alpine.js) for interactive UI elements. Key Libraries & Tools * Laravel Socialite: Simplifies OAuth authentication for GitHub logins. * Livewire: Handles real-time reactivity for upvotes and comments without leaving PHP. * Filament: A powerful TALL stack admin panel for managing backend resources. * **Spatie Login Link**: A developer-centric tool for passwordless local authentication. Code Walkthrough: Queries and Components The `HomeController` utilizes an invocable action to fetch products while aggressively preventing N+1 query issues. By eager loading counts for comments and upvotes, the application remains performant even as the dataset grows. ```python // Product Model Scope public function scopeLaunchToday($query) { return $query->whereDate('created_at', now()); } ``` The front-end uses a hybrid approach. Standard Blade layouts handle the static structure, while Livewire components inject dynamism into specific areas like the upvote button. ```javascript // Livewire Upvote Toggle public function toggle() { if (auth()->guest()) { return $this->dispatch('open-signin-modal'); } // Logic to register or remove vote } ``` Syntax Notes and Practical Examples Laravel 11+ introduces more concise scope syntax and improved model definitions. This project demonstrates how to use `computed properties` in Livewire to keep the `render()` method clean. By offloading complex logic to these properties, the UI updates only when the underlying data changes. Tips & Gotchas Always wrap your Spatie Login Link in environment checks. Exposing passwordless login on production is a catastrophic security risk. For the admin side, keeping Filament logic in the `app/Filament` directory ensures your public-facing code and administrative tools remain decoupled and maintainable.

Modern development thrives on context. Laravel Boost bridges the gap between your local environment and AI intelligence by providing precise guidelines for the Laravel ecosystem. The package recently moved through several iterations, focusing on accessibility for package authors and broader editor support. Here are the latest updates making your AI interactions more accurate. Automated Ecosystem Updates The introduction of the `boost update` command ensures your development environment remains in sync with the rapidly changing Laravel landscape. Running this command fetches the latest official guidelines for core packages, preventing your AI from suggesting outdated syntax or deprecated methods. It also re-indexes any custom rules stored in your `.ai` folder, maintaining a single source of truth for project-specific logic. Guidelines for Package Authors Laravel Boost now empowers third-party package creators to ship their own AI instructions. By adding a `resources/boost/guidelines/core.blade.php` file to a package, authors ensure that any developer using Laravel Boost automatically inherits the correct implementation patterns. This decentralizes guideline creation, allowing experts to define how AI should handle their specific tools. Expanded Editor and Environment Support Compatibility is key for tool adoption. While Laravel Boost initially focused on Cursor and VS Code, version 1.7 adds official support for Open Code. For developers working in niche environments, a new extensible code environment class allows for manual registration of any IDE or AI agent, essentially making the package platform-agnostic. Simplified Markdown Integration Complexity often kills utility. Previously, custom guidelines required Blade templates, which added unnecessary overhead for simple text instructions. A new quality-of-life update allows developers to use standard Markdown files within the `.ai/guidelines` directory. This shift makes it easier to quickly jot down project rules without worrying about templating syntax. Laravel Boost remains in beta, but its integration with tools like Tailwind 4 and Wayfinder proves it is already indispensable for modern workflows. As the team expands, expect even deeper AI synchronization.

Overview Livewire 4 represents a massive leap forward for the Laravel ecosystem, focusing on developer experience and performance without the pain of a total rewrite. This update addresses the fragmentation within the community by unifying component styles—combining the best of Volt and traditional class-based components. By introducing the **Blaze compiler** and **Islands architecture**, the framework tackles the "Livewire is slow" myth head-on, offering tools that can speed up page rendering by up to 10x while maintaining the reactive, "no-JavaScript-required" workflow that developers love. Prerequisites To follow along with these techniques, you should have a solid grasp of: * **PHP & Laravel basics**: Understanding of routing, Blade templates, and class structures. * **Livewire 3**: Familiarity with how state and actions work in the current version. * **Alpine.js**: Basic knowledge of client-side reactivity. * **Tailwind CSS**: Useful for implementing the new loading indicator patterns. Key Libraries & Tools * **Livewire 4**: The core full-stack framework for Laravel. * **Blaze**: A new optimization layer that "code-folds" Blade components to remove runtime overhead. * **Pest 4**: A testing framework used for high-level browser testing within components. * **Flux UI**: A high-quality component kit that benefits from these performance upgrades. * **Sushi**: An array-to-Eloquent driver mentioned as a community favorite. Code Walkthrough: The Unified Component Model In Livewire 4, the goal is to stop the confusion between functional, class-based, and Volt styles. The new default is a single-file, class-based structure located in `resources/views/components` alongside your standard Blade components. Single-File Components Creating a counter now looks like this: ```php <?php use function Livewire\{state, rules}; new class extends Livewire\Component { public $count = 0; public function increment() { $this->count++; } }; ?> <div> <button wire:click="increment">+</button> <span>{{ $count }}</span> </div> <script> this.watch('count', (value) => { console.log('Count changed to: ' + value); }); </script> ``` In this example, the logic, view, and script live together. Notice the `<script>` tag at the bottom—it no longer requires `@script` directives. The `this` keyword in JavaScript replaces the older `$wire` syntax, offering a more native feel. These scripts are served as **ES6 modules**, meaning they are cached by the browser and can use native imports. Multi-File Conversion If a component grows too large, you can automatically convert it to a **Multi-File Component (MFC)** using the CLI. This moves the logic into a dedicated directory with separate `.php`, `.blade.php`, and `.js` files, maintaining Caleb Porzio's "Single Responsibility Principle" by keeping related files collocated in one folder. Syntax Notes: PHP 8.4 Property Hooks Livewire 4 leans heavily into PHP 8.4 features to simplify state management. The most impactful change is the use of **Property Hooks**, which replace many old `updating` and `updated` lifecycle methods. Validation with Setters You can now intercept property updates directly at the language level: ```php public int $count = 0 { set => max(0, $value); } ``` Memoization with Getters Instead of creating custom computed property methods, use native getters. These are excellent for deriving state for your views: ```php public int $multiple { get => $this->count * 5; } ``` You can even use asymmetric visibility (`public get, protected set`) to make a property readable by the view but immutable from the client, effectively replacing the `@locked` attribute. The Blaze Compiler: Vaporizing Runtime Overhead One of the most impressive technical feats in version 4 is **Blaze**. Caleb Porzio identified that the primary bottleneck in large Blade views isn't PHP itself, but the overhead of resolving and merging attributes for thousands of components. Blaze uses a technique called **code folding**. It parses your Blade templates and identifies static parts—like Tailwind CSS classes or HTML structures that never change—and renders them at compile time. This turns a complex component tree back into raw, concatenated PHP strings. In benchmarks, this reduced a page with 29,000 view instances from 1.6 seconds down to just 131 milliseconds. Best of all, it works for standard Blade components, not just Livewire ones. Practical Examples: Islands and Infinite Scroll **Islands architecture** allows you to isolate expensive parts of a page so they don't block the rest of the UI. This is a game-changer for dashboards with slow database queries. Implementing an Island Wrap a slow section in the `@island` directive: ```blade @island('revenue-chart', lazy: true) <div class="chart"> {{ $this->expensiveRevenueQuery() }} </div> @placeholder <x-skeleton-loader /> @endisland ``` By setting `lazy: true`, the main page loads instantly. Livewire then makes a separate, isolated request for the island. Actions taken within the island only rerender the island itself. Infinite Pagination Islands also unlock high-performance pagination. By changing the render mode to `append`, you can create an infinite scroll effect with minimal code: ```blade @island('reports', mode: 'append') @foreach($reports as $report) <div>{{ $report->title }}</div> @endforeach @endisland <button wire:intersect="$paginator->nextPage()" wire:island="reports"> Loading more... </button> ``` The `wire:intersect` directive triggers the next page when the button enters the viewport, and because the island is in `append` mode, it only fetches and patches the new results into the DOM. Tips & Gotchas * **Priority Polling**: In Livewire 4, human-initiated actions (like clicks) now automatically cancel background polling requests. This prevents the UI from feeling "locked" when background updates are happening. * **Data Loading Attributes**: Any element triggering a request now receives a `data-loading` attribute. Use Tailwind CSS modifiers like `data-loading:opacity-50` to handle loading states without writing complex `wire:loading` logic. * **Ref Management**: Use `wire:ref="myModal"` to target specific components for events. This solves the issue of global event listeners accidentally closing every modal on the page when only one was intended. * **PHP 8.4 Requirement**: To use the advanced property hooks, you must ensure your server is running PHP 8.4. While Livewire 4 aims for "mostly no breaking changes," these specific syntax upgrades require modern PHP.