--- icon: IconFile title: app.vue head.title: App file --- # App file The `app.vue` file is the main component in your Nuxt 3 applications. ## Minimal usage With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://next.router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing. ```vue [app.vue] <template> <h1>Hello World!</h1> </template> ``` ## Usage with pages If you have a [`pages/`](/docs/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component: ```vue [app.vue] <template> <div> <NuxtPage/> </div> </template> ``` ::alert{type=info} Since Nuxt 3 uses [`<Suspense>`](https://v3.vuejs.org/guide/migration/suspense.html) inside `<NuxtPage>`, we recommend to wrap it into a single root element. :: ::alert{type=warning} Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add in 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/`](/docs/directory-structure/layouts) directory.