Getting Started with Laravel UI: Frontend Scaffolding for Modern Laravel Applications

Laravel is renowned for its elegant backend development, but when it comes to the frontend, it often gives developers the flexibility to choose their tools. Historically, Laravel included built-in authentication scaffolding directly within the framework. However, since Laravel 6.0, this functionality was extracted into a separate, optional package: Laravel UI.

Laravel UI serves as a simple, convenient way to quickly scaffold common frontend frameworks (Bootstrap, Vue, React) and, crucially, the authentication boilerplate (login, registration, password reset) for your Laravel applications. It’s perfect for those who want a quick start with traditional frontend stacks without the added complexity of solutions like Laravel Breeze or Jetstream.

What is Laravel UI? #

Laravel UI is a Composer package that provides a simple API to generate basic frontend scaffolding. It allows you to integrate popular frontend frameworks and essential authentication views and routes into your Laravel project with just a few artisan commands. This means you can have a fully functional login/registration system and a basic frontend theme up and running in minutes.

A Brief History #

Before Laravel 6.0, the php artisan make:auth command was a staple for many developers, generating all the necessary views, controllers, and routes for authentication. To give developers more freedom and to keep the core framework lean, Taylor Otwell (Laravel's creator) decided to move this functionality out of the core into a dedicated package. This move gave birth to Laravel UI, ensuring that developers who still prefer this traditional approach can easily add it to their projects.

Installation #

To begin using Laravel UI, you first need to install it via Composer in your Laravel project. Navigate to your project's root directory in your terminal and run:

composer require laravel/ui

Once the package is installed, you'll gain access to new php artisan ui commands.

Scaffolding Basic Frontend #

Laravel UI can scaffold a basic frontend setup without authentication. This is useful if you just want to integrate a frontend framework and manage your own authentication later, or if your application doesn't require user authentication.

You have three primary choices:

1. Bootstrap #

To scaffold Bootstrap and its associated JavaScript dependencies, run:

php artisan ui bootstrap

2. Vue.js #

To scaffold Vue.js components and related files, run:

php artisan ui vue

3. React.js #

To scaffold React.js components and related files, run:

php artisan ui react

After running any of these commands, you will need to install the Node.js dependencies and compile your assets. Laravel UI uses Laravel Mix (built on Webpack) for asset compilation. So, run the following commands:

npm install
npm run dev

• npm install will download all frontend dependencies (like Bootstrap, Vue, React, Axios, Lodash, etc.) defined in your package.json file.
• npm run dev will compile your JavaScript and SASS/CSS files into the public/js and public/css directories respectively, ready for your application to use.

If you want to automatically recompile assets on file changes during development, use npm run watch.

Adding Authentication Scaffolding #

The real power of Laravel UI often comes when combined with authentication scaffolding. This option generates all the necessary views, routes, and even a basic layout to get a full authentication system running instantly.

To include authentication scaffolding, simply add the --auth flag to your chosen frontend framework command:

1. Bootstrap with Authentication #

php artisan ui bootstrap --auth

2. Vue.js with Authentication #

php artisan ui vue --auth

3. React.js with Authentication #

php artisan ui react --auth

After running the command, remember to install Node.js dependencies and compile assets:

npm install
npm run dev

Finally, if this is a fresh Laravel installation, you might need to run database migrations to create the users table and other default tables if you haven't already:

php artisan migrate

Now, if you visit /login or /register in your browser, you should see the newly generated authentication forms. Laravel UI automatically adds Auth::routes() to your routes/web.php file, which registers all necessary authentication routes.

What Laravel UI Generates #

When you run the php artisan ui <framework> --auth command, Laravel UI performs several actions:

1. Views: It creates views for login, registration, password reset, and a basic home.blade.php in resources/views/auth/ and resources/views/home.blade.php. It also creates a master layout file resources/views/layouts/app.blade.php.
2. Assets: It sets up basic JavaScript (resources/js/app.js, bootstrap.js) and SASS (resources/sass/app.scss) files tailored for your chosen framework.
3. package.json: It adds the necessary npm dependencies for your chosen framework (e.g., bootstrap, vue, react, react-dom).
4. webpack.mix.js: It updates your Laravel Mix configuration to compile the SASS and JavaScript files.
5. Routes: It adds Auth::routes() to routes/web.php and a default home route /home (pointing to HomeController@index).
6. Controllers: It may create a HomeController if it doesn't exist, used for the default /home route after login.

Customization and Further Steps #

The beauty of Laravel UI is that it provides a solid starting point that is fully customizable. All the generated views are standard Blade templates, and the JavaScript/SASS files are regular frontend assets. You can modify them as much as you need to fit your application's design and functionality requirements.

For instance, to change the design of the login page, you would simply edit resources/views/auth/login.blade.php.

Laravel UI vs. Laravel Breeze/Jetstream #

It's worth noting that Laravel has evolved its frontend scaffolding options. While Laravel UI is still fully supported and widely used, newer alternatives like Laravel Breeze and Laravel Jetstream offer more modern and feature-rich starter kits.

• Laravel UI: Simple, lightweight, uses traditional Blade templates with Bootstrap, Vue, or React. Ideal for quick setups and projects where you want minimal frontend boilerplate.
• Laravel Breeze: A slightly more robust starter kit that uses Blade or Inertia.js with Vue/React, and optionally Livewire. It's a great option for modern single-page application (SPA) scaffolding while keeping things relatively simple.
• Laravel Jetstream: A comprehensive application starter kit that includes features like two-factor authentication, API support via Laravel Sanctum, team management, and profile management. It uses Livewire with Blade or Inertia.js with Vue/React.

Choose Laravel UI if you prefer the simplicity of traditional setups and want direct control over a basic Bootstrap, Vue, or React integration without extra layers.

Conclusion #

Laravel UI remains an excellent choice for Laravel developers looking for a fast and efficient way to integrate common frontend frameworks and get authentication up and running quickly. Its simplicity and flexibility make it a valuable tool in your Laravel development arsenal, allowing you to focus on your application's unique features rather than reinventing the wheel for basic scaffolding.