How to include Bootstrap-Vue in Laravel

Question

How can I install/import/include Bootstrap Vue into my laravel project? I am new in Vue, I know how to install in a Vue JS application, but how can I add it laravel?

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

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

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */

    require("./bootstrap")

    window.Vue = require("vue")

    import BootstrapVue from "bootstrap-vue" //Importing

    Vue.use(BootstrapVue) // Teslling Vue to use this whole application

    /**
    * The following block of code may be used to automatically register your
    * Vue components. It will recursively scan this directory for the Vue
    * components and automatically register them with their "basename".
    *
    * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
    */

    // const files = require.context('./', true, /\.vue$/i);
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

    Vue.component(
        "example-component",
        require("./components/ExampleComponent.vue").default
    )

    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */

    const app = new Vue({
        el: "#app"
    })

sorry for misread but I am a bit confused, it's already says in docs, how to import vue-bootstrap inside the vue project? did you setup laravel app? did you look at vue app.js/components inside the laravel/resources? what did you tried so far? — , Apr 30 '19 at 07:06
i think before this question. you should learn (check some tutorials) how to run vue in laravel app. then you understand the basics. — , Apr 30 '19 at 07:09
You need to read my question again, if know how to import bootstrap-vue in laravel then let me know `point by point`, otherwise, your comments are not relevant, thanks — Santanu Biswas, Apr 30 '19 at 07:10

score 16 · Accepted Answer · answered Apr 30 '19 at 07:11

16

You can do this simply by node and npm. install node in your system. and then open terminal from your project root directory like you do with laravel for running artisan commands.

when you open terminal. simply run

npm i bootstrap-vue // you can also give save falg to save in package.json file

Here am not installing vue .beacuse it's already installed in laravel if you check your app.js file, inside your resources directory and after successfully installing this you can import this in your app.js by

import BootstrapVue from 'bootstrap-vue' //Importing

Vue.use(BootstrapVue) // Telling Vue to use this in whole application

For css you can import this by simply

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

in app.scss

After all configuration setup run

npm run dev //herewebpack do its work

or if you are in production, you can do this by

npm run production

answered Apr 30 '19 at 07:11

Karan Sadana

1,363
7
11

Done all the above steps, looks like the bootstrap-vue css is not loaded, I have edited my question with `app.js` and `app.scss` file code, please have a look – Santanu Biswas Apr 30 '19 at 07:23
import it from app.js `import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'` then run `npm run dev` to bundle all – Karan Sadana Apr 30 '19 at 07:26
Adding those imports to sass/app.css will bring you a bunch of errors, I suggest do not add them and instead add import "bootstrap-vue/dist/bootstrap-vue.css" in app.js as this references explain https://www.blog.tonyswierz.com/javascript/vuejs/laravel-install-setup-with-vuejs-bootstrap-and-bootstrap-vue/ – Fernando Torres Aug 22 '22 at 01:56

score 2 · Answer 2 · answered Apr 30 '19 at 07:10

Just execute npm i vue bootstrap-vue bootstrap inside folder there you have package.json or manually change package.json. Then you have to add into ./resources/assets/js/bootstrap.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

score 1 · Answer 3 · edited Jul 16 '22 at 02:20

1

Install your package with

npm install bootstrap-vue

or

yarn add bootstrap-vue

Then you can include globally your library by adding this row in your resources\js\app.js after window.Vue = require('vue');

Vue.use(require('bootstrap-vue'));

You can take a look to the official Vue documentation for plugins installation

edited Jul 16 '22 at 02:20

tony19

125,647
18
229
307

answered Oct 06 '19 at 13:33

Andrea Mauro

773
1
8
14

How to include Bootstrap-Vue in Laravel

3 Answers3

Linked