Nuxt integra o Vue 3, a nova versão principal do Vue que permite novos padrões para os usuários do Nuxt.

Nuxt sempre usou o Vue como um framework frontend.

Escolhemos construir o Nuxt em cima do Vue por estas razões:

• O modelo de reatividade do Vue, onde uma mudança nos dados automaticamente aciona uma mudança na interface.
• A modelagem baseada em componentes, enquanto mantém o HTML como a linguagem comum da web, permite padrões intuitivos para manter sua interface consistente, mas poderosa.
• De pequenos projetos a grandes aplicações web, o Vue continua performando bem em escala para garantir que sua aplicação continue entregando valor aos seus usuários.

Vue com Nuxt

Componentes de Arquivo Único

Componentes de arquivo único do Vue (SFC ou arquivos *.vue) encapsulam a marcação (<template>), lógica (<script>) e estilo (<style>) de um componente Vue. Nuxt fornece uma experiência sem configuração para SFCs com Hot Module Replacement que oferece uma experiência de desenvolvedor perfeita.

Importações automáticas

Todo componente Vue criado no diretório components/ de um projeto Nuxt estará disponível em seu projeto sem precisar importá-lo. Se um componente não for usado em nenhum lugar, o código de produção não o incluirá.

Vue Router

A maioria das aplicações precisa de múltiplas páginas e uma maneira de navegar entre elas. Isso é chamado de roteamento. Nuxt usa um diretório pages/ e convenções de nomenclatura para criar diretamente rotas mapeadas para seus arquivos usando a biblioteca oficial Vue Router.

Diferenças com Nuxt 2 / Vue 2

Nuxt 3+ é baseado no Vue 3. A nova versão principal do Vue introduz várias mudanças das quais o Nuxt tira proveito:

• Melhor desempenho
• API de Composição
• Suporte a TypeScript

Renderização mais rápida

O DOM Virtual do Vue (VDOM) foi reescrito do zero e permite um melhor desempenho de renderização. Além disso, ao trabalhar com Componentes de Arquivo Único compilados, o compilador Vue pode otimizá-los ainda mais no tempo de build, separando marcação estática e dinâmica.

Isso resulta em uma renderização inicial mais rápida (criação de componentes) e atualizações, além de menor uso de memória. No Nuxt 3, isso permite uma renderização no lado do servidor mais rápida também.

Pacote menor

Com Vue 3 e Nuxt 3, o foco foi colocado na redução do tamanho do pacote. Com a versão 3, a maioria das funcionalidades do Vue, incluindo diretivas de template e componentes embutidos, é tree-shakable. Seu pacote de produção não os incluirá se você não os usar.

Dessa forma, uma aplicação mínima do Vue 3 pode ser reduzida para 12 kb gzipado.

API de Composição

A única maneira de fornecer dados e lógica para componentes no Vue 2 era através da API de Opções, que permite retornar dados e métodos para um template com propriedades pré-definidas como data e methods:

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}

A API de Composição introduzida no Vue 3 não é um substituto para a API de Opções, mas permite uma melhor reutilização de lógica em toda a aplicação, e é uma maneira mais natural de agrupar código por preocupação em componentes complexos.

Usada com a palavra-chave setup na definição <script>, aqui está o componente acima reescrito com a API de Composição e as APIs de Reatividade auto-importadas do Nuxt 3:

const count = ref(0)
const increment = () => count.value++

O objetivo do Nuxt é fornecer uma ótima experiência de desenvolvedor em torno da API de Composição.

• Use funções de Reatividade auto-importadas do Vue e composables embutidos do Nuxt composables embutidos.
• Escreva suas próprias funções reutilizáveis auto-importadas no diretório composables/.

Suporte a TypeScript

Tanto o Vue 3 quanto o Nuxt 3+ são escritos em TypeScript. Um código totalmente tipado previne erros e documenta o uso de APIs. Isso não significa que você tenha que escrever sua aplicação em TypeScript para tirar proveito disso. Com o Nuxt 3, você pode optar por renomear seu arquivo de .js para .ts, ou adicionar <script setup lang="ts"> em um componente.