mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-27 08:02:01 +00:00
42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
|
---
|
||
|
|
icon: IconFile
|
||
|
|
title: app.vue
|
||
|
|
head.title: App file
|
||
|
|
---
|
||
|
|
|
||
|
|
# App file
|
||
|
|
|
||
|
|
The `app.vue` file is the main component in your Nuxt 3 applications.
|
||
|
|
|
||
|
|
## Minimal usage
|
||
|
|
|
||
|
|
With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional, if not present, Nuxt won't include [vue-router](https://next.router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
|
||
|
|
|
||
|
|
```vue [app.vue]
|
||
|
|
<template>
|
||
|
|
<h1>Hello World!</h1>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage with pages
|
||
|
|
|
||
|
|
If you have a [`pages/`](/docs/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component:
|
||
|
|
|
||
|
|
```vue [app.vue]
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<NuxtPage/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
::alert{type=info}
|
||
|
|
Since Nuxt 3 uses [`<Suspense>`](https://v3.vuejs.org/guide/migration/suspense.html) 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/`](/docs/directory-structure/layouts). directory
|