Começando com Nuxt.js

Se você é um desenvolvedor Vue que busca construir aplicações prontas para produção com um fluxo de trabalho moderno, o Nuxt 4 oferece o caminho mais rápido. O Nuxt é construído sobre o Vue 3 com renderização do lado do servidor, renderização híbrida, roteamento baseado em arquivos e um modelo de implantação unificado que funciona em ambientes Node, hospedagem estática, serverless e edge.

Este tutorial amigável para iniciantes orienta você na criação de sua primeira aplicação Nuxt 4 usando os padrões atuais como Vue 3, Vite, TypeScript, composables e Nitro.

O Que É o Nuxt 4 e Por Que Você Deveria Usá-lo?

O Nuxt 4 é a versão principal atual do framework Nuxt e a escolha recomendada para novas aplicações Vue no final de 2025. Ele usa Vue 3, Vite e o motor de servidor Nitro para entregar uma experiência de desenvolvimento rápida e uma arquitetura de produção flexível.

Diferentemente de aplicações Vue simples, o Nuxt 4 fornece SSR pronto para uso, gerencia roteamento automaticamente, lida com busca de dados em contextos de servidor e cliente, e vem com uma estrutura de projeto previsível e orientada por convenções.

Vue 3 + Vite por Padrão

O Nuxt 4 usa Vite para seu servidor de desenvolvimento e pipeline de build. Isso proporciona substituição de módulo a quente quase instantânea, inicializações rápidas e pacotes de saída altamente otimizados.

A API de Composição do Vue 3 e o design TypeScript-first fornecem forte inferência de tipos, melhor organização de código e comportamento de componente previsível.

TypeScript, Sem Configuração Necessária

O suporte a TypeScript é integrado. O Nuxt gera automaticamente tipos baseados nos diretórios do seu projeto, rotas de API, middleware e componentes. Sua IDE entende todo o seu projeto desde o momento em que você salva.

Configurando Seu Primeiro Projeto Nuxt 4

Instalação com npm create nuxt@latest

Crie um novo projeto usando a CLI moderna do Nuxt 4:

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Isso configura um projeto Nuxt 4 com TypeScript, Vite, Nitro e composables auto-importados prontos para uso.

Visão Geral da Estrutura de Diretórios

Um projeto Nuxt 4 recém-criado inclui:

• pages/ — Roteamento baseado em arquivos
• components/ — Componentes auto-importados
• composables/ — Lógica reutilizável com importações automáticas
• server/api/ — Endpoints de servidor alimentados pelo Nitro
• public/ — Recursos estáticos
• nuxt.config.ts — Configuração TypeScript-first

Esta estrutura elimina sobrecarga de configuração e mantém tudo previsível.

Conceitos Principais: Pages, Layouts, Composables, Auto-Imports

Roteamento Baseado em Arquivos no Nuxt 4

Adicione um arquivo Vue dentro de pages/ e o Nuxt cria automaticamente uma rota:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Product {{ id }}</h1>
</template>

Parâmetros de rota dinâmicos usam colchetes.

Layouts para UI Compartilhada

Layouts permitem wrappers compartilhados em torno de páginas:

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

As páginas usam o layout padrão automaticamente. Você pode alternar layouts usando definePageMeta.

Composables e Auto-Imports

Composables dentro de composables/ são auto-importados em todos os lugares:

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

Sem declarações de importação, sem código repetitivo — o Nuxt cuida de tudo.

Busca de Dados no Nuxt 4

useFetch para Requisições com Suporte a SSR

useFetch lida com carregamento de dados do lado do servidor e hidratação do cliente:

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

Isso evita busca dupla entre servidor e cliente e funciona perfeitamente com o Nitro.

Rotas de API via Nitro

Crie endpoints de servidor em server/api/:

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

O Nitro otimiza esses endpoints para implantações Node, estáticas, serverless ou edge automaticamente.

useAsyncData para Lógica Personalizada

Se você precisa de mais controle:

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

Gerenciamento de Estado com Pinia

Para estado em nível de aplicação, o Nuxt 4 usa Pinia:

npm install @pinia/nuxt

Habilite-o:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Crie uma store:

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

O Pinia se integra diretamente com os auto-imports e comportamento SSR do Nuxt.

Modos de Renderização no Nuxt 4

Renderização do Lado do Servidor por Padrão

O Nuxt 4 renderiza páginas no servidor para SEO e performance. Você pode ajustar a renderização por rota:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

Isso habilita aplicações híbridas que misturam SSR, páginas estáticas pré-renderizadas e seções dinâmicas apenas no cliente.

Geração Estática e Implantação Híbrida

Gere saída estática se necessário:

npm run generate

Você pode pré-renderizar páginas de marketing, manter dashboards dinâmicos e executar tudo através do Nitro.

Implantando Sua Aplicação Nuxt 4

Build para Produção

npm run build

O Nuxt gera um diretório .output/ contendo código do servidor, recursos do cliente e presets para todas as principais plataformas de hospedagem.

Implantação Agnóstica de Plataforma

Implante em:

• Servidores Node
• Hospedagem estática
• Plataformas serverless (AWS, Vercel, Netlify)
• Redes edge (Cloudflare Workers, Vercel Edge)

O Nitro seleciona o preset correto automaticamente.

Conclusão

Começar com Nuxt.js hoje significa usar o Nuxt 4.
Com SSR por padrão, renderização híbrida, auto-imports, composables e Nitro alimentando a implantação, o Nuxt 4 oferece tudo que você precisa para construir aplicações Vue rápidas, modernas e de fácil manutenção.

Comece com:

npm create nuxt@latest

—e você já está na base certa.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.