Laravel 6x Frontend with Bootstrap and Vue

By Darío Rivera

Posted On 2023-07-10 in Laravel

One of the first questions you may have when starting with Laravel is How to handle Frontend?. Well, I have good news for you, Laravel has an excellent scaffolding for CSS and JavaScript that allows you to quickly structure your frontend files with Bootstrap, React and/or Vue. As you may have noticed in the title of this post, we will focus on using Laravel with Bootstrap and Vue, a truly fantastic combination.

Installation

To create the frontend scaffolding after the Installation of Laravel, you must install laravel-ui.

composer require laravel/ui:^2.4

Once you have done this, you can use the following artisan commands.

php artisan ui bootstrap
php artisan ui vue

After each command, you will see an output similar to the following respectively.

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

After this, you can run the indicated commands. For this, you must have previously installed NPM.

npm install && npm run dev

Scaffolding

As you can see, Laravel uses NPM to manage frontend packages. Among the scaffolding that Laravel has created, the following files should be highlighted.

resources/sass/app.scss: This SASS file is the entry point where additional CSS resources are added. Here you can import fonts or other SASS files you've created.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

resources/js/components/ExampleComponent.vue: This is an example file of how you can create a component in Vue. Ideally, your components should be located in the same folder as this file.

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

public/mix-manifest.json: This file indicates the files that will be generated by NPM RUN. That's why I suggest putting these folders in the .gitignore file below. Each time you run npm run, these files will be generated again.

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

Upload your changes to VCS

Before uploading the changes to your repository, make sure to add the following lines to the .gitignore file.

/public/css/
/public/js/

Remember that these files are generated with run dev and not with run prod, so it is something you must add to the deployment procedure of your project. You can add the other files to your VCS.

git add .gitignore
git add composer.json
git add composer.lock
git add package.json
git add package-lock.json
git add resources
git add public/mix-manifest.json

Once you have done this, you will have a perfect scaffolding to work with your frontend dependencies with NPM, using bootstrap and Vue. See you soon!

Installation

Scaffolding

Upload your changes to VCS

Categories