How To Install Bootstrap 5 and Vue 3 in Laravel 8.
Tags: laravel, vue, bootstrap, webdev
Published: 2021-06-04 17:12:39

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!](https://github.com/saimow/Laravel8-Vue3-Bootstrap5)

~[Saimo](https://saimo.me/)