Criando um blog com Vue.js e Nuxt.js

Publicado há 2 anos por Fernando Moreira.Tempo de leitura: 6 minutos - 974 palavras.

Introdução

Todo mundo (devs) tá acostumado a criar blogs utilizando o Jekyll e hospedá-los no GitHub pages. E se eu disser que existem muitas outras plataformas para criar projetos estáticos?

Não que eu esteja dizendo que o Jekyll é uma ferramenta ruim, muito pelo contrário! O Jeyll abriu minha mente para o mundo dos geradores de sites estáticos.

No site staticgen você encontrará uma série de projetos, aplicações e ferramentas, em várias linguagens diferentes e todas elas tem o mesmo proprósito: Fazer o build de um projeto estático, ou seja gerar HTML, CSS e JS final para o seu projeto.

Nesse artigo nós iremos utilizar a tecnologia Server Side Rendering (SSR) ou Renderização do lado do servidor em pt-BR, e para isso usaremos o Vue.js com o Nuxt.js.

O que é Vue.JS?

O Vue.js é uma biblioteca (lib) javascript para o desenvolvimento de componentes reativos para interfaces web modernas (Reactive Components for Modern Web Interfaces).

O que é o Nuxt.js?

Traduzindo de nuxtjs.org/guide: O Nuxt.js é uma estrutura para a criação de aplicativos do Universal Vue.js.

O que é SSR?

Vue.js é uma lib para construir aplicativos do lado do cliente. Por padrão, os componentes Vue produzem e manipulam DOM no navegador do cliente. No entanto, também é possível renderizar os mesmos componentes HTML direto do servidor e enviá-los para o navegador do cliente e continuar manipulando via javascript (SPA).

Um aplicativo Vue.js criado pelo servidor também pode ser considerado "isomórfico" ou "universal", no sentido de que a maioria do código do seu aplicativo é executado no servidor e no cliente.

Utilizando SSR podemos manter a acessibilidade padrão do HTML e deixá-lo acessivel por bots como o Google e outros, juntando assim o melhor dos dois mundos, SEO + SPA.

Instalando

Para instalar o Nuxt.js você precisa dos seguintes pré-requisitos:

Conhecimento em JavaScript
Node v6 ou superior
npm ou yarn
vue-cli global: npm install -g vue-cli

OBS: O vue-cli é uma CLI simples para scaffolding de projetos Vue.js, ele vai fazer algumas perguntas como Nome do projeto, Descrição e Autor.

Vamos seguir a mesma instalação feita no site do Nux.js em nuxtjs.org/guide/installation.

vue init nuxt-community/starter-template blog-with-vuejs
cd blog-with-vuejs/
yarn # ou npm install

Os comandos acima foram executados no terminal, você pode executar todos de uma só vez concatenando com && cada um deles.

vue init nuxt-community/starter-template blog-with-vuejs \
  && cd blog-with-vuejs/ \
  && yarn

O que foi executado

Iniciamos um projeto chamado blog-with-vuejs;
Entramos dentro do diretório com o comando: cd blog-with-vuejs/;
Instalamos as dependencias do projeto com o comando: yarn (Você também pode executar yarn install ou npm install)

Estrutura de um projeto Nuxt.js

A estrutura padrão de um aplicativo Nuxt.js destina-se a fornecer um ótimo ponto de partida para pequenas e grandes aplicações. Claro, você é livre para organizar seu aplicativo, como quiser.

Diretório `assets`	Esse diretório contém seus recursos não compilados, como Less, SASS, Stylus ou JavaScript.
Diretório `component`	Esse diretório contém seus componentes Vue. O Nuxt.js não carrega automaticamente esses componentes.
Diretório `layouts`	Esse diretório contém os layouts da sua aplicação. Este diretório não pode ser renomeado.
Diretório `middleware`	Esse diretório contém o Middleware de sua aplicação. O Middleware permite que você defina funções personalizadas que podem ser executadas antes de renderizar uma página ou um grupo de páginas (layouts).
Diretório `pages`	Esse diretório contém as views e rotas da sua aplicação. O framework lê todos os arquivos `.vue` dentro desse diretório e cria o router da aplicação. Este diretório não pode ser renomeado.
Diretório `plugins`	Esse diretório contém os plugins JavaScript que deseja executar antes de instanciar o aplicativo Vue.js da raiz.
Diretório `static`	Esse diretório contém seus arquivos estáticos. Cada arquivo dentro deste diretório é mapeado para a raiz do seu site `/`. Exemplo: `/static/robots.txt` é mapeado como `http://seusite.com/robots.txt` Este diretório não pode ser renomeado.
Diretório `store`	Esse diretório contém seus arquivos do Vuex Store. A opção Vuex Store é implementada na estrutura do Nuxt.js. A criação de um arquivo `index.js` neste diretório habilita essa opção automaticamente. Este diretório não pode ser renomeado.
Arquivo `nuxt.config.js`	Esse arquivo contém a configuração personalizada do Nuxt.js. Este arquivo não pode ser renomeado.
Arquivo `package.json`	Esse arquivo contém suas dependências e scripts da sua aplicação. Este arquivo não pode ser renomeado.

Veja na documentação do Nuxt.js para saber mais informações sobre esses diretórios e arquivos que eu citei acima.

Executando

Agora vamos rodar o projeto que foi criado pelo Vue-cli em desenvolvimento, para isso basta executar o comando yarn dev ou npm run dev em seu terminal.

$ yarn dev # ou npm run dev

Basta abrir: localhost:3000

Se você visualizar o código fonte você verá todo o HTML renderizado pelo Nuxt, algo como isso:

<body data-n-head="">
  <div id="__nuxt" data-server-rendered="true">
    <div
      class="nuxt-progress"
      style="width:0%;height:2px;background-color:#3B8070;opacity:0;"
    ></div>
    <div>
      <section class="container">
        <div>
          <div class="VueToNuxtLogo">
            <div class="Triangle Triangle--two"></div>
            <div class="Triangle Triangle--one"></div>
            <div class="Triangle Triangle--three"></div>
            <div class="Triangle Triangle--four"></div>
          </div>
          <h1 class="title">blog-with-vuejs</h1>
          <h2 class="subtitle">Nuxt.js project</h2>
          <div class="links">
            <a href="https://nuxtjs.org/" target="_blank" class="button--green"
              >Documentation</a
            >
            <a
              href="https://github.com/nuxt/nuxt.js"
              target="_blank"
              class="button--grey"
              >GitHub</a
            >
          </div>
        </div>
      </section>
    </div>
  </div>
  <script type="text/javascript">
    window.__NUXT__ = {
      layout: 'default',
      data: [{}],
      error: null,
      state: {},
      serverRendered: true,
    }
  </script>
  <script src="/_nuxt/manifest.6577d27b1c69002c3e9a.js" defer></script>
  <script src="/_nuxt/common.65aa6f5764a5ec5e7c56.js" defer></script>
  <script src="/_nuxt/app.9a3a71120f4feff88235.js" defer></script>
</body>

Note que dentro da tag <body> não tem apenas o famoso div <div id="app"></div> como estamos acostumados a ver em SPA`s feitas com Vue e esse é o maior ponto positivo de um app que usa SSR.

See you ✌️

/ end

Publicado há 2 anos por Fernando Moreira.