4.5 KiB
| title | description | navigation.icon |
|---|---|---|
| Views | Nuxt provides several component layers to implement the user interface of your application. | i-ph-layout-duotone |
app.vue
By default, Nuxt will treat this file as the entrypoint and render its content for every route of the application.
<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 components/ directory, and they will be automatically available across your application without having to explicitly import them.
::code-group
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component.
</AppAlert>
</div>
</template>
<template>
<span>
<slot />
</span>
</template>
::
Pages
Pages represent views for each specific route pattern. Every file in the pages/ directory represents a different route displaying its content.
To use pages, create pages/index.vue file and add <NuxtPage /> component to the app.vue (or remove app.vue for default entry). You can now create more pages and their corresponding routes by adding new files in the pages/ directory.
::code-group
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
<template>
<section>
<p>This page will be displayed at the /about route.</p>
</section>
</template>
::
:read-more{title="Routing Section" to="/docs/getting-started/routing"}
Layouts
Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using <slot /> components to display the page content. The 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.vue with <NuxtPage /> instead.
::
::code-group
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
<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/guide/going-further/hooks"}