Nuxt

O que é Nuxt?

Nuxt é o meta-framework do Vue. Enquanto o Vue oferece componentes e reatividade, o Nuxt adiciona as partes que toda aplicação real precisa — roteamento, renderização no servidor, busca de dados, um runtime de servidor e um ecossistema de módulos — e conecta tudo isso com configurações padrão inteligentes.

Ele é a contraparte do Vue para o Next.js e segue a mesma filosofia geral: utilizar o sistema de arquivos para o roteamento, renderizar no servidor por padrão e tratar a busca de dados como uma prioridade. Se você já conhece Vue, o Nuxt parece um próximo passo natural, em vez de um framework totalmente novo.

Roteamento baseado em arquivos

Arquivos em pages/ tornam-se rotas. Segmentos dinâmicos utilizam colchetes, e pastas aninhadas criam rotas aninhadas.

pages/
├── index.vue            # /
├── about.vue            # /about
├── blog/
│   ├── index.vue        # /blog
│   └── [slug].vue       # /blog/:slug
└── dashboard/
    ├── index.vue        # /dashboard
    └── settings.vue     # /dashboard/settings

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

useRoute fornece a rota atual, e NuxtLink gerencia a navegação no lado do cliente com prefetching. Layouts em layouts/ envolvem as páginas e permitem compartilhar um shell entre várias rotas.

Auto-imports

O Nuxt importa automaticamente as APIs do Vue, seus próprios composables, além dos seus componentes e composables. Assim, você escreve menos boilerplate e seus arquivos permanecem focados.

<!-- components/UserCard.vue -->
<script setup>
const props = defineProps({ user: Object });
</script>

<template>
  <article class="card">
    <h3>{{ user.name }}</h3>
  </article>
</template>

Componentes em components/ ficam disponíveis em qualquer lugar sem a necessidade de importação, e seus próprios composables em composables/ também são importados automaticamente. O resultado é menos cerimônia e menos listas de importação para manter.

Busca de dados com useFetch

useFetch e useAsyncData são a maneira recomendada de carregar dados. Eles são executados durante a renderização no servidor, transferem o resultado para o cliente e expõem os estados de carregamento e erro.

<!-- pages/posts.vue -->
<script setup>
const { data: posts, pending, error } = await useFetch("/api/posts");
</script>

<template>
  <p v-if="pending">Loading…</p>
  <p v-else-if="error">Could not load posts.</p>
  <PostList v-else :posts="posts" />
</template>

Como a requisição acontece no servidor, a primeira pintura (first paint) já inclui os dados. Isso evita aquele flash de conteúdo vazio que ocorre ao fazer o fetch em onMounted, e funciona com cache, revalidação e chaves customizadas para um controle mais refinado.

O servidor Nitro

O Nuxt inclui um motor de servidor chamado Nitro. Arquivos em server/api/ tornam-se endpoints de API, e server/routes/ podem servir handlers personalizados.

// server/api/users.get.ts
export default defineEventHandler(async () => {
  const config = useRuntimeConfig();
  return $fetch("https://api.example.com/users", {
    headers: { Authorization: config.apiKey },
  });
});

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const user = await db.user.create({ data: body });
  return { user };
});

Isso mantém segredos e credenciais de terceiros no servidor. O cliente chama o seu próprio endpoint, e o Nitro cuida do restante. O mesmo motor é implantado em Node, funções serverless, edge runtimes e hosts estáticos através de adaptadores.

SEO, meta e módulos

O Nuxt torna o SEO amigável ao servidor simples através de composables.

<!-- pages/about.vue -->
<script setup>
useSeoMeta({
  title: "About us",
  description: "Who we are and what we build.",
  ogImage: "/og/about.png",
});
</script>

Os composables useHead e useSeoMeta gerenciam títulos, descrições, URLs canônicas e tags sociais, e são renderizados corretamente no servidor para que os crawlers possam visualizá-los. Além disso, o ecossistema de módulos do Nuxt adiciona autenticação, conteúdo, imagens, analytics e muito mais com apenas uma ou duas linhas de configuração.

Modos de renderização

O Nuxt suporta diversas estratégias de renderização e permite que você escolha por rota:

• Universal (SSR) renderiza no servidor e faz a hidratação no cliente — este é o padrão.
• Static (SSG) pré-renderiza as páginas no momento do build.
• SPA renderiza inteiramente no cliente, como um app Vue clássico.
• Hybrid mistura essas estratégias, permitindo que páginas de marketing sejam estáticas enquanto um dashboard seja renderizado no cliente.

Você também pode habilitar a regeneração estática incremental e regras de rota para ajustar o cache e a renderização sem precisar reestruturar o app.

Melhores práticas

• Use useFetch e useAsyncData em vez de fazer fetch em onMounted.
• Mantenha segredos e chamadas de terceiros em rotas server/api.
• Deixe os auto-imports fazerem o trabalho deles; não tente forçar importações manuais.
• Defina os metadados de SEO com useSeoMeta em cada página.
• Escolha um modo de renderização por rota, em vez de um único modo para tudo.
• Use NuxtLink para navegação interna para que o prefetching e as transições funcionem.
• Organize a lógica reutilizável em composables em composables/.

Erros comuns

• Buscar dados em onMounted e perder o benefício do SSR.
• Expor chaves de API ao chamar terceiros diretamente do client.
• Recorrer a um store global quando useState ou um composable seriam suficientes.
• Ignorar as regras de rota e renderizar excessivamente páginas que poderiam ser estáticas.
• Presumir que as APIs de módulos do Nuxt 2 funcionam sem alterações no Nuxt 3.
• Esquecer os metadados de SEO porque o framework torna fácil ignorá-los.

Próximos passos

O Nuxt transforma o Vue em uma plataforma full-stack. Aprofunde seus conhecimentos em Vue, adicione TypeScript e compare essa abordagem com Next.js e SvelteKit. Depois, construa um pequeno app com uma página, uma server route e useFetch para sentir como as peças se encaixam naturalmente.