app.vue · Nuxt Directory Structure

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.

If you want to have the possibility to customize the structure around the page between pages, check out the layouts/ directory.

app.config.ts

Expose reactive configuration within your application with the App Config file.

error.vue

The error.vue file is the error page in your Nuxt application.