Como utilizar o BootstrapVue

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