Repository files navigation

While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point usingBootstrap,React, and / orVue that will be helpful for many applications. By default, Laravel usesNPM to install both of these frontend packages.

This legacy package is a very simple authentication scaffolding built on the Bootstrap CSS framework. While it continues to work with the latest version of Laravel, you should consider usingLaravel Breeze for new projects. Or, for something more robust, considerLaravel Jetstream.

Only the latest major version of Laravel UI receives bug fixes. The table below lists compatible Laravel versions:

The Bootstrap and Vue scaffolding provided by Laravel is located in thelaravel/ui Composer package, which may be installed using Composer:

composer require laravel/ui

Once thelaravel/ui package has been installed, you may install the frontend scaffolding using theui Artisan command:

// Generate basic scaffolding...php artisan ui bootstrapphp artisan ui vuephp artisan ui react// Generate login / registration scaffolding...php artisan ui bootstrap --authphp artisan ui vue --authphp artisan ui react --auth

Laravel officially supportsVite, a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. Vite supports a variety of CSS preprocessor languages, including SASS and Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the fullVite documentation for more information on compiling SASS or Less.

Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using theVue library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Vite to easily compile JavaScript components into a single, browser-ready JavaScript file.

After installing thelaravel/ui Composer package andgenerating the frontend scaffolding, Laravel'spackage.json file will include thebootstrap package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from thepackage.json file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is provided as a good starting point for those who choose to use it.

Before compiling your CSS, install your project's frontend dependencies using theNode package manager (NPM):

npm install

Once the dependencies have been installed usingnpm install, you can compile your SASS files to plain CSS usingVite. Thenpm run dev command will process the instructions in yourvite.config.js file. Typically, your compiled CSS will be placed in thepublic/build/assets directory:

npm run dev

Thevite.config.js file included with Laravel's frontend scaffolding will compile theresources/sass/app.scss SASS file. Thisapp.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize theapp.scss file however you wish or even use an entirely different pre-processor byconfiguring Vite.

All of the JavaScript dependencies required by your application can be found in thepackage.json file in the project's root directory. This file is similar to acomposer.json file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using theNode package manager (NPM):

npm install

By default, the Laravelpackage.json file includes a few packages such aslodash andaxios to help you get started building your JavaScript application. Feel free to add or remove from thepackage.json file as needed for your own application.

Once the packages are installed, you can use thenpm run dev command tocompile your assets. Vite is a module bundler for modern JavaScript applications. When you run thenpm run dev command, Vite will execute the instructions in yourvite.config.js file:

npm run dev

By default, the Laravelvite.config.js file compiles your SASS and theresources/js/app.js file. Within theapp.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in thepublic/build/assets directory.

Theapp.js file will load theresources/js/bootstrap.js file which bootstraps and configures Vue, Axios, jQuery, and all other JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file.

When using thelaravel/ui package to scaffold your frontend, anExampleComponent.vue Vue component will be placed in theresources/js/components directory. TheExampleComponent.vue file is an example of asingle file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in yourapp.js file:

importExampleComponentfrom'./components/ExampleComponent.vue';Vue.component('example-component',ExampleComponent);

To use the component in your application, you may drop it into one of your HTML templates. For example, after running thephp artisan ui vue --auth Artisan command to scaffold your application's authentication and registration screens, you could drop the component into thehome.blade.php Blade template:

@extends('layouts.app')@section('content')    <example-component></example-component>@endsection

Remember, you should run thenpm run dev command each time you change a Vue component. Or, you may run thenpm run watch command to monitor and automatically recompile your components each time they are modified.

If you are interested in learning more about writing Vue components, you should read theVue documentation, which provides a thorough, easy-to-read overview of the entire Vue framework.

If you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding:

composer require laravel/ui// Generate basic scaffolding...php artisan ui react// Generate login / registration scaffolding...php artisan ui react --auth

Presets are "macroable", which allows you to add additional methods to theUiCommand class at runtime. For example, the following code adds anextjs method to theUiCommand class. Typically, you should declare preset macros in aservice provider:

useLaravel\Ui\UiCommand;UiCommand::macro('nextjs',function (UiCommand$command) {// Scaffold your frontend...});

Then, you may call the new preset via theui command:

php artisan ui nextjs

Thank you for considering contributing to UI! The contribution guide can be found in theLaravel documentation.

In order to ensure that the Laravel community is welcoming to all, please review and abide by theCode of Conduct.

Please reviewour security policy on how to report security vulnerabilities.

Laravel UI is open-sourced software licensed under theMIT license.