This content originally appeared on DEV Community and was authored by Mohamed Hafidi
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.
in this tutorial i will show you how to install booststrap 5 and Vue.js 3 on Laravel.
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 the same order so 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.
~Simodev
This content originally appeared on DEV Community and was authored by Mohamed Hafidi
Mohamed Hafidi | Sciencx (2021-06-04T17:12:39+00:00) How To Properly Install Bootstrap 5 and Vue 3 on Laravel 8.. Retrieved from https://www.scien.cx/2021/06/04/how-to-properly-install-bootstrap-5-and-vue-3-on-laravel-8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.