Introdução
O Bootstrap vue é 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 o Bootstrap-vue 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.
Em primeiro lugar, a principal vantagem é a produtividade, porque acima de tudo o framework oferece diversos componentes prontos e já preparados para o VueJS. Muitas funcionalidades que você provavelmente iria precisar escrever na mão, dependendo de como fizesse, o Bootstrap-vue já traz por padrão. Podemos usar como exemplo as, tabelas, paginação, carousel, alertas e outros diversos componentes.
Outro ponto importante, é que o Bootstrap-vue está em constante evolução e possui muitos componentes preparados para o Vue. Além disso há componentes que ainda não tem no Bootstrap, como 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, basta retirar o IconsPlugin deixando somente a importação do BootstrapVue. Outras opções de ícones são: Font-Awesome e Material Icons.
Além dessa importação, para que tudo funcione bem, é necessário importar o css do Bootstrap-vue:
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 e pronto para uso. Para começar a utilizar é só pegar os componentes no site do Bootstrap-vue 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!!
