Docs Guide Directory Structure
app.vue
The app.vue file is the main component of your Nuxt application.
Minimal Usage
With Nuxt 3, the pages/
directory is optional. If not present, Nuxt won't include vue-router dependency. This is useful when working on a landing page or an application that does not need routing.
app.vue
<template> <h1>Hello World!</h1></template>
Read and edit a live example in Docs > Examples > Hello World.
Usage with Pages
If you have a pages/
directory, to display the current page, use the <NuxtPage>
component:
app.vue
<template> <div> <NuxtLayout> <NuxtPage/> </NuxtLayout> </div></template>
Since
<NuxtPage>
internally uses Vue's <Suspense>
component, it cannot be set as a root element.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.