Views - Nuxt — ContextQMD

`app.vue`

By default, Nuxt will treat this file as the entrypoint and render its content for every route of the application.

vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

::tip If you are familiar with Vue, you might wonder where main.js is (the file that normally creates a Vue app). Nuxt does this behind the scene. ::

Components

Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the app/components/ directory, and they will be automatically available across your application without having to explicitly import them.

::code-group

vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

vue

<template>
  <span>
    <slot />
  </span>
</template>

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 <NuxtPage /> component to the app/app.vue (or remove app/app.vue for default entry). You can now create more pages and their corresponding routes by adding new files in the app/pages/ directory.

::code-group

vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

vue

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

:read-more{title="Routing Section" to="/docs/4.x/getting-started/routing"}

Layouts

Layouts are wrappers around pages that contain a common User Interface for several pages, such as header and footer displays. Layouts are Vue files using <slot /> components to display the page content. The app/layouts/default.vue file will be used by default. Custom layouts can be set as part of your page metadata.

::note If you only have a single layout in your application, we recommend using app/app.vue with <NuxtPage /> instead. ::

::code-group

vue

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

vue

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

vue

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

If you want to create more layouts and learn how to use them in your pages, find more information in the Layouts section.

Advanced: Extending the HTML Template

::note If you only need to modify the <head>, you can refer to the SEO and meta section. ::

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 is sent to the client.

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) })
})

:read-more{to="/docs/4.x/guide/going-further/hooks"}