Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12-13 日。

app.vue

app.vue 文件是 Nuxt 应用程序的主组件。

最小用法

在 Nuxt 3 中,pages/ 目录是可选的。如果不存在,Nuxt 不会包含 vue-router 依赖项。这在处理登录页面或不需要路由的应用程序时非常有用。

app.vue
<template>
  <h1>Hello World!</h1>
</template>
文档 > 示例 > Hello World 中阅读和编辑一个实时示例。

与页面一起使用

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

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