Integrando o Vue a um Framework CSS

É possível criar um sistema completo utilizando apenas html/css puros, sem nenhuma biblioteca ou framework extra. Mas este processo tende a ser mais complexo porque será necessário ter conhecimentos avançados em CSS. Neste curso iremos escolher um framework css pronto, dos vários existentes. Vamos a seguir comentar cada um deles.

Frameworks CSS existentes

Bootstrap

Talvez seja o mais conhecido, já que ele vem sendo usado desde a época do jQuery. Inclusive a versão 4 ainda necessita do jQuery, e já sabemos que a versão 5 ele não precisará mais. Eu só o recomendo utilizar caso você o conheça muito bem, já tendo usado em outros projetos.

Bulma

Um ótimo framework css puro, geralmente é a minha escolha para projetos mais simples. Não necessita de javascript, apenas a importação de uma biblioteca CSS e pronto, já podemos utilizar suas funcionalidades. Será a nossa escolha nesse curso, por ser simples, fácil e poderoso.

Quasar

Este é um framework CSS completo para o Vue. Possui dezenas de componentes e funcionalidades extras em relação ao Bulma, por isso ele é utilizado em projetos reais.

Vuetify

Outro Framework CSS completo. Com muitos componentes disponíveis e utilizando o padrão do Material Design. É sempre a minha escolha pessoal em projetos reais.

Quasar ou Vuetify

Na comunidade existe uma grande discussão entre qual escolher: Quasar ou Vuetify? A minha sugestão é, leia a documentação dos dois, instale os dois, e veja qual irá lhe atender melhor.

Instalação do Bulma

Para o projeto do curso, iremos utilizar o Bulma. A sua instalação é incrivelmente simples. Primeiro, use o npm para instalar a biblioteca:

$ npm install -s bulma
1

Após a instalação, basta importar a biblioteca css no arquivo main.js, veja:




 








import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '../node_modules/bulma/css/bulma.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11

Criando um menu simples

Após a instalação, vamos criar um template Bulma muito simples. Este template compreende um menu superior, no qual utilizaremos a tag do html5 nav. Abra o arquivo App.vue, e na tag template adicione:

<template>
  <div id="app">
    <nav class="navbar is-dark">
      <div class="navbar-brand">
        <router-link class="navbar-item" to="/">Home</router-link>
        <router-link class="navbar-item" to="/about">About</router-link>
      </div>
    </nav>
    <router-view />
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

Dica

Remova toda a tag <style> do App.vue, não precisaremos do css que estava ali.

Dica

Perceba que o App.vue não vai possuir as tags <script> e <style>. Isso é perfeitamente normal no Vue quando estamos apenas criando uma página HTML simples. No caso do App, sua função é desenhar o menu superior e incluir o <router-outlet>, e mais nada.

O que fizemos aqui? Removemos a tag <div id='nav'> por <nav class='navbar is-dark'> e <div class='navbar-brand'>. Estas classes css, navbar, is-dark e navbar-brand são classes do Bulma, e não tem nenhuma relação com o Vue em si. Estamos apenas usando css para deixar a app um pouco mais bonita.

Menu do bulma

Criando o conteúdo da página principal

O componente Home.vue é carregado quando na url /. Vamos alterar este componente, que está no diretório views. Substitua todo o seu conteúdo para:

<template>
  <div>
    <div class="hero is-light">
      <div class="hero-body">
        <h1 class="title">Home</h1>
      </div>
    </div>
    <section class="section">
      Texto....
    </section>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

Aqui usamos mais um pouco do Bulma para desenhar a interface. A classe hero adiciona um título grande na tela, enquanto o elemento section se encarrega do texto. Temos um design semelhante a figura a seguir:

Com isso temos um design pronto, bonito, com o mínimo de esforço possível para que possamos voltar o nosso foco ao Vue.