Crie sites e aplicações Vue com roteamento, lógica de servidor e renderização flexível
O Nuxt é um framework gratuito e de código aberto para criar sites e aplicações full-stack com Vue. Ele fornece roteamento, renderização, recursos de servidor, convenções para tratamento de dados, ferramentas de desenvolvimento e suporte à implantação, para que uma equipe não precise montar essas bases separadamente.
O assunto principal aqui é o Nuxt, o framework. nuxt.com é seu site oficial e central de documentação, onde desenvolvedores podem conhecer o framework, os módulos, a equipe e os recursos da comunidade.
Do que trata o Nuxt?
O Nuxt trata de transformar componentes Vue em uma aplicação estruturada que pode ser executada no servidor e no navegador. Um projeto Nuxt pode entregar HTML renderizado no servidor, comportar-se como uma aplicação do lado do cliente, gerar páginas estáticas ou aplicar regras diferentes de renderização e cache a rotas distintas.
Seu escopo é mais amplo do que a geração de sites estáticos. O Nuxt pode sustentar um site de conteúdo, uma aplicação autenticada, endpoints de servidor ou um produto que combine os três.
Nuxt em um minuto
- O Vue fornece o modelo de interface. Os desenvolvedores continuam escrevendo componentes Vue, templates, composables e estado reativo.
- O Nuxt fornece a estrutura da aplicação. Arquivos e diretórios reconhecidos definem páginas, layouts, middleware, plugins, utilitários e manipuladores de servidor.
- A renderização universal é o padrão. O servidor pode produzir a primeira resposta HTML antes que o Vue ative o comportamento interativo no navegador.
- A renderização pode mudar conforme a rota. Seções estáticas, armazenadas em cache, renderizadas no servidor e exclusivas do cliente podem coexistir.
- O Nitro sustenta a camada de servidor. Ele gerencia a renderização no servidor, endpoints de API, middleware e saídas voltadas à implantação.
- O Nuxt Content é opcional. As equipes podem adicionar um sistema de conteúdo baseado em arquivos sem torná-lo obrigatório para todos os projetos Nuxt.
Como o Nuxt se relaciona com o Vue?
O Vue é o framework de interface de usuário subjacente ao Nuxt. O Nuxt mantém o modelo de componentes do Vue e acrescenta as decisões necessárias ao redor dele para transformar componentes em um site ou uma aplicação com rotas e pronta para implantação.
Um desenvolvedor que trabalha com Nuxt ainda usa conceitos do Vue, como componentes de arquivo único, props, eventos, composables e reatividade. O Nuxt acrescenta convenções para definir onde esses componentes ficam, como as URLs chegam até eles, quando os dados são buscados e se o código é executado no servidor, no navegador ou em ambos.
| Aspecto | Papel do Vue | Papel do Nuxt |
|---|---|---|
| Interface | Componentes, templates e reatividade | Organiza componentes em páginas e layouts |
| Navegação | Integra-se a ferramentas de roteamento | Cria rotas a partir de arquivos em app/pages/ |
| HTML inicial | Fornece primitivas de renderização | Configura a renderização no servidor e a pré-renderização |
| Lógica de servidor | Fora do escopo da biblioteca central de interface | Adiciona endpoints Nitro, middleware e utilitários de servidor |
| Implantação | Escolhida pela aplicação | Produz saídas por meio de predefinições de implantação do Nitro |
Essa estrutura integrada reduz a configuração inicial e oferece aos colaboradores um vocabulário de projeto compartilhado. O custo é que os desenvolvedores precisam compreender comportamentos específicos do Nuxt, incluindo importações automáticas, varredura de diretórios, hidratação e limites entre servidor e cliente.
Como os arquivos se tornam rotas e recursos da aplicação?
O Nuxt usa convenções para conectar o sistema de arquivos ao comportamento da aplicação. Um arquivo Vue dentro de app/pages/ torna-se uma rota, enquanto nomes que contêm colchetes podem representar parâmetros dinâmicos de URL.
A mesma abordagem vai além das páginas. Layouts envolvem visualizações relacionadas, middleware de rota é executado durante a navegação, plugins configuram a aplicação Vue e composables armazenam lógica reutilizável com estado. O Nuxt pode importar automaticamente componentes, composables e utilitários compatíveis a partir de locais reconhecidos.
Diretórios comuns e suas funções
| Diretório | Finalidade pública |
|---|---|
app/pages/ |
Cria rotas da aplicação a partir de arquivos Vue |
app/layouts/ |
Define estruturas reutilizáveis de página |
app/components/ |
Armazena componentes reutilizáveis de interface Vue |
app/composables/ |
Contém lógica reutilizável de composição do Vue |
app/middleware/ |
Executa lógica durante a navegação entre rotas |
server/api/ |
Cria endpoints de servidor sob /api |
server/routes/ |
Cria rotas de servidor sem o prefixo /api |
shared/ |
Contém código destinado tanto à aplicação Vue quanto ao servidor Nitro |
O roteamento por arquivos evita que as equipes precisem manter um registro separado de rotas para páginas comuns. Isso também significa que mover ou renomear um arquivo pode alterar uma URL pública, portanto a estrutura de rotas merece a mesma revisão que o código da aplicação.
As importações automáticas eliminam instruções repetitivas, mas sua origem pode não ser clara para um novo colaborador. Nomes explícitos, suporte do editor e uma breve documentação do projeto podem tornar essa conveniência mais fácil de compreender.
Quais modos de renderização o Nuxt aceita?
O Nuxt aceita renderização universal, renderização do lado do cliente, pré-renderização e renderização híbrida. Esses modos descrevem quando o HTML é produzido e quanto trabalho resta para o servidor ou o navegador.
A renderização universal é o modelo documentado como padrão. O Nuxt renderiza o HTML inicial no servidor, envia-o ao visitante e depois hidrata a página para que o Vue possa gerenciar a interação no navegador.
| Modo | O que acontece | Exemplos adequados | Contrapartida importante |
|---|---|---|---|
| Universal | O HTML é produzido para a solicitação inicial e depois hidratado | Páginas públicas de produtos ou aplicações baseadas em dados | O código do servidor e do navegador deve se comportar de maneira consistente |
| Lado do cliente | O navegador renderiza a estrutura e a interface da aplicação | Ferramentas privadas dominadas pelo estado do navegador | O HTML inicial pode conter menos conteúdo útil |
| Pré-renderizado | O HTML é gerado antes das solicitações | Documentação, guias e páginas estáveis de marketing | As compilações precisam descobrir ou receber todas as rotas pretendidas |
| Híbrido | Caminhos diferentes recebem regras diferentes | Uma publicação estática com uma área de conta dinâmica | Mais comportamentos específicos de rota precisam ser testados e mantidos |
O HTML renderizado no servidor pode melhorar a rapidez com que o conteúdo útil fica disponível, mas não garante páginas rápidas, boa visibilidade em mecanismos de busca nem pacotes JavaScript pequenos. O peso dos componentes, o acesso aos dados, o cache, a hospedagem e a qualidade da implementação ainda determinam o resultado.
A saída estática tem limitações semelhantes. A pré-renderização elimina a renderização no momento da solicitação para páginas selecionadas, mas grandes conjuntos de rotas podem prolongar as compilações, e alterações no conteúdo podem exigir uma nova geração, a menos que outra estratégia compatível seja configurada.
O que são regras de rota e renderização híbrida?
As regras de rota permitem que um projeto Nuxt atribua comportamentos a padrões de URL correspondentes. Elas tornam a renderização híbrida possível porque uma seção pode ser pré-renderizada enquanto outra permanece dinâmica ou renderizada no cliente.
As regras documentadas incluem pré-renderização, redirecionamentos, desativação da renderização no servidor para caminhos selecionados, cache, comportamento stale-while-revalidate e regeneração incremental em plataformas compatíveis. Alguns recursos dependem da predefinição de implantação e do ambiente de hospedagem.
Um mapa de rotas prático
- Uma seção de documentação pode usar pré-renderização porque suas páginas mudam por meio de uma publicação editorial.
- Um catálogo de produtos pode usar uma regra de cache ou stale-while-revalidate quando seus dados mudam com mais frequência.
- Um painel de conta pode usar renderização do lado do cliente porque seu conteúdo é privado e altamente interativo.
- Um caminho de API pode receber regras de cache ou de origem cruzada independentemente das rotas de página.
- Uma URL descontinuada pode receber um redirecionamento para sua substituta.
As regras de rota são poderosas quando expressam um pequeno número de categorias claras de conteúdo e aplicação. Um conjunto crescente de exceções pode tornar difíceis de prever a atualização, a invalidação e o comportamento em tempo de execução.
A regeneração incremental merece uma verificação da implantação. O Nuxt documenta regras de rota voltadas a ISR, mas seu comportamento exato depende da integração com a plataforma selecionada, em vez de ser idêntico em todos os serviços de hospedagem.
O que o Nitro fornece?
O Nitro é o mecanismo de servidor do Nuxt. Ele oferece suporte a renderização no servidor, pré-renderização, manipuladores de API, middleware, plugins de servidor e saídas destinadas a diferentes ambientes de servidor ou edge.
Arquivos em server/api/ tornam-se endpoints com o prefixo /api. Arquivos em server/routes/ criam rotas sem esse prefixo, enquanto o middleware de servidor pode inspecionar ou ampliar o contexto da solicitação antes que os manipuladores sejam executados.
Mantenha estes limites de execução visíveis
- Código exclusivo do servidor pode trabalhar com credenciais privadas e serviços confiáveis, mas segredos nunca devem entrar nos pacotes do navegador.
- Código exclusivo do cliente pode usar APIs do navegador, mas os visitantes podem inspecionar tudo que é entregue aos seus dispositivos.
- Código compartilhado deve ser seguro e compatível em todos os ambientes de execução nos quais o Nuxt o executa.
- Sistemas externos, como bancos de dados, filas, provedores de identidade e APIs independentes, mantêm seus próprios requisitos operacionais e de segurança.
Manter o frontend e pequenos manipuladores de servidor em um só projeto pode simplificar o desenvolvimento. Isso não significa que todo backend deva ficar dentro do Nuxt, nem que o Nitro elimine a necessidade de projetar autenticação, validação, armazenamento, observabilidade ou tratamento de falhas.
As predefinições de implantação adaptam a saída do Nitro aos ambientes compatíveis. As equipes devem testar o destino real, pois os ambientes de execução diferem quanto às APIs disponíveis, à duração dos processos, à integração de cache e às restrições operacionais.
O Nuxt é adequado para sites de conteúdo?
Sim. O Nuxt é útil para documentação, publicação, marketing e outros sites com muito conteúdo, especialmente quando essas páginas precisam compartilhar componentes Vue com recursos interativos do produto.
Uma equipe pode obter conteúdo de uma API, de um sistema de gerenciamento de conteúdo separado ou de arquivos locais. O Nuxt Content é um módulo opcional para a abordagem baseada em arquivos locais.
A documentação do Nuxt Content indica suporte a fontes Markdown, YAML, CSV e JSON. Ele pode organizar materiais em coleções tipadas, consultar conteúdo, gerar dados de navegação e usar MDC para inserir componentes Vue no Markdown.
Onde essa combinação ajuda
- Documentação de produtos com exemplos interativos de código ou calculadoras.
- Uma publicação que compartilha componentes de navegação e design com uma aplicação Vue.
- Um site de marketing que contém recursos de conta, busca ou personalização.
- Uma base interna de conhecimento criada a partir de coleções de conteúdo estruturado.
- Uma propriedade com várias seções que exige regras de renderização diferentes para rotas editoriais e de aplicação.
O Nuxt Content não é, por si só, um serviço editorial hospedado. As equipes ainda precisam avaliar permissões de autores, fluxos de revisão, gerenciamento de mídia, localização, prévias e controles de publicação quando pessoas que não são desenvolvedoras mantêm o material.
Para um site de documentação modesto, Markdown local pode ser suficiente. Uma grande organização editorial pode preferir uma plataforma externa de conteúdo e continuar usando o Nuxt para apresentação e renderização.
Quem mantém o Nuxt e onde sua comunidade se reúne?
De acordo com a página oficial da equipe consultada em 27 de agosto de 2026, o desenvolvimento do Nuxt e de seu ecossistema é liderado por uma equipe internacional. A página apresenta as equipes central e do ecossistema; essa atribuição no nível da equipe é mais confiável do que deduzir um único fundador a partir do histórico do repositório ou de perfis individuais.
O repositório mantido nuxt/nuxt no GitHub contém o código-fonte do framework, o rastreador de problemas, materiais de contribuição e o histórico de versões. A atividade do repositório pode ajudar os desenvolvedores a examinar a implementação e a manutenção, mas não deve ser tratada como uma promessa sobre cronogramas futuros.
A página oficial de ajuda da comunidade identifica dois caminhos relevantes de suporte:
- Discord é o canal oficial para conversas e ajuda em tempo real na comunidade.
- GitHub Discussions é o canal oficial para perguntas que se beneficiam de uma discussão assíncrona e pesquisável.
O Nuxt explica que os participantes da comunidade oferecem ajuda voluntariamente. Projetos que precisam de tempos de resposta garantidos, trabalho privado de arquitetura ou suporte contratual devem avaliar separadamente o suporte profissional.
Quando o Nuxt é uma boa escolha?
O Nuxt é um forte candidato quando o Vue já é o modelo de componentes preferido e o projeto precisa de mais do que uma interface simples no navegador. Suas convenções são particularmente valiosas quando páginas públicas, recursos interativos e manipuladores de servidor precisam compartilhar uma única estrutura de aplicação.
Considere o Nuxt quando
- A equipe já trabalha de forma eficaz com Vue.
- As rotas públicas se beneficiam de HTML produzido no servidor ou pré-renderizado.
- Páginas de frontend e endpoints modestos de servidor devem coexistir.
- Seções de conteúdo e da aplicação precisam compartilhar layouts e componentes.
- Grupos de rotas diferentes exigem políticas distintas de renderização ou cache.
- Os colaboradores preferem uma convenção documentada a montar muitas ferramentas separadas.
Compare outras abordagens quando
- O site é quase inteiramente estático e precisa de pouca interatividade do Vue.
- A equipe quer uma camada menor do lado do cliente sobre um backend independente já estabelecido.
- Os desenvolvedores exigem uma estrutura altamente personalizada com poucas convenções de framework.
- O ambiente de execução pretendido não consegue fornecer o comportamento necessário de servidor ou cache.
- A principal experiência da equipe no desenvolvimento de aplicações está em outro ecossistema de componentes.
A abrangência do Nuxt só é útil quando o projeto precisa dela. Um pequeno site institucional pode usar Nuxt, mas isso não estabelece que seu mecanismo de servidor e suas convenções de aplicação sejam a escolha mais simples.
O que uma equipe deve testar antes de escolher o Nuxt?
Crie uma fatia vertical representativa e implante-a no ambiente pretendido. Inclua conteúdo real, um componente interativo relevante, uma solicitação ao servidor e o limite esperado de autenticação ou dados.
Use esta sequência de avaliação:
- Classifique as rotas. Separe os caminhos editoriais, públicos dinâmicos, privados e de endpoints de servidor.
- Atribua a renderização intencionalmente. Registre por que cada classe é universal, do lado do cliente, pré-renderizada ou híbrida.
- Teste a carga útil do navegador. A renderização no servidor, sozinha, não controla a hidratação nem o custo do JavaScript.
- Use um volume realista de conteúdo. Meça compilações e consultas com quantidades plausíveis de páginas e coleções.
- Verifique os recursos de implantação. Confirme que a predefinição selecionada aceita a semântica necessária de cache e regeneração.
- Revise os limites do ambiente de execução. Verifique se valores exclusivos do servidor não podem entrar no código do cliente.
- Teste a compreensão dos colaboradores. Peça a um novo desenvolvedor para rastrear rotas, importações automáticas, fluxo de dados e manipuladores de servidor.
A questão prática não é se o Nuxt consegue criar o projeto. É se a integração do Nuxt com Vue, suas convenções, sua camada de servidor e seus controles no nível das rotas simplificam o trabalho predominante do projeto o suficiente para justificar os conceitos adicionais.
Uma resposta bem-sucedida não garante segurança. As medições descrevem uma observação em um momento específico.