Nuxt.js é o framework Vue mais intuitivo disponível atualmente. Ele combina o poder do Vue.js com recursos de renderização do lado do servidor para torná-lo ainda mais poderoso. Com ele, você pode construir desde um aplicativo de renderização do lado do cliente do Vue.js completo, até um aplicativo gerado estaticamente abrangente e um aplicativo monolítica.

Nuxt.js resolve o problema de estruturação do seu projeto Vue.js, pois ele vem com uma arquitetura de desenvolvimento de frontend pronta para o empreendimento. As funcionalidades do Nuxt.js já estão estruturadas usando os padrões da indústria para criar aplicativos empresariais.

Este guia irá explorar Nuxt.js, o que você pode construir com ele e como funciona.


O que é Nuxt.js?

Nuxt.js é um framework de renderização do lado do servidor construído sobre o Vue.js. Ele abstrai a maioria das configurações complexas envolvidas no gerenciamento de dados assíncronos, middleware e roteamento. Ele também ajuda a estruturar aplicativos Vue.js usando a arquitetura padrão da indústria para construir aplicativos Vue.js simples ou empresariais.

Logo oficial Nuxt.js.
Logo oficial Nuxt.js. (Fonte da imagem: Média)

Para que serve o Nuxt.js?

O Nuxt.js permite que você crie vários tipos diferentes de aplicativos. Abaixo estão os três aplicativos mais populares feitos com o Nuxt.js.

Aplicativos gerados estaticamente

Este tipo de site não requer nenhuma fonte de conteúdo externa – o conteúdo já está integrado no HTML. Exemplos desses sites incluem portfólios, sites de demonstração e tutoriais.

Aplicativos de página única (SPA)

Este tipo de abordagem de desenvolvimento de frontend busca conteúdo dinâmico de uma API externa e o exibe no lado do cliente. A maioria dos frameworks de JavaScript, como React.js, Vue.js, Angular e Ember.js, são todos frameworks de aplicativos de página única.

Além disso, o sistema de roteamento SPA é geralmente construído utilizando a API de histórico HTML 5 ou o hash de localização, permitindo que os desenvolvedores modifiquem a URL de um site sem ter que fazer uma atualização completa da página.

Aplicativos universais

“Aplicativos Universais” é um termo que descreve o uso de uma abordagem de renderização do lado do servidor para buscar dados do lado do cliente no servidor antes de renderizar completamente a página no navegador do cliente.

A renderização do lado do servidor (SSR) é um problema conhecido no Vue.js porque envolve configurações tediosas para fazer tudo certo.

O Nuxt.js resolve o problema de SSR no Vue.js, o que é útil para a otimização de mecanismos de pesquisa (SEO). O Nuxt.js pode até mesmo estender aplicativos universais para acomodar um aplicativo monolítico completo, onde o frontend e o backend compartilham uma única base de código.

Como o Nuxt.js funciona?

Nuxt.js opera de maneira semelhante a um framework do lado do servidor quando um usuário acessa um site. Se a renderização do lado do servidor estiver habilitada, as solicitações são renderizadas no servidor toda vez que o usuário solicita uma página, tornando necessário um servidor para atender a cada solicitação. Se a renderização do lado do cliente estiver habilitada, o conteúdo da página é renderizado no navegador usando JavaScript.

Estas são as principais ações e métodos utilizados no Nuxt.js:

  • nuxtServerInit (Ação): Este é o primeiro ciclo de vida do hook que é chamado no lado do servidor se a Vuex Store estiver habilitado. É uma ação Vuex que é chamada apenas no lado do servidor para pré-popular o armazenamento e, finalmente, pode ser usada para despachar outras ações na Vuex Store.
  • validate() (Função): O método validate é chamado antes da renderização dos componentes da página. Serve para validar parâmetros dinâmicos de um componente de página.
  • O método asyncData() é usado para buscar dados e renderizar os dados no lado do servidor, enquanto o método fetch() é usado para preencher a store antes de renderizar a página.

Por exemplo, quando um site Nuxt.js recebe uma visita inicial da página, ele chama a ação nuxtServerInit para atualizar os estados do Vuex (se definidos na Vuex Store). Caso contrário, se o nuxtServerInit não estiver definido, ele passa para um estágio diferente.

