JavaScript & CSS Scaffolding

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

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

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

  1. // Generate basic scaffolding...
  2. php artisan ui bootstrap
  3. php artisan ui vue
  4. php artisan ui react
  6. // Generate login / registration scaffolding...
  7. php artisan ui bootstrap --auth
  8. php artisan ui vue --auth
  9. php artisan ui react --auth

CSS

provides a clean, expressive API over compiling SASS or 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 full Laravel Mix documentation for more information on compiling SASS or Less.

JavaScript

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 the Vue library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.

After installing the laravel/ui Composer package and generating the frontend scaffolding, Laravel's package.json file will include the bootstrap package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the package.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 the :

  1. npm install

The webpack.mix.js file included with Laravel's frontend scaffolding will compile the SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.

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

  1. npm install

Once the packages are installed, you can use the npm run dev command to . Webpack is a module bundler for modern JavaScript applications. When you run the npm run dev command, Webpack will execute the instructions in your webpack.mix.js file:

    By default, the Laravel webpack.mix.js file compiles your SASS and the resources/js/app.js file. Within the app.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 the public/js directory.

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

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

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

    Using React

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

    1. composer require laravel/ui --dev
    3. php artisan ui react
    5. // Generate login / registration scaffolding...
    6. php artisan ui react --auth

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

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