Skip to main content
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.

​
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.
app/app.vue
<template>
  <h1>Hello World!</h1>
</template>

​
Usage with Pages

When you have an app/pages/ directory, you need to use the <NuxtPage> component to display the current page:
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:
app/app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
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.

​
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.
app/app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Learn more about layouts

Discover how to structure your layouts using the app/layouts/ directory.