Решение типовых задач на Laravel - Vue и Bootstrap-vue

Для компиляции файлов Bootstrap и Vue можно воспользоваться Laravel-модулем laravel/ui, который может быть установлен через Composer:

composer require laravel/ui

После чего генерируем базовые скрипты Vue

php artisan ui vue

Или генерируем vue-авторизацию:

php artisan ui vue --auth

Bootstrap и Vue подключены. Далее необходимо запустить

npm install

Далее компилируем файлы:

npm run dev 

Затем установим BootstrapVue.

Таким образом мы сможем использовать компоненты BootstrapVue в своем приложении. Чтобы установить BootstrapVue, запуститим:

npm install bootstap-vue

Далее находим файл /resources/sass/app.scss. И после @import 'node_modules/bootstrap/scss/bootstrap'; добавляем следующую строку:

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

Это добавит некоторые специфические свойства css, необходимые для BootstrapVue.

Затем переходим в файл /resources/js/app.js и добавим ниже:

 import BootstrapVue from 'bootstrap-vue';
 Vue.use(BootstrapVue);

И, наконец, запускаем компиляцию:

npm run dev

Стоит также отметить, что компиляцияю файлов не обязательно постоянно запускать после изменений. Можно запустить наблюдатель за изменениями, которые автоматически будет запускать компилятор.

npm run watch

Исходный код файла app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

Исходный код файла app.js:

import BootstrapVue from 'bootstrap-vue';
require('./bootstrap');
window.Vue = require('vue');
Vue.use(BootstrapVue);

Vue.component('v-header', require('./components/HeaderComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Теперь в компонентах vue мы можем использовать Bootstrap. Остальную информацию, по использованию можно получить из официальной документации - Bootstrap-vue