app.vue

::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.

<template>
  <h1>Hello World!</h1>
</template>

:link-example{to="/docs/4.x/examples/hello-world"}

Usage with Pages

When you have a app/pages/ directory, you need to use the <NuxtPage> component to display the current page:

<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:

<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. ::

::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> component. This allows you to define multiple layouts and apply them per page.

<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. ::