1.4 KiB
title | description | head.title | navigation.icon |
---|---|---|---|
app.vue | The app.vue file is the main component of your Nuxt application. | app.vue | i-ph-file |
Minimal Usage
With Nuxt 3, the pages/
directory is optional. If not present, Nuxt won't include vue-router dependency. This is useful when working on a landing page or an application that does not need routing.
<template>
<h1>Hello World!</h1>
</template>
:link-example{to="/docs/examples/hello-world"}
Usage with Pages
If you have a pages/
directory, to display the current page, use the <NuxtPage>
component:
<template>
<div>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
</div>
</template>
::warning
Since <NuxtPage>
internally uses Vue's <Suspense>
component, it cannot be set as a root element.
::
::note
Remember that app.vue
acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
::
::read-more{to="/docs/guide/directory-structure/layouts"}
If you want to have the possibility to customize the structure around the page between pages, check out the layouts/
directory.
::