Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com> Co-authored-by: Pooya Parsa <pyapar@gmail.com>
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