How To Install Bootstrap 5 and Vue 3 in Laravel 8.

#laravel #vue #bootstrap #webdev

In this tutorial i will show you how to install booststrap 5 and Vue.js 3 on Laravel.

Bootstrap is the world’s most popular Css framework and Vue 3 is a fast, small in file size and equipped with a good TypeScript support.

Step 1 : Create Laravel Project

laravel new Project_name

Step 2 : Install Laravel/UI

Laravel UI is an official library that comes with predefined UI components.
To install Laravel/UI run the command:

composer require laravel/ui

Step 3 : Install Bootstrap 5 in Laravel

In this step please follow up with me the commands on the same order and don't skip any of the commands listed bellow .

php artisan ui bootstrap

You may noticed that this command will install Bootstrap 4, the reason you have to run it is that it will set up a lot of things for you so you don't have to do it yourself compared of installing bootstrap 5 directly.

Now we will switch the Bootstrap version to Bootstrap 5 using this commands.

Note that you should run both this commands on the same order so you wont get any issues.

npm install bootstrap@next @popperjs/core --save-dev

npm install bootstrap @popperjs/core --save-dev

Next, you only have to :

npm install
npm run dev

if you followed up with me you will have Bootstrap 5 installed on your Laravel project successfully. you can check wish Bootstrap version is installed on your project on package.json file.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }

As you see Bootstrap is installed successfully.

Step 4 : Install Vue 3 in Laravel

Like the previous step we will install Vue 2 using Laravel/UI because it will set up a lot of things for us.

php artisan ui vue

Now we will switch the Vue version to Vue 3 using this command:

npm install --save vue@next && npm install --save-dev vue-loader@next

then,

npm install
npm run dev

lets check the package.json again.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.0.11",
        "axios": "^0.21",
        "bootstrap": "^5.0.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0",
        "vue-template-compiler": "^2.6.12"
    }

Congrats! now you have Bootstrap 5 and Vue 3 installed on your Laravel project.

At the end, I want to mention that you can use my starter Laravel 8 Project with Vue 3 and Bootstrap 5 already preinstalled for you.
⭐The Github repository!

~Saimo

Top comments (3)

Caio Wilson • Aug 13 '21

I think you'd have to add the vue loader to the laravel mix
mix.js('resources/js/app.js', 'public/js')
.vue() // <--- here inside your webpack.mix.js
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();

I did.
thanks anyway!