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