Nuxt3 中文课程 《实战全栈开发简书》.

app.vue

app.vue 文件是你的 Nuxt 应用的主要组件。

最简用法

在 Nuxt 3 中,pages/ 目录是可选的。如果不存在该目录,Nuxt 将不会包含 vue-router 依赖项。这在开发一个落地页或者不需要路由的应用时非常有用。

app.vue
<template>
  <h1>Hello World!</h1>
</template>
Read and edit a live example in Docs > Examples > Hello World.

使用 Pages

如果你有一个 pages/ 目录,要显示当前页面,请使用 <NuxtPage> 组件:

app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>
由于 <NuxtPage> 内部使用了 Vue 的 <Suspense> 组件,它不能被设置为根元素。
请记住,app.vue 是你的 Nuxt 应用的主要组件。你在其中添加的任何内容(JS 和 CSS)都将是全局的,并包含在每个页面中。
如果你想在页面之间自定义页面周围的结构,可以查看 layouts/ 目录。