Em seguida, ele procura por middlewares nesta ordem. Primeiro, ele verifica o arquivo nuxt.config.js para qualquer middleware global. Se estiver definido, ele será executado antes de verificar as páginas de layout para middlewares. Finalmente, ele executará o middleware de página individual.

Após a execução de todos os middlewares em ordem, ele verificará se a rota é dinâmica e executará o método validate() criado e validado.

Em seguida, ele chama o método asyncData() da página para buscar e renderizar dados no lado do servidor antes de chamar o método fetch() para preencher a Vuex Store no lado do cliente.

Até este ponto, a página deve ter todos os dados e conteúdo necessários para exibir uma página da web apropriada. Então a página é renderizada pelo mecanismo Nuxt.js e mostrada ao visitante, completando o processo.

Este fluxograma ilustra todos os passos necessários para renderizar uma única página:

Uma visão geral do ciclo de vida dos hooks Nuxt.js.
Uma visão geral do ciclo de vida dos hooks Nuxt.js. (Fonte: Nuxt Website)

 

Não importa qual ferramenta você use, você sempre se sentirá mais confiante quando você entender como a ferramenta funciona sob o capô. Com a explicação acima de como o Nuxt.js funciona sob o capô, será fácil de entender. Vamos explorar os benefícios de usar o Nuxt.js para o seu próximo projeto.

Benefícios do Nuxt.js

A seguir, vamos falar sobre os benefícios da framework Nuxt.js e por que ela se tornou tão popular desde então.

Crie aplicativos universais sem complicações

O Nuxt.js torna muito fácil criar aplicativos com renderização do lado do servidor. Se você já tentou desenvolver um aplicativo com renderização do lado do servidor usando Vue.js, provavelmente encontrou obstáculos difíceis devido às várias opções de configuração disponíveis tanto para o lado do servidor quanto para o lado do cliente.

O recurso de renderização do lado do servidor já está integrado ao Nuxt.js e é fácil de usar. Ele oferece acesso às propriedades isServer e isClient em seus componentes para decidir se está renderizando algo no lado do cliente ou do servidor.

Além disso, fornece o método asyncData dedicado à busca e renderização de dados no lado do servidor do componente da sua página.

Renderize estaticamente aplicativos Vue com benefícios universais

Os sites gerados de forma estática estão em ascensão na indústria web, e com um único comando nuxt generate, você pode gerar uma versão estática do seu site, com todo o HTML com as rotas correspondentes.

O comando nuxt generate funciona exatamente como a abordagem de aplicativo universal com todas as funcionalidades SSR habilitadas, mas para um site gerado de forma estática.

No Nuxt.js, um site gerado estaticamente é como construir um poderoso aplicativo universal sem um servidor para alimentar o recurso SSR.

Obtenha a divisão automática de código

Uma das razões pelas quais o Nuxt.js é muito rápido em desempenho é devido à divisão automática de código, onde uma rota recebe um único arquivo JavaScript com apenas o código necessário para executar aquela rota, reduzindo assim o tamanho do seu aplicativo.

Essa divisão automática de código usa uma configuração Webpack que vem integrada ao gerar uma versão estática do seu site.

Recarregamento automático (Hot Reload)

O recarregamento automático é uma ótima funcionalidade adicionada para resolver o método demorado de mudar e atualizar na programação de software.

Ele é configurado para atualizar automaticamente o servidor de desenvolvimento quando você alterar qualquer arquivo no diretório raiz.

Ao desenvolver e trabalhar em arquivos .vue, usa-se uma configuração do Webpack para verificar alterações e compilar tudo para você. Essa abordagem economiza tempo para os desenvolvedores e incentiva um desenvolvimento de aplicativos mais rápido.

Obtenha compilação ES6/ES7

Nuxt.js vem pré-construído com Webpack e Babel para traduzir e compilar as últimas versões JavaScript como ES6 e ES7 em JavaScript que pode rodar em navegadores mais antigos.

Babel está configurado para compilar todos os arquivos .vue e o código ES6 nas tags do script em JavaScript que funciona em todos os navegadores.

