Nuxt é um framework de código aberto gratuito com uma maneira intuitiva e extensível de criar aplicações web full-stack e sites com segurança de tipos, desempenho e qualidade de produção usando Vue.js.

Fizemos tudo para que você possa começar a escrever arquivos .vue desde o início, enquanto desfruta da substituição de módulo a quente no desenvolvimento e de uma aplicação eficiente em produção com renderização do lado do servidor por padrão.

Nuxt não tem bloqueio de fornecedor, permitindo que você implante sua aplicação em qualquer lugar, até mesmo na borda.

Automação e Convenções

Nuxt utiliza convenções e uma estrutura de diretórios opinativa para automatizar tarefas repetitivas e permitir que os desenvolvedores se concentrem em adicionar funcionalidades. O arquivo de configuração ainda pode personalizar e substituir seus comportamentos padrão.

• Roteamento baseado em arquivos: defina rotas com base na estrutura do seu diretório pages/. Isso pode facilitar a organização da sua aplicação e evitar a necessidade de configuração manual de rotas.
• Divisão de código: Nuxt divide automaticamente seu código em partes menores, o que pode ajudar a reduzir o tempo de carregamento inicial da sua aplicação.
• Renderização do lado do servidor pronta para uso: Nuxt vem com capacidades de SSR integradas, então você não precisa configurar um servidor separado.
• Importações automáticas: escreva composables e componentes Vue em seus respectivos diretórios e use-os sem precisar importá-los, com os benefícios de tree-shaking e pacotes JS otimizados.
• Utilitários de busca de dados: Nuxt fornece composables para lidar com busca de dados compatível com SSR, bem como diferentes estratégias.
• Suporte TypeScript sem configuração: escreva código com segurança de tipos sem precisar aprender TypeScript com nossos tipos gerados automaticamente e tsconfig.json.
• Ferramentas de build configuradas: usamos Vite por padrão para suportar a substituição de módulo a quente (HMR) no desenvolvimento e empacotar seu código para produção com as melhores práticas incorporadas.

Nuxt cuida disso e fornece funcionalidades tanto de frontend quanto de backend para que você possa se concentrar no que importa: criar sua aplicação web.

Renderização do Lado do Servidor

Nuxt vem com capacidades de renderização do lado do servidor (SSR) integradas por padrão, sem precisar configurar um servidor você mesmo, o que traz muitos benefícios para aplicações web:

• Tempo de carregamento inicial mais rápido: Nuxt envia uma página HTML totalmente renderizada para o navegador, que pode ser exibida imediatamente. Isso pode proporcionar um tempo de carregamento percebido mais rápido e uma melhor experiência do usuário (UX), especialmente em redes ou dispositivos mais lentos.
• SEO melhorado: os motores de busca podem indexar melhor as páginas SSR porque o conteúdo HTML está disponível imediatamente, em vez de exigir que o JavaScript renderize o conteúdo no lado do cliente.
• Melhor desempenho em dispositivos de baixa potência: reduz a quantidade de JavaScript que precisa ser baixado e executado no lado do cliente, o que pode ser benéfico para dispositivos de baixa potência que podem ter dificuldades com o processamento de aplicações JavaScript pesadas.
• Melhor acessibilidade: o conteúdo está imediatamente disponível no carregamento inicial da página, melhorando a acessibilidade para usuários que dependem de leitores de tela ou outras tecnologias assistivas.
• Cache mais fácil: as páginas podem ser armazenadas em cache no lado do servidor, o que pode melhorar ainda mais o desempenho ao reduzir o tempo necessário para gerar e enviar o conteúdo para o cliente.

No geral, a renderização do lado do servidor pode proporcionar uma experiência de usuário mais rápida e eficiente, além de melhorar a otimização para motores de busca e a acessibilidade.

Como o Nuxt é um framework versátil, ele oferece a possibilidade de renderizar estaticamente toda a sua aplicação para um hosting estático com nuxt generate, desativar o SSR globalmente com a opção ssr: false ou aproveitar a renderização híbrida configurando a opção routeRules.

Motor do servidor

O motor do servidor Nuxt Nitro desbloqueia novas capacidades full-stack.

No desenvolvimento, ele usa Rollup e trabalhadores Node.js para seu código de servidor e isolamento de contexto. Ele também gera sua API de servidor lendo arquivos em server/api/ e middleware de servidor de server/middleware/.

Na produção, Nitro constrói seu aplicativo e servidor em um diretório universal .output. Esta saída é leve: minificada e removida de quaisquer módulos Node.js (exceto polyfills). Você pode implantar esta saída em qualquer sistema que suporte JavaScript, desde Node.js, Serverless, Workers, renderização na borda ou puramente estática.

Pronto para produção

Uma aplicação Nuxt pode ser implantada em um servidor Node ou Deno, pré-renderizada para ser hospedada em ambientes estáticos, ou implantada em provedores serverless e de borda.

Modular

Um sistema de módulos permite estender o Nuxt com recursos personalizados e integrações com serviços de terceiros.

Arquitetura

Nuxt é composto por diferentes pacotes principais:

• Motor principal: nuxt
• Empacotadores: @nuxt/vite-builder, @nuxt/rspack-builder e @nuxt/webpack-builder
• Interface de linha de comando: @nuxt/cli
• Motor do servidor: nitro
• Kit de desenvolvimento: @nuxt/kit

Recomendamos ler cada conceito para ter uma visão completa das capacidades do Nuxt e do escopo de cada pacote.