Nuxt/docs/2.guide/2.directory-structure/3.app.md
Jonas Thelemann 1f98f34c8e
docs: clarify that 'it' is <NuxtPage> (#22912)
Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>
2023-08-31 09:42:05 +01:00

1.4 KiB

navigation.icon title description head.title
IconFile app.vue The app.vue file is the main component in your Nuxt 3 applications. app.vue

App file

The app.vue file is the main component in your Nuxt 3 applications.

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>

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>

::alert{type=danger} Since <NuxtPage> internally uses the <Suspense> component, <NuxtPage> cannot be set as a root element. ::

::alert{type=warning} 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. ::

If you want to have the possibility to customize the structure around the page between pages, check out the layouts/ directory.