Essa funcionalidade resolve a batalha de criar aplicativos compatíveis com navegadores manualmente e configurar a partir do zero.

Como criar um aplicativo Nuxt.js

Nesta seção, vamos explorar como criar um aplicativo Nuxt.js. Antes de começarmos, exploraremos alguns conceitos críticos no desenvolvimento de um aplicativo Nuxt.js.

Criando um aplicativo Nuxt.js

Criar um novo projeto é fácil e direto ao ponto. Você pode criar um projeto com diferentes abordagens listadas na documentação oficial, mas a abordagem mais preferida e recomendada é usar a CLI.

Para criar um novo aplicativo usando a CLI, certifique-se de ter o npx instalado (o npx é enviado por padrão quando você instala o yarn ou o npm 5.2.0 acima).

Em seguida, digite o seguinte comando na pasta em que deseja colocar seu projeto:

npx create-nuxt-app 
cd 
npm run dev

Certifique-se de substituir o nome project-name> pelo nome real do seu projeto.

Entendendo a estrutura da pasta Nuxt.js

Ao criar um novo aplicativo usando qualquer uma das diferentes abordagens de instalação na documentação oficial do Nuxt.js, você é apresentado a vários arquivos e pastas gerados pelo CLI. Esses arquivos e pastas são vitais e exigem que algumas das pastas permaneçam inalteradas sem configuração adicional.

Vamos dar uma olhada na estrutura de pastas, discutir cada arquivo e pasta e entender a importância delas.

Estrutura de pastas Nuxt.js recém-criadas.
Estrutura de pastas Nuxt.js recém-criadas.

1. .nuxt

O diretório .nuxt é oculto e gerado quando você inicia o servidor de desenvolvimento, chamado de build directory. O diretório contém arquivos gerados ou artefatos ao executar o comando npm run build.

Você pode modificar os arquivos neste diretório somente para fins de depuração porque os arquivos serão gerados automaticamente novamente uma vez que você executar o comando dev ou build.

2. Assets

A pasta de ativos (assets) contém todos os seus ativos não compilados, como imagens, fontes, arquivos SASS e Stylus. O Webpack irá compilar qualquer arquivo que esteja incluído neste diretório durante o processo de renderização.

3. Components

O diretório de Components é similar ao diretório de Components no Vue.js, onde todos os seus componentes Vue são armazenados. Os componentes são os arquivos que compõem as diferentes partes de suas páginas e podem ser reutilizados e importados para suas páginas, layouts e outros componentes também.

4. Layouts

A pasta de layouts armazena o layout do seu aplicativo e é muito útil quando se deseja separar diferentes estruturas do seu aplicativo para usuários autenticados ou convidados.

Você pode criar vários layouts correspondentes à estrutura do seu aplicativo. Às vezes, você pode querer que algumas páginas em seu site tenham barras laterais, cabeçalhos, rodapés, etc. diferentes. Esses e mais são estruturados usando os arquivos de layout armazenados na pasta layouts.

5. Middleware

Middlewares são funções personalizadas que podem ser executadas antes de renderizar uma página ou um grupo de páginas (layout) e eles podem ser definidos e armazenados na pasta de middlewares no Nuxt.js.

Middlewares são muito úteis ao criar um site somente para membros, e se você quiser restringir o acesso a certas páginas, você pode configurar um middleware para verificar se um usuário está ou não conectado.

No Nuxt.js, os middlewares funcionam de forma similar aos middlewares em qualquer estrutura de programação backend, como ExpressJS, Laravel, etc. Ele tem três tipos diferentes de middleware: chamado, anônimo e roteador middleware.

6. Pages

O diretório pages é a base do sistema de roteamento Nuxt.js, pois ele lê todos os arquivos .vue dentro deste diretório e cria a configuração do roteador automaticamente.

O diretório pages contém suas visualizações e rotas do aplicativo, e cada componente de página também é um componente Vue padrão.

Ainda assim, Nuxt.js trata isso como uma rota, adicionando atributos e funções especiais para tornar o desenvolvimento do seu aplicativo universal o mais fácil possível.

7. Plugins

O diretório plugins contém códigos JavaScript que você deseja executar antes de instanciar a raiz do aplicativo Vue.js. Este é o local para adicionar plugins do Vue e injetar funções ou constantes.

