Criando projeto Vue.js com componentes Bootstrap 4 customizados.
Tutorial de como criar um tema do Bootstrap customizado e importar componentes do BootstrapVue em seu projeto Vue.js
tl;dr — 👨💻 código fonte, 🔎 demo
Neste tutorial veremos como:
- Criar um tema customizado do Bootstrap através de variáveis;
- Importar apenas os componentes realmente necessários para o projeto;
- Integrar o BootstrapVue com o Vue.js de forma global e/ou individual.
Iniciando um novo projeto Vue
Use o vue-cli para criar um novo projeto Vue.js a partir do template webpack-simple ou a gosto, mas lembre-se que faremos o uso do node-sass para compilarmos o SASS, por tanto durante a inicialização do template webpack-simple, é necessário selecionar a opção Y (sim) quando exibida a opção de usar SASS. O vue-cli fará o projeto com o node-sass já pré-configurado.
// Inicie novo projeto Vue.js com Webpack
$ npx vue init webpack-simple// Instale as dependências
$ npm install
Instalando o Bootstrap
// Instale Bootstrap
$ npm install bootstrap --save-devIncluindo e customizando estilos do Bootstrap
Crie os arquivos _bootstrap.scss e _variables.scss em seu projeto, eles serão responsáveis por importar o estilo (CSS) do Bootstrap e customizar componentes e possibilidade de remover os não necessários para o projeto.
// Crie diretório styles
$ mkdir -p src/assets/styles// Crie arquivos _bootstrap.scss e _varibales.scss
$ touch src/assets/styles/_{bootstrap,variables}.scss
./src/assets/styles/_bootstrap.scss
O functions, variables e mixins (linha 8 a 10) são settings, então é obrigatório importa-los, já os outros (linha 12 a 44) você pode escolher apenas o que seu projeto fará uso.
Lembre-se que o caminho dos imports deve leva-los até os arquivos fontes do Bootstrap, neste caso, em node-modules.
Nota: É possível incluir ou remover cores tema, grid, breakpoints e outras funcionalidades através da modificação do mapa e loop.
./src/assets/styles/_variables.scss
Este arquivo é responsável por sobrescrever variáveis de cores, tipografia, grids, espaçamentos, paddings e muitas outras do Bootstrap.
./src/App.vue
Importe os arquivos _variables.scss e _bootstrap.scss (linhas 47 a 50). Feito isso já é possível utilizar variáveis, funções, mixins, componentes e classes CSS do Bootstrap no seu projeto Vue.js.
Importando scripts do Bootstrap
Agora precisamos inserir os scripts do Bootstrap, pois alguns componentes CSS dependem disso para o total funcionamento, por exemplo, como o Carrossel e Modal.
O Bootstrap faz o uso do JQuery, que está sendo cada vez mais deixado de lado pelos desenvolvedores, por esse e outros motivos surgiu o projeto chamado BootstrapVue que possibilita o desenvolvedor desfrutar componentes do Bootstrap criados com Vue.js de forma independente e sem JQuery.
É possível registrar todos os componentes/diretivas ou individualmente do BootstrapVue globalmente no arquivo principal (main.js), para fins demonstrativos e desempenho, neste tutorial registraremos o componente Layout (container, row, col e form-row) de forma global e o Modal a parte em um componente especifico (App.vue).
Então vamos lá, primeiro deve-se instalar o BootstrapVue via npm.
// Instalar BootstrapVue
$ npm install bootstrap-vue --save./src/main.js
No arquivo main.js, importe e adicione o componente que deseja usar globalmente no Vue.js (linhas 3 e 5). Neste exemplo importaremos apenas o Layout.
./src/App.vue
Importe o Modal componente do BootstrapVue (linhas 59 a 73) e use-o no template (linhas 33 a 52)
Conclusão
É só isso, agora você pode personalizar o tema através de variáveis e escolher os componentes do Bootstrap que serão úteis ao projeto.
- 👨💻 código fonte (GitHub by adammacias)
- 🔎 demo (Codepen by adammacias)
Eu espero ter ajudado e também que os dinossauros voltem. 🦖 E isso não custou nenhum Bitcoin.
Compartilhem, abraços e até a próxima!
