Introdução
O BootstrapVue é um framework css que juntou as funcionalidades do já existente Bootstrap, e adaptou para o VueJS, e isso possibilita criar sites e sistemas responsivos e aproveitando ainda melhor o VueJS com o framework.
Vantagens
Com ele você pode utilizar as grids para construir sistemas responsivos, importar componentes de maneira modular, usar a biblioteca de ícones padrão, criar novos temas e entre outras coisas.
Na minha opinião, a principal vantagem é a produtividade, porque o framework oferece muitos componentes prontos e já preparados para o ambiente de VueJS.
Muitas funcionalidades que você provavelmente iria precisar escrever na mão, dependendo de como fizesse, o ele já traz por padrão, como por exemplo, tabelas, paginação, carousel, alertas e outros diversos componentes.
Outro ponto importante, é que o BootstrapVue está em constante evolução, e há muitos componentes que já tem nele e preparados para o Vue, que ainda não tem no Bootstrap base, como por exemplo, o Sidebar e o Avatar.
Configuração
Para configurar é necessário realizar a instalação com o gerenciador de pacotes.
NPM:
npm install vue bootstrap-vue bootstrap
Yarn:
yarn add vue bootstrap-vue bootstrap
Depois disso, é necessário realizar a importação do Bootstrap-vue no main.js, dessa forma:
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Caso você não queira utilizar os ícones padrão, e queira utilizar alguma outra biblioteca como o FontAwesome, é só retirar o IconsPlugin e deixar somente a importação do BootstrapVue.
Além dessa importação, para que tudo funcione bem, é necessário importar o css do BootstrapVue:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
O arquivo main.js deve ficar assim:
import App from './App.vue'
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Conclusão
Pronto, agora está tudo configurado, para começar a utilizar é só pegar os componentes e colocar no projeto que funcionará tudo corretamente, tanto os comportamentos, quanto os estilos.
Futuramente irei postar mais artigos sobre como configurar e utilizar alguns desses componentes. Muito obrigado, e até a próxima!!
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Referências
https://bootstrap-vue.org/docs