Nuxt provides several component layers to implement the user interface of your application.
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>
main.jsis (the file that normally creates a Vue app). Nuxt does this behind the scene.
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.
<template> <div> <h1>Welcome to the homepage</h1> <AppAlert> This is an auto-imported component. </AppAlert> </div></template>
Pages represent views use 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
<template> <div> <h1>Welcome to the homepage</h1> <AppAlert> This is an auto-imported component </AppAlert> </div></template>
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.
<NuxtPage />component instead.
<template> <div> <AppHeader /> <slot /> <AppFooter /> </div></template>
If you want to create more layouts and learn how to use them in your pages, find more information in the Layouts section.