Nuxt 3 reached end of life on 31 July 2026
It no longer receives bug fixes or security patches. Upgrade to Nuxt 4 or get extended support from HeroDevs
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>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.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>layouts/ directory.