Nuxt/docs/2.guide/2.directory-structure/3.app.md

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-duotone

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>

::callout{color="amber" icon="i-ph-warning-duotone"} Since <NuxtPage> internally uses Vue's <Suspense> component, it cannot be set as a root element. ::

::callout{color="blue" icon="i-ph-info-duotone"} 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. ::