app.vue
En esta página
::tip
If you have a app/pages/ directory, the app.vue file is optional. Nuxt will automatically include a default app.vue, but you can still add your own to customize the structure and content as needed.
::
Usage#
Minimal Usage#
With Nuxt, the app/pages/ directory is optional. If it is not present, Nuxt will not include the vue-router dependency. This is useful when building a landing page or an application that does not require routing.
```vue [app/app.vue]
Hello World!
:link-example{to="/docs/4.x/examples/hello-world"}
### Usage with Pages
When you have a [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
```vue [app/app.vue]
<template>
<NuxtPage />
</template>
You can also define the common structure of your application directly in app.vue. This is useful when you want to include global elements such as a header or footer:
```vue [app/app.vue]
::note
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/4.x/directory-structure/app/pages"}
Learn more about how to structure your pages using the `app/pages/` directory.
::
### Usage with Layouts
When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
```vue [app/app.vue]
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
::read-more{to="/docs/4.x/directory-structure/app/layouts"}
Learn more about how to structure your layouts using the app/layouts/ directory.
::