> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# app.vue

> The app.vue file is the main component of your Nuxt application.

<Tip>
  If you have an `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.
</Tip>

## Usage

### Minimal Usage

With Nuxt, the [`app/pages/`](/directory-structure/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.

```vue app/app.vue theme={null}
<template>
  <h1>Hello World!</h1>
</template>
```

### Usage with Pages

When you have an [`app/pages/`](/directory-structure/pages) directory, you need to use the [`<NuxtPage>`](/api/components/nuxt-page) component to display the current page:

```vue app/app.vue theme={null}
<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 theme={null}
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
```

<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.
</Note>

### Usage with Layouts

When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.

```vue app/app.vue theme={null}
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

<Card title="Learn more about layouts" icon="book" href="/directory-structure/layouts">
  Discover how to structure your layouts using the `app/layouts/` directory.
</Card>