laravel/ui

Laravel/UI is a first-party Composer package for Laravel that provides frontend scaffolding using popular UI frameworks like Bootstrap, Vue, and React. It was introduced to decouple the frontend assets and scaffolding from the core Laravel framework, allowing developers to choose their preferred frontend stack without bloating the main Laravel repository.

Historically, Laravel included these frontend scaffolds directly. However, as frontend development evolved rapidly, maintaining these directly within the core framework became cumbersome. Laravel/UI was created to address this, offering a flexible way to add a frontend layer to a new or existing Laravel application.

Key Features and Functionality:
* Presets: It offers pre-configured setups for Bootstrap, Vue.js, and React.js, including basic JavaScript and CSS files, along with webpack configuration (`webpack.mix.js`) for compilation.
* Authentication Scaffolding: One of its most popular uses is to quickly generate full authentication scaffolding (registration, login, password reset, email verification, and home dashboard) with corresponding routes, controllers, and Blade views. This can be combined with any of the UI presets.
* Easy Installation: It's installed via Composer and managed through Artisan commands, making it simple to integrate into any Laravel project.
* Customization: While it provides a starting point, all generated files (JavaScript, CSS, Blade views, controllers, routes) are fully customizable, allowing developers to tailor the frontend to their specific needs.

How it works:
1. Installation: You install the `laravel/ui` package via Composer.
2. Scaffolding: You run Artisan commands like `php artisan ui bootstrap`, `php artisan ui vue`, or `php artisan ui react` to generate the basic frontend assets and `webpack.mix.js` configuration.
3. Authentication (Optional): You can then run `php artisan ui bootstrap --auth` (or vue/react with `--auth`) to add the authentication boilerplate.
4. Asset Compilation: After scaffolding, you typically install Node.js dependencies (`npm install` or `yarn install`) and then compile the assets (`npm run dev` or `npm run prod`) using Laravel Mix, which is configured by `laravel/ui`.

Laravel/UI is particularly useful for rapidly prototyping applications or for projects where a traditional server-rendered application with a light frontend layer (like Bootstrap) or a component-based approach (Vue/React) is desired without starting from scratch. It integrates seamlessly with Laravel's Blade templating engine and authentication system.

Example Code

<?php

// --- Installation and Usage via Command Line (CLI) ---
// These commands are executed in your project's terminal.

// 1. Install the laravel/ui package via Composer
// composer require laravel/ui

// 2. Scaffold a UI preset (e.g., Bootstrap) without authentication
// php artisan ui bootstrap

// 3. Scaffold a UI preset with authentication (e.g., Vue.js with auth)
// php artisan ui vue --auth

// 4. Install Node.js dependencies and compile assets (required after scaffolding)
// npm install
// npm run dev   (for development)
// npm run prod  (for production)


// --- Example PHP Code Generated by laravel/ui (after running 'php artisan ui bootstrap --auth') ---

// 1. Example from routes/web.php (Authentication routes generated by laravel/ui)
Route::get('/', function () {
    return view('welcome');
});

Auth::routes(); // This single line registers all necessary auth routes (login, register, reset, verify)

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');


// 2. Example from App\Http\Controllers\HomeController.php (Generated by laravel/ui for auth dashboard)
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    /
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        // This middleware ensures only authenticated users can access the home route.
        $this->middleware('auth');
    }

    /
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('home');
    }
}


// 3. Example from resources/views/home.blade.php (Simplified - original is more extensive)
<!-- Generated Blade View Example: resources/views/home.blade.php -->
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


// --- Note: The above PHP code snippets are examples of files that laravel/ui generates. ---
// The laravel/ui package itself is primarily a command-line utility for scaffolding.

Example Code

Related Topics