Este guia ajuda você a entender melhor os internos do Nuxt para desenvolver novas soluções e integrações de módulos em cima do Nuxt.

A Interface do Nuxt

Quando você inicia o Nuxt no modo de desenvolvimento com nuxt dev ou constrói uma aplicação de produção com nuxt build, um contexto comum será criado, referido internamente como nuxt. Ele contém opções normalizadas mescladas com o arquivo nuxt.config, algum estado interno e um poderoso sistema de hooks alimentado por unjs/hookable permitindo que diferentes componentes se comuniquem entre si. Você pode pensar nisso como o Núcleo do Builder.

Este contexto está globalmente disponível para ser usado com os composables do Nuxt Kit. Portanto, apenas uma instância do Nuxt é permitida por processo.

Para estender a interface do Nuxt e conectar-se a diferentes estágios do processo de construção, podemos usar Módulos do Nuxt.

Para mais detalhes, confira o código fonte.

A Interface do NuxtApp

Ao renderizar uma página no navegador ou no servidor, um contexto compartilhado será criado, referido como nuxtApp. Este contexto mantém a instância do vue, hooks de runtime e estados internos como ssrContext e payload para hidratação. Você pode pensar nisso como o Núcleo de Runtime.

Este contexto pode ser acessado usando o composable useNuxtApp() dentro de plugins do Nuxt e <script setup> e composables vue. O uso global é possível para o navegador, mas não no servidor, para evitar o compartilhamento de contexto entre usuários.

Como useNuxtApp lança uma exceção se o contexto não estiver disponível no momento, se seu composable não exigir sempre nuxtApp, você pode usar tryUseNuxtApp em vez disso, que retornará null em vez de lançar uma exceção.

Para estender a interface nuxtApp e conectar-se a diferentes estágios ou acessar contextos, podemos usar Plugins do Nuxt.

Confira Nuxt App para mais informações sobre esta interface.

nuxtApp possui as seguintes propriedades:

const nuxtApp = {
  vueApp, // a aplicação Vue global: https://vuejs.org/api/application.html#application-api

  versions, // um objeto contendo as versões do Nuxt e Vue

  // Estes permitem que você chame e adicione hooks de runtime do NuxtApp
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Apenas acessível no lado do servidor
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // Isto será transformado em string e passado do servidor para o cliente
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

Para mais detalhes, confira o código fonte.

Contexto de Runtime vs. Contexto de Build

O Nuxt constrói e empacota o projeto usando Node.js, mas também possui um lado de runtime.

Embora ambas as áreas possam ser estendidas, esse contexto de runtime é isolado do tempo de build. Portanto, eles não devem compartilhar estado, código ou contexto além da configuração de runtime!

nuxt.config e Módulos do Nuxt podem ser usados para estender o contexto de build, e Plugins do Nuxt podem ser usados para estender o runtime.

Ao construir uma aplicação para produção, nuxt build gerará uma build independente no diretório .output, independente de nuxt.config e módulos do Nuxt.