How to Include BootstrapVue in a Laravel Project
I am working on a web app built on Laravel and Laravel Spark right now, and I have decided to use Bootstrap for styling, as that is what Laravel Spark is set up for, and I have been wanting to learn Bootstrap for a while now.
After setting up the project, I decided that it would also work great to use BootstrapVue, the Bootstrap Vue component library for web apps. This will make the development a lot faster, and eliminate a lot of the html I will need to write.
I had to search the solution up for this, as it was a little tricky to include BootstrapVue in my project and I wanted to save you the hassle.
Install Bootstrap and Vue
If you are using Laravel, first install the Laravel composer package- laravel/ui that is already built for you. To do that, just open a terminal from your project root directory, and run:
composer require laravel/ui.
php artisan ui vue --auth.
With that command, composer will add all the authentication and ui components needed to offer authentication.
Bootstrap and Vue are included in this. You will also need to run npm install, and then npm run dev in order to view the bootstrap styling on your site.
npm run dev
Then make sure to run your database migrations with:
php artisan migrate.
Great work! You successfully added bootstrap, vue, and a great authentication service to your app!
Next, you will install BootstrapVue.
This is how you will be able to use BootstrapVue components in your app.
In order to install BootstrapVue, run:
npm install bootstap-vue
in your terminal from your root directory as you did above.
With that command, you will have downloaded all of the bootstrap-vue components into your node_modules directory. Your package.json will also be updated with the bootstrap-vue dependency.
Find your /resources/sass/app.scss file.
After the @import 'node_modules/bootstrap/scss/bootstrap'; declaration, add the following:
This will add some specific css properties that BootstrapVue requires.
Next, go to your /resources/js/app.js file and add the below
import BootstrapVue from 'bootstrap-vue';
Finally, run npm run dev to recompile your css and js in your terminal.
npm run dev
At that point, you should be able to use BootstrapVue in your project.
Hope this helps! Also, let me know what you are building in the comments! I would love to know what you are doing.
May 9, 2020
Thanks so much for visiting our blog.
I'm Chris, the owner of our small company.
Please reach out if you are needing help in some way! We may be able to serve you.
Thanks so much for reading. I hope you enjoy the content here.