app.vue

The app.vue file is the main component of your Nuxt application.
If you have a 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 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.vue
<template>
  <h1>Hello World!</h1>
</template>
Read and edit a live example in Docs > Examples > Hello World.

Usage with Pages

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

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.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.
Learn more about how to structure your pages using the pages/ directory.

Usage with Layouts

When your application requires different layouts for different pages, you can use the layouts/ directory with the <NuxtLayout> component. This allows you to define multiple layouts and apply them per page.

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Learn more about how to structure your layouts using the layouts/ directory.