{"componentChunkName":"component---src-templates-single-template-tsx","path":"/criando-um-blog-com-vuejs-o-nuxtjs","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Introdução

\n

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

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.

\n

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.

\n

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.

\n

O que é Vue.JS?

\n

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

\n

O que é o Nuxt.js?

\n

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

\n

O que é SSR?

\n

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).

\n

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.

\n

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.

\n
\n

Instalando

\n

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

\n
    \n
  1. Conhecimento em JavaScript
    2. \n
  2. Node v6 ou superior
    3. \n
  3. npm ou yarn
    4. \n
  4. vue-cli global: npm install -g vue-cli
    5. \n
\n
\n

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.

\n
\n

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

\n
vue init nuxt-community/starter-template blog-with-vuejs\ncd blog-with-vuejs/\nyarn # ou npm install
\n

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

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

O que foi executado

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

Estrutura de um projeto Nuxt.js

\n

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.

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Diretório assetsEsse diretório contém seus recursos não compilados, como Less, SASS, Stylus ou JavaScript.
Diretório componentEsse diretório contém seus componentes Vue. O Nuxt.js não carrega automaticamente esses componentes.
Diretório layoutsEsse diretório contém os layouts da sua aplicação.
Este diretório não pode ser renomeado.
Diretório middlewareEsse 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\n renderizar uma página ou um grupo de páginas (layouts).
Diretório pagesEsse diretório contém as views e rotas da sua aplicação. O framework lê todos os arquivos .vue dentro desse\n diretório e cria o router da aplicação.
Este diretório não pode ser renomeado.
Diretório pluginsEsse diretório contém os plugins JavaScript que deseja executar antes de instanciar o aplicativo Vue.js da raiz.
Diretório staticEsse diretório contém seus arquivos estáticos. Cada arquivo dentro deste diretório é mapeado para a raiz do seu site /.\n Exemplo: /static/robots.txt é mapeado como http://seusite.com/robots.txt\n
Este diretório não pode ser renomeado.
Diretório storeEsse 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\n arquivo index.js neste diretório habilita essa opção automaticamente.
Este diretório não pode ser\n renomeado.
Arquivo nuxt.config.jsEsse arquivo contém a configuração personalizada do Nuxt.js.
Este arquivo não pode ser renomeado.
Arquivo package.jsonEsse arquivo contém suas dependências e scripts da sua aplicação.
Este arquivo não pode ser renomeado.
\n
\n

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

\n
\n
\n

Executando

\n

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.

\n
$ yarn dev # ou npm run dev
\n

Basta abrir: localhost:3000

\n

\n \n ,\n data: [{}],\n error: null,\n state: {},\n serverRendered: true,\n }\n </script>\n <script src=\"/_nuxt/manifest.6577d27b1c69002c3e9a.js\" defer></script>\n <script src=\"/_nuxt/common.65aa6f5764a5ec5e7c56.js\" defer></script>\n <script src=\"/_nuxt/app.9a3a71120f4feff88235.js\" defer></script>\n</body>\n

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.

\n
\n

See you ✌️

\n

/ end

","excerpt":"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…","timeToRead":6,"frontmatter":{"category":["vue"],"date":"há 9 anos","datePublished":"2017-11-05T00:00:00.000Z","description":"Essa é a parte 1 de uma série onde iremos usar a tecnologia SSR (Server Side Rendering) para criar um blog e no final hospeda-lo no GitHub pages e no Netlify.","path":"/criando-um-blog-com-vuejs-o-nuxtjs","tags":["vue","javascript"],"title":"Criando um blog com Vue.js e Nuxt.js","image":{"publicURL":"/static/criando-um-blog-com-javascript-vuejs-ebd5c2aa1260dd12581493938d2f9a22.jpg","name":"criando-um-blog-com-javascript-vuejs"}},"fields":{"readingTime":{"words":974}}}},"pageContext":{}}}