How to Include BootstrapVue in a Laravel Project

Website Development

Christopher Wray

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.

Next run

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 install
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.

Next, in order to start using the BootstrapVue components in your project, you will need to include the css and javascript within your app.scss and app.js.

Find your /resources/sass/app.scss file.

After the @import 'node_modules/bootstrap/scss/bootstrap'; declaration, add the following:

@import 'node_modules/bootstrap-vue/src/index.scss';

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';
Vue.use(BootstrapVue);

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.

More For You