Configure Bootstrap Vue React in Laravel 6 with make auth

If you know with the new release of Laravel 6 it does not come with preconfigured JavaScript & CSS Scaffolding for bootstrap or Vue as it was used be in Laravel 5.8 and earlier versions.

This tutorial provides complete steps on how to generate VueJs or react configuration in laravel 6 and also how to run make:auth command to generate frontend Scaffolding with authentication routes and views.

Checkout new Features from Laravel 6 – Laravel 6 Release New Features and Updates

Create new Laravel 6 Project

Create new Laravel 6 project using Laravel CLI or use composer if you like:

laravel new laravel6-app

Using Composer

composer create-project --prefer-dist laravel/laravel laravel6-app

After creating brand new laravel 6 application, you visit resource directory to make sure what laravel has provided as default configuration:

/resources/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });
;

/resources/js/app.js

require('./bootstrap');

As you can see that apart from lodash and axios there is nothing configured and event app.js file has nothing like vue components or anything and not but not the list our app.scss file is empty.

You can also checkout the package.json dev dependencies:

"devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    }

Next let’s see how we can get scaffolding configured in laravel 6

Install Laravel UI Package

From now in Laravel 6 Bootstrap and Vue scaffolding is now extracted into separate Laravel UI is a new first-party package so in order to use scaffolding we will have to install this package.

Go ahead and open up your terminal or command prompt if you are on windows navigate to your project directory and execute this command:

composer require laravel/ui

As soon as you will install Laravel/ui package and if you run php artisan command to checkout available commands you will see that this package has added new command like ui and ui:auth

Next let’s checkout what ui command includes with the help option

php artisan ui --help

You can see that it has type option which accepts bootstrap, vue and react as argument, additionally we have --auth option available to generate front-end scaffolding with authentication routes and views, next we will see that in action

Install Bootstrap in Laravel 6

Here is the command to install bootstrap scaffolding in laravel 6:

php artisan ui bootstrap

After executing above command now you can checkout the resource directory has updated bootstrap.js , app.scss and new _variables.scss file.

You can also checkout that the package.jsos file is updated as well:

 "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    }

Now you can install required npm dependencies and compile bootstrap scaffolding using following command:

npm install && npm run dev

Install VueJs scaffolding in Laravel 6

Use following command to generate vue scaffolding in your laravel 6 project:

php artisan ui vue

After executing above command you can see that app.js file from resource folder has been updated with example component and accordingly pacakge.json file has been updated.

Install React scaffolding in Laravel 6

Use following command to install react scaffolding

php artisan ui react

After execute php artisan ui react command and you can checkout the app.js file has been update with the ReactJS example component and new Example.js component has been added to the components directory.

/resources/js/components/Example.js

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Read more about – What is React and React Components?

Generate Auth scaffolding with VueJS

We can generate laravel authentication scaffolding with vuejs at the same time just by providing –auth option as showing below:

php artisan ui vue --auth

Generate Auth scaffolding with ReactJS

Similarly you can replace vue to react if you want to configure react into your laravel project.

php artisan ui react --auth

You know the great the thing of laravel UI package is if you already have generated auth views then it will ask about replacing existing view, you can say yes or no depending on your needs.

Hot to Run Make:auth command in Laravel 6

Now the last thing about the old command we had in laravel 5 that is make auth and yes we still have the same command available here in Laravel 6 with the change in the name:

php artisan ui:auth

If you only want to generate the views then use following option:

php artisan ui:auth --views

Conclusion:

I know having to learn configuration part is again another learning topic but you know the advantage of extracting this scaffolding in to separate package is that now we have so nice and clean options to generate scaffolding according to our needs and more additionally this package is going to up to date accordingly to necessary changes into the bootstrap, vue or react or might it will have tailwind configuration command in the future.

Recommended – How to use TailWindCSS with Laravel Framework

If you find this post helpful then don’t forget to provide you feedback using comments box below.