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!
Top comments (3)
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!
how do i update sass to the latest version?
thanks
Thanks a lot.. ^^