Por que utilizar o Nuxt JS? Conheça esse framework para criar aplicações Vue JS

O Vue JS é um framework que está crescendo cada vez mais. E nesse artigo iremos falar de uma ferramenta que pode nos ajudar a evoluir ainda mais nossas aplicações em Vue. Estamos falando do Nuxt JS. Mas o que é o Nuxt? Quais são as vantagens em usá-lo? Como pode nos ajudar? Iremos responder essas perguntas neste artigo, além de criar nosso primeiro projeto com o Nuxt.

O que é o Nuxt JS?

O Nuxt JS é um framework JavaScript criado Sebastien Chopin e Alexander Chopin em 2016. Ele é mantido pela comunidade, assim como o Vue JS. Note que ele é um framework desenvolvido para outro framework. Por que isso é necessário?

Por que o Nuxt é necessário?

Uma aplicação Vue por si só já é muito poderosa. Contudo, quando trabalhamos em uma aplicação muito grande, podemos sentir algumas dificuldades. Por exemplo: talvez sintamos dificuldades em manter a produtividade ao criar as páginas de nosso site.

Além disso, uma aplicação Vue por padrão é uma SPA (Single Page Application). Isso é bom devido à simplicidade. Contudo, essa abordagem pode nos trazer alguns problemas dependendo da aplicação que estamos desenvolvendo.

O conceito de uma SPA é possuir apenas um arquivo HTML e conforme realizamos interações com a página, mudamos seu conteúdo. No caso do Vue, mudamos os componentes que são renderizados. Mas esse conceito pode impactar em alguns quesitos importantes para que nosso projeto funcione bem. Uma questão é a velocidade. Como toda a renderização é feita no lado do cliente (browser), é feita toda a requisição dos arquivos CSS e JavaScript antes de nosso site estar de fato disponível para o usuário final. Esse processo pode ser um pouco demorado, o que faz nosso site perder performance. Isso pode prejudicar o rankeamento de nosso projeto nos motores de busca dos navegadores. Por exemplo, o Google recomenda que nosso site seja carregado em até 3 segundos para que tenha uma boa posição no ranking de busca.

E já que estamos falando de motores de busca, não podemos deixar de falar de SEO (Search Engine Optimization). Esse conjunto de estratégias ajuda nosso site a ser bem visto pelos motores de busca. E essa é uma outra questão que as SPAs podem nos prejudicar. Realizando a renderização completamente no lado do cliente, não conseguimos indexar nossa página através das meta tags por exemplo. Em outras palavras, os motores de busca não conseguem identificar o objetivo de nossas páginas e seus conteúdos. Logo, elas não serão recomendadas para os usuários.

Essas questões podem nos prejudicar. A boa notícia é que o Nuxt pode nos ajudar a solucionar esses “problemas”. Esse framework utiliza o conceito de SSR (Server-Side Rendering). Essa abordagem define que toda a renderização de nosso site ocorrerá do lado do servidor. Isso significa que o nosso HTML, incluindo as meta tags, nosso CSS e nosso JavaScript serão montados no servidor. Dessa forma, quando o browser requisitar uma página de nosso site, todo o conteúdo necessário já estará pronto e será enviado para o usuário de uma só vez. O resultado será que nosso site aumentará em velocidade e será amigável para o SEO, o que facilitará sua recomendação nos motores de busca dos navegadores, exatamente o que precisamos.

Outras vantagens do Nuxt

Além das vantagens que acabamos de citar, o Nuxt pode nos ajudar em outras questões também muito importantes. Pense por exemplo nas várias ferramentas que possuímos quando trabalhamos com uma aplicação Vue. Nós possuímos por exemplo o Vue Router para criar as rotas de nosso site e o Vuex para a manutenção de estado na aplicação. Nós inclusive falamos sobre cada uma dessas ferramentas com detalhes em nosso Curso Completo de Vue JS.

Esses recursos são muito úteis. Contudo, imagine precisar realizar a configuração de cada uma delas em um projeto que estamos iniciando. Isso pode demandar uma quantidade de tempo considerável. Neste sentido o Nuxt também pode nos auxiliar. Ele realiza toda essa configuração para nós automaticamente, pois ele utiliza o Vue Router e o Vuex em sua estrutura, além do vue-meta para o SEO, como comentamos anteriormente. Dessa forma precisamos nos preocupar apenas em desenvolver nossos arquivos em Vue, aumentando nossa performance no desenvolvimento.

A comunidade do Nuxt é muito ativa e a documentação desse framework é excelente! Logo, se tivermos alguma dúvida ou problema, não teremos dificuldades em encontrar a ajuda necessária. O simples processo de iniciar um projeto em Nuxt é muito simples. Vamos ver como fazer isso agora.

Criando o primeiro projeto em Nuxt

Para iniciar um projeto usando Nuxt, é necessário ter o Node instalado em nosso computador. Além disso, é importante que o npm ou Yarn também estejam instalados. Para criar nosso primeiro projeto, vamos usar o seguinte comando:

npx create-nuxt-app first-project

Nós nomeamos nosso projeto como “first-project”, mas poderíamos informar qualquer outro nome.

Após executar esse comando, responderemos uma série de perguntas para a configuração do projeto.

A primeira pergunta é quanto ao nome do projeto. Vamos definir o que já foi digitado antes. Logo, iremos pressionar Enter.