No Nuxt.js, ao invés de usar a função Vue.use(), você simplesmente cria um novo arquivo na pasta plugins e injeta seu plugin do Vue na instância do Vue usando o arquivo nuxt.config.js.

8. Static

A pasta static contém todos os arquivos estáticos do seu projeto que provavelmente não mudarão ou que devem ser renderizados sem nenhuma compilação.

Todos os arquivos incluídos no diretório static serão automaticamente servidos pelo Nuxt.js e acessíveis por meio da URL raiz do seu projeto.

Este diretório é excelente para arquivos como favicon, robots.txt, etc.

9. Store

O diretório store contém todos os seus arquivos da Vuex Store, sendo dividido em módulos por padrão.

Vuex Store sai da caixa, mas é desativada por padrão. Você precisa ativar a store através da criação de um arquivo index.js no diretório da store.

Vuex Store é necessária ao criar e gerenciar um projeto empresarial. É por isso que o Nuxt.js vem pré-construído com Vuex Store da Vue sendo configurado para acomodar o desenvolvimento de aplicativos de nível empresarial.

Páginas e sistema de roteamento Nuxt.js

Nuxt.js torna o sistema de roteamento tão fácil quanto criar diretórios e arquivos no diretório pages. Ele gera automaticamente um arquivo de roteamento com base na estrutura de arquivos e pastas desse diretório.

Por exemplo, se você tiver um arquivo about.vue no diretório de páginas, ele irá converter automaticamente a rota, e você pode então visitar a rota em seu navegador para ver o conteúdo da página “Sobre”.

Esse sistema de roteamento também permite definir três tipos diferentes de rotas apenas criando arquivos e pastas. Vamos explorar mais detalhes sobre esses tipos de rota.

1. Roteamento básico

Roteamento básico são aquelas rotas que não requerem nenhuma configuração adicional para funcionarem. É o tipo mais simples de roteamento e pode ser tão simples quanto /about, /contact, etc.

Para criar um sistema básico de roteamento, você pode estruturar seu diretório de páginas como o mostrado abaixo:

pages/
--| services.vue
--| contact.vue
--| index.vue

Nuxt.js irá gerar um arquivo de roteador usando os arquivos que você adicionou no diretório de páginas automaticamente:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: ‘services’,
      path: '/services’,
      component: 'pages/services’
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
  ]
}

Agora todos os nossos arquivos estão ordenados e automaticamente roteados.

2. Roteamento aninhado

Rotas aninhadas são rotas criadas dentro de uma rota principal. As rotas aninhadas são usadas para criar vários níveis de roteamento.

Para criar rotas aninhadas, crie uma pasta principal e coloque todos os arquivos de rota dentro dessa pasta.

Vamos tentar criar uma rota aninhada:

pages/
 --| dashboard/
 -----| user.vue
 -----| settings.vue
 --| dashboard.vue
 --| services.vue
 --| contact.vue
 --| index.vue

Na estrutura de pastas acima, criamos um novo arquivo e pasta com o mesmo nome do dashboard, e em seguida, adicionamos um arquivo user.vue e settings.vue como os filhos da pasta dashboard.

Esta simples estrutura de pastas irá gerar um roteador com rotas similares ao que está abaixo:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'services',
      path: '/services',
      component: 'pages/services'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Rotas aninhadas são um pouco complicadas de criar em Vue.js, especialmente se você tiver que criar muitas, como você pode ver no exemplo de código acima, mas o Nuxt.js tornou isso simples e fácil, criando apenas arquivos Vue em uma pasta aninhada.

3. Roteamento dinâmico

Isso é útil ao criar um aplicativo de notícias, por exemplo, onde você não conhece o ID ou slug da postagem que o usuário irá clicar para ler. Mas com a rota dinâmica, você pode recuperar o ID/slug da postagem e renderizar a postagem correta com o ID/slug.

Para criar uma rota dinâmica, você adiciona um sublinhado ao nome do arquivo .vue ou ao diretório. Você pode nomear o arquivo ou diretório com qualquer nome de sua escolha, mas um sublinhado deve ser adicionado para torná-lo dinâmico.

