app.vue
The app.vue file is the main component of your Nuxt application.
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.
app/app.vue
<template>
<h1>Hello World!</h1>
</template>Usage with Pages
When you have a 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.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.
app/app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>app/layouts/ directory.