Iremos agora escolher a linguagem de programação que iremos usar no projeto. Podemos mudar a opção escolhida usando as setas do teclado. Escolheremos “JavaScript”.

A seguir iremos definir o Gerenciador de Pacotes que será usado para baixar os módulos em nossa aplicação. Escolheremos o npm.

O próximo passo será definir se usaremos algum framework para uma melhor experiência do usuário, como o Bootstrap ou Vuetify. Neste projeto inicial não iremos usar nenhum, logo basta pressionar Enter.

O Nuxt JS possui alguns módulos que podem nos ajudar em nosso projeto, como um módulo para Axios, usado para requisições AJAX, e um módulo para PWA, para converter nossa aplicação em uma Progressive Web App. Se desejarmos escolher alguma opção, basta pressionar Espaço. Não iremos usar nenhum módulo, então iremos pressionar Enter novamente.

Podemos também definir se iremos usar alguma ferramenta para análise de código em nosso projeto, como o ESLint. Vamos pressionar Enter mais uma vez.

Se desejarmos usar algum framework para testes em nosso projeto, como o Jest, poderemos definir neste momento. Em nosso caso iremos pressionar Enter.

O próximo passo é definir o tipo de renderização que iremos usar em nosso projeto. Podemos escolher “Universal”, que representa o SSR, ou então “Single Page App”, que é uma SPA. Note dessa forma que mesmo que o Nuxt nos ajude a resolver os problemas de uma SPA em Vue JS, também é possível criar uma SPA com Nuxt. Neste caso iremos escolher o modo “Universal”.

A próxima configuração é o tipo de deployment que iremos realizar. Temos a opção de criar um servidor em Node JS ou então realizar o deploy do projeto de forma estática, sem um servidor. Em nosso caso, iremos escolher a primeira opção, de “Server”.

Por fim escolheremos as ferramentas de desenvolvimento que desejamos. O arquivo jsconfig.json é recomendado se estamos trabalhando com o Visual Studio Code. Se desejar, poderá selecioná-lo usando a tecla de Espaço.

Apenas lembrando que essas configurações podem mudar com o tempo, de acordo com a versão do Nuxt que estivermos usando. Após isso a criação e configuração do projeto será iniciada.

Ao fim da instalação, uma mensagem de sucesso será retornada:

Para iniciar o nosso projeto, iremos executar os seguintes comandos:

cd first-project
npm run dev

Com esse comando o Nuxt irá iniciar o nosso servidor de desenvolvimento:

Geralmente o Nuxt é disponibilizado na porta 3000. Assim, acessando http://localhost:3000 no navegador, veremos o seguinte resultado no navegador:

Perceba que nosso projeto já está sendo reconhecido no navegador. Vamos analisar agora a estrutura de pastas que o Nuxt nos oferece:

Nesse momento podemos ver uma outra questão em que o Nuxt nos ajuda. Uma dúvida que geralmente possuímos quando trabalhamos com o Vue JS é onde criar os nossos arquivos. O Vue não possui uma regra de onde definir cada arquivo, isso muitas vezes é deixado a cargo do desenvolvedor. Contudo, pode ser que desejemos seguir um padrão de pastas (ainda mais se formos indecisos ao escolher o nome das pastas ?). Neste sentido o Nuxt também nos ajuda, pois ele já oferece uma estrutura de pastas que podemos seguir.

Vemos muitas pastas nessa estrutura e talvez nos sintamos um pouco perdidos com elas. A boa notícia é que cada um desses diretórios possui um arquivo README.md, que mostra a função do diretório. Assim, se tivermos alguma dúvida, podemos saná-la lendo este arquivo.

Podemos dizer que os diretórios mais importantes para iniciar um novo projeto são as pastas pages e components. A pasta components armazena os componentes de nossa aplicação. Assim, se você já possui algum conhecimento sobre esse conceito do Vue JS, não sentirá dificuldades em manipular essa pasta.

Já o diretório pages armazena todas as páginas de nosso projeto. Podemos dizer que é neste diretório que iremos agrupar os vários componentes que criarmos e também iremos definir as meta tags de cada página. O mais incrível é que o Nuxt converte cada arquivo neste diretório em uma rota de nossa aplicação. Assim as rotas são criadas automaticamente, não precisamos nos preocupar com isso. Vamos ver isso acontecendo na prática.

Criando uma rota em nossa aplicação

Vamos criar um arquivo about.vue no diretório pages. Ele possuirá o seguinte conteúdo:

<template>
	<h1>Conheça a Hcode Treinamentos</h1>
</template>

Agora, ao acessar http://localhost:3000/about, vemos o seguinte:

Excelente! A rota “/about” foi criada dinamicamente e nosso HTML foi renderizado corretamente. Impressionante a simplicidade do Nuxt, não é mesmo?

Basta repetir esse processo para criar qualquer outra rota em nosso projeto!

Conclusão

Neste artigo vimos uma introdução ao Nuxt JS, o framework intuitivo para Vue JS. Esperamos que esse framework possa te ajudar a fazer o que o Gregg Pollack disse no vídeo de introdução que está no site do Nuxt: “Gastar menos tempo com configuração e mais tempo com o que realmente importa: resolver problemas e criar aplicativos incríveis com Vue JS”.

Até o próximo artigo :)