Por exemplo, se você definir um arquivo _slug.vue no diretório pages, poderá acessar o valor usando o objeto params.slug. Vamos demonstrar com um exemplo como criar uma rota dinâmica:

pages/
--|user/
-----| index.vue
-----| about.vue
-----| _routeName
-------| index.vue
-------| info.vue
--| dashboard/
-----| user.vue
-----| settings.vue
--| dashboard.vue
--| services.vue
--| _id.vue
--| contact.vue
--| index.vue

Anexando o sublinhado a _id e _routeName irá criar uma rota dinâmica para a página com parâmetro de identificação, juntamente com uma rota principal com um parâmetro de string com as rotas filhas acima. Esta estrutura de página irá gerar um roteador com as seguintes rotas no arquivo:

   {
      name: 'work',
      path: '/work',
      component: 'pages/work'
    },
    {
      name: 'contact',
      path: '/contact',
      component: 'pages/contact'
    },
    {
      name: 'id',
      path: '/:id',
      component: 'pages/_id.vue'
    }
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-about',
      path: '/user/about',
      component: 'pages/user/about.vue'
    },
    {
      name: 'user-routeName',
      path: '/user/:routeName',
      component: 'pages/user/_routeName/index.vue'
    },
    {
      name: 'user-routeName-info',
      path: '/user/:routeName/info',
      component: 'pages/user/route.vue'
    },
    {
      name: 'dashboard',
      path: '/dashboard',
      component: 'pages/dashboard.vue',
      children: [
        {
          name: 'dashboard-user',
          path: '/dashboard/user',
          component: 'pages/dashboard/user.vue'
        },
        {
          name: 'dashboard-settings',
          path: '/dashboard/settings',
          component: 'pages/dashboard/settings.vue'
        }
      ]
    }
  ]
}

Agora que já exploramos os diferentes sistemas de roteamento que vêm integrados na framework Nuxt.js, vamos aprender como criar e gerenciar a Vuex Store.

Utilizando a Vuex Store em Nuxt.js

O Nuxt.js resolve um importante problema de estrutura da Vue ao simplificar como a Vuex é tratado ao construir um projeto empresarial. A pasta store é automaticamente construída ao criar um novo aplicativo.

Você pode ativar a Vuex Store criando um arquivo index.js na pasta store. Com essa melhoria simples, a Vuex Store agora é estruturada e modularizada usando as melhores práticas descritas na documentação oficial da Vuex, que encoraja o desenvolvimento de aplicativos em grande escala.

Seu arquivo index.js deve conter a seguinte estrutura para corresponder a como o Nuxt.js estrutura sua Vuex Store. Vamos dar uma olhada:

export const state = () => ({
  
})
export const getters = {

}
export const mutations = {
  
}
export const actions = {
  
}

Nuxt.js permite que você use a abordagem split-by-feature approach em seu aplicativo de larga escala. Com esta abordagem, você cria diferentes arquivos da Vuex Store para corresponder às funcionalidades que você tem em seus aplicativos. Por exemplo, se seu aplicativo tem usuários, posts e comentários, você pode criar estes diferentes arquivos como users.js, posts.js e comments.js no diretório store.

Este método facilita o acesso a um determinado arquivo store com base na funcionalidade do aplicativo, transformando o tedioso processo de localização e atualização de dados em uma caminhada sem esforço no parque.

Resumo

Nuxt.js é um framework frontend Vue muito popular para SSR (renderização no servidor) e geração estática. Ele não apenas resolve o problema de configurar e definir SSR em aplicativos Vue, mas também melhora o desenvolvimento de aplicativos empresariais, seguindo as melhores práticas em estruturar e arquitetar aplicativos Vue de grande escala.

Este guia explorou tudo o que você precisa saber sobre o Nuxt.js, incluindo o que você pode construir com ele. Discutimos páginas geradas estáticamente, aplicativos de página única (SPAs) e aplicativos universais, bem como desenvolvê-los usando o Nuxt.js.

Agora você viu por si mesmo como pode ser fácil e benéfico escolher o Nuxt.js para o seu próximo grande projeto empresarial. Deixe-nos saber na seção de comentários o que você construirá com esses novos superpoderes!