DEV Community

Cover image for How To Install Bootstrap 5 and Vue 3 in Laravel 8.
Mohamed Hafidi
Mohamed Hafidi

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next, you only have to :

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

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"
    }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

then,

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

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"
    }
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
caiowilson profile image
Caio Wilson

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!

Collapse
 
filippo1996 profile image
Filippo Mazzamuto

how do i update sass to the latest version?
thanks

Collapse
 
thomastrovon profile image
Thomas Nilton de Carvalho Vanini

Thanks a lot.. ^^