app.vue

Por padrão, o Nuxt tratará este arquivo como o ponto de entrada e renderizará seu conteúdo para cada rota da aplicação.

<template>
  <div>
   <h1>Bem-vindo à página inicial</h1>
  </div>
</template>

Componentes

A maioria dos componentes são partes reutilizáveis da interface do usuário, como botões e menus. No Nuxt, você pode criar esses componentes no diretório components/, e eles estarão automaticamente disponíveis em toda a sua aplicação sem a necessidade de importá-los explicitamente.

<template>
  <div>
    <h1>Bem-vindo à página inicial</h1>
    <AppAlert>
      Este é um componente importado automaticamente.
    </AppAlert>
  </div>
</template>

Páginas

As páginas representam visualizações para cada padrão de rota específico. Cada arquivo no diretório pages/ representa uma rota diferente exibindo seu conteúdo.

Para usar páginas, crie o arquivo pages/index.vue e adicione o componente <NuxtPage /> ao app.vue (ou remova app.vue para a entrada padrão). Agora você pode criar mais páginas e suas rotas correspondentes adicionando novos arquivos no diretório pages/.

<template>
  <div>
    <h1>Bem-vindo à página inicial</h1>
    <AppAlert>
      Este é um componente importado automaticamente
    </AppAlert>
  </div>
</template>

Layouts

Layouts são envoltórios em torno das páginas que contêm uma interface de usuário comum para várias páginas, como um cabeçalho e rodapé. Layouts são arquivos Vue que usam componentes <slot /> para exibir o conteúdo da página. O arquivo layouts/default.vue será usado por padrão. Layouts personalizados podem ser definidos como parte dos metadados da sua página.

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Se você quiser criar mais layouts e aprender como usá-los em suas páginas, encontre mais informações na seção de Layouts.

Avançado: Estendendo o Template HTML

Você pode ter controle total sobre o template HTML adicionando um plugin Nitro que registra um hook. A função de callback do hook render:html permite que você altere o HTML antes de ser enviado ao cliente.

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // Este será uma representação em objeto do template html.
    console.log(html)
    html.head.push(`<meta name="description" content="Minha descrição personalizada" />`)
  })
  // Você também pode interceptar a resposta aqui.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})