Nuxt.js

Quando a aplicação cresce, surgem necessidades comuns: várias páginas, carregamento otimizado, HTML gerado no servidor para melhorar o SEO. O Nuxt.js é um framework construído sobre o Vue que já traz essas soluções prontas. Se o Vue é o motor, o Nuxt é o carro completo, com chassi, freios e direção já montados.

Esta aula continua a de Vue.js. Os componentes em arquivos .vue estão em Componentes.

O que o Nuxt oferece

Roteamento automático baseado na estrutura de arquivos;
Renderização no servidor (SSR) para melhor SEO e desempenho;
Geração de sites estáticos;
Importação automática de componentes;
Sistema de módulos para acrescentar funcionalidades.

Criar um projeto

npx nuxi@latest init <nome-do-projeto>

O npx vem junto com o Node.js e executa um pacote sem instalá-lo de forma global no computador.

Roteamento

No Nuxt, cada arquivo .vue dentro do diretório pages vira uma rota:

Arquivo	URL gerada
`pages/index.vue`	`/`
`pages/sobre.vue`	`/sobre`
`pages/livros/index.vue`	`/livros`
`pages/livros/cadastro.vue`	`/livros/cadastro`

O arquivo app.vue é o esqueleto da aplicação e precisa conter o componente <NuxtPage />. Pense nele como o palco de um teatro: o palco fica fixo e o ator (a página atual) muda conforme a URL.

<template>
  <NuxtPage />
</template>

Execução

npm run dev

Esse comando sobe um servidor local, normalmente em http://localhost:3000, com recarga automática: cada alteração no código aparece no navegador sem atualizar a página. O atalho está na seção scripts do package.json:

"scripts": {
  "dev": "nuxt dev"
}

Outros comandos comuns são npm run build (gera a versão de produção) e npm run preview (visualiza essa versão localmente).

Componentes no Nuxt

O Nuxt importa automaticamente os arquivos .vue do diretório components. Para manter o nome original do arquivo, sem prefixo de pasta, configure o nuxt.config.js:

components: [
    {
        path: '~/components',
        pathPrefix: false,
    },
],

Como escrever esses arquivos — <template>, <script>, $emit e o fluxo de dados — está na aula de Componentes. Os Slots aprofundam a composição da interface.

Bulma e Font Awesome

O Bulma é um framework CSS leve, baseado em Flexbox, que oferece classes prontas. O Font Awesome oferece milhares de ícones vetoriais. Para usá-los no Nuxt:

npm install bulma @fortawesome/fontawesome-free

css: [
    'bulma/css/bulma.css',
    '@fortawesome/fontawesome-free/css/all.css',
],

A partir daí, <button class="button is-primary">Salvar</button> gera um botão estilizado, e <i class="fas fa-book"></i> exibe um ícone de livro. A lista completa de ícones está em fontawesome.com/icons.

Exemplo completo

git clone -b dev https://github.com/rodrigoprestesmachado/cpw2
cd cpw2/exemplos/vue/nuxt/books
npm install
npm run dev

Referências

Nuxt.js: The Intuitive Vue Framework
Vue.js: The Progressive JavaScript Framework
Bulma: Modern CSS framework based on Flexbox

CC BY 4.0 DEED