Introdução ao NuxtJS: Conheça este incrível Framework

Introdução

Se você gosta de utilizar o Vuejs em seus projetos mas ainda fica gastando tempo e esforço configurando coisas como Vuex Store, roteamento e estrutura de pastas está na hora de conhecer o Nuxtjs. Este framework te entrega tudo isso, além contar com SSR, hot reloading e uma série de módulos que podem extender ainda mais o leque de recursos disponíveis.

O que é NuxtJS

Antes de falarmos mais sobre os recursos que o nuxt oferece é necessário entender o que ele é. Se trata de um framework construído sobre o ecossitema do Vuejs com o intuito de agilizar o desenvolvimento de aplicações front-end. O nuxt segue a filosofia de convenção ao invés de configuração. Isso significa que você não vai encontrar muitas configurações manuais para serem feitas, ao invés disso a documentação te orienta a seguir a estrutura de diretórios que é gerada automaticamente ao criar um novo projeto. O único arquivo de configuração que vem por padrão é o nuxt.config.js, neste arquivo é possível fazer configurações de build, incluir novos módulos ao projeto e até mesmo definir meta tags de SEO.

Criando um novo projeto

Para criar um projeto nuxt é preciso ter instalado o Nodejs na versão 12 ou superior. Caso você já tenha o Nodejs instalado basta abrir o terminal e executar o comando abaixo:

npx create-nuxt-app nome-do-projeto

O CLI do nuxt será executado e te fará algumas perguntas como: Linguagem padrão a ser utilizada (Javascript ou Typescript), quais ferramentas de linting devem ser adicionadas, qual framework de UI você pretende utilizar. Para navegar entre as opções utilize as arrow keys (setinhas do teclado), para marcar uma opção utilize a barra de espaço e para prosseguir para a próxima etapa utilize Enter.

Depois de finalizar a seleção das opções o CLI irá criar a base do projeto e instalar as dependências.

Entendendo a estrutura de diretórios

A seguir falarei um pouco sobre a estrutura de diretórios gerada pelo CLI do next explicando suas respectivas responsabilidades:

Assets

Este diretório deve ser utilizado para armazenar arquivos de imagens, fontes, ícones e também os arquivos de CSS globais da aplicação.

Components

Como o próprio nome já diz, aqui é onde devem ficar os componentes da aplicação. O nuxt consegue fazer o import destes componentes automaticamente, para isso basta adicionar a propriedade components: true no arquivo de nuxt.config.js.

Layouts

O nuxt nos permite criar um ou mais layouts base para as páginas, sendo que se criarmos um arquivo default.vue todas as páginas utilizarão este layout por padrão. Para alterar o layout de uma página é preciso declarar a propriedade layout indicando o nome do layout a ser utilizado. Por exemplo:

export default {
...
layout: 'custom-layout'
}

Também é possível criar um arquivo error.vue para ser exibido sempre que ocorrer um erro na aplicação, como quando o usuário tenta acessar uma página que não existe.

Vale ressaltar que este diretório não é criado automaticamente pelo CLI.

Pages

Aqui é onde a mágica do roteamento acontece. Todos os arquivos .vue são reconhecidos como uma rota, sendo assim, se criarmos um arquivo blog.vue teremos uma rota /blog disponível na aplicação. Além disso podemos utilizar rotas dinâmicas, por exemplo, supondo que queremos acessar uma página para exibir detalhes de um cadastro basta criar um arquivo _postId.vue. Assim podemos passar parâmetros de rota desta forma:

this.$router.push(`/blog/${postId}`)

Static

Este diretório também serve para armazenar imagens assim como o assets. A diferença é que ele não sofre nenhuma alteração no processo de build. Além disso este diretório é mapeado automaticamente para a raiz do servidor, e para acessar os arquivos é necessário utilizar / como caminho relativo. Por exemplo, static/logo.png pode ser acessado pelo caminho http://seu-dominio/logo.png

Store

O next já tem o vuex instalado por padrão e para configurar uma store é muito simples, basta criar um arquivo index.js, ou se preferir crie um sobdiretório com o nomde do módulo, por exemplo: store/posts/index.js

Plugins

É possível instalar bibliotecas que não expõem um módulo do nuxt através da estratégia de plugins. Por exemplo, imagine que você precisa instalar uma biblioteca de UI que não tenha integração nativa com o next. Neste caso é preciso criar um arquivo dentro do diretório de plugins e fazer a configuração recomendada pela documentação da biblioteca:

import Vue from 'vue'
import PrimeVue from 'primevue/config'
import Calendar from 'primevue/calendar'

import 'primeicons/primeicons.css'
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'

Vue.use(PrimeVue, { ripple: true })

Vue.component('Calendar', Calendar)

depois é só adicionar o arquivo no array de plugins do arquivo nuxt.config.js:

plugins: [
'@/plugins/primevue.js'
]

Conclusão

O nuxt é um framework muito robusto e com certeza agiliza bastante o desenvolvimento de aplicações front-end. Neste artigo falei um pouco sobre os principais recursos que ele oferece, mas se você quiser saber mais sobre este incrível framework pode acessar a documentação oficial