Nuxt/docs/content/3.docs/2.directory-structure/14.app.md
Sébastien Chopin 18cf0ba865
chore(docs): improvements (#655)
Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
2021-10-11 14:57:54 +02:00

1.2 KiB

icon title head.title
IconFile app.vue App file

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>
    <NuxtPage/>
  </div>
</template>

::alert{type=info} Since Nuxt 3 uses <Suspense> inside <NuxtPage>, we recommend to wrap it into a single root element. ::

::alert{type=warning} Remember that app.vue acts as the main component of your Nuxt application, anything you add in 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, checkout the layouts/. directory