Skip to main content
Nuxt provides several component layers to implement the user interface of your application. Understanding these layers is essential for building well-structured Nuxt applications.

​
App Entry Point

The app.vue file serves as the entrypoint of your Nuxt application. By default, Nuxt treats this file as the entry point and renders its content for every route.
app/app.vue
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>
If you’re familiar with Vue, you might wonder where main.js is (the file that normally creates a Vue app). Nuxt handles this behind the scenes for you.

​
Components

Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create components in the app/components/ directory, and they will be automatically available across your application without explicit imports. 
<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>
Components placed in the app/components/ directory are automatically imported and available throughout your application, thanks to Nuxt’s auto-import feature.

​
Pages

Pages represent views for each specific route pattern. Every file in the app/pages/ directory represents a different route displaying its content. To use pages, create an app/pages/index.vue file and add the <NuxtPage /> component to app/app.vue (or remove app/app.vue for the default entry). You can then create more pages by adding new files in the app/pages/ directory. 
<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

​
Layouts

Layouts are wrappers around pages that contain a common user interface for several pages, such as headers and footers. Layouts are Vue files using <slot /> components to display the page content. The app/layouts/default.vue file will be used by default.
If you only have a single layout in your application, we recommend using app/app.vue with <NuxtPage /> instead.
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
Custom layouts can be set as part of your page metadata, allowing different pages to use different layout structures.

​
Extending the HTML Template

If you only need to modify the <head>, refer to the SEO and meta section of the documentation.
You can have full control over the HTML template by adding a Nitro plugin that registers a hook. The callback function of the render:html hook allows you to mutate the HTML before it’s sent to the client.
server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // This will be an object representation of the html template.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // You can also intercept the response here.
  nitroApp.hooks.hook('render:response', (response, { event }) => { 
    console.log(response) 
  })
})
This approach gives you complete control over the HTML structure and allows you to inject custom content into the rendered page.