app.vue

app.vue 檔案是 Nuxt 應用程式的主元件。
如果您的專案中包含 app/pages/ 目錄，則 app.vue 檔案是可選的。Nuxt 會自動包含一個預設的 app.vue，但您仍然可以新增自己的檔案來根據需要自定義結構和內容。

使用

最小化使用

在 Nuxt 中，app/pages/ 目錄是可選的。如果它不存在，Nuxt 將不會包含Vue Router依賴項。這在構建著陸頁或不需要路由的應用程式時非常有用。

app/app.vue
<template>
  <h1>Hello World!</h1>
</template>
在 文件 > 4 X > 示例 > Hello World 中閱讀並編輯即時示例。

與頁面一起使用

當您擁有 app/pages/ 目錄時，您需要使用 <NuxtPage> 元件來顯示當前頁面。

app/app.vue
<template>
  <NuxtPage />
</template>

您也可以直接在 app.vue 中定義應用程式的公共結構。當您想要包含全域性元素（如頁首或頁尾）時，這很有用。

app/app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
請記住，app.vue 充當 Nuxt 應用程式的主元件。您新增到其中的任何內容（JS 和 CSS）都將是全域性的，幷包含在每個頁面中。
瞭解更多關於如何使用 app/pages/ 目錄來組織頁面。

與佈局一起使用

當您的應用程式需要為不同頁面使用不同佈局時，您可以使用 app/layouts/ 目錄與 <NuxtLayout> 元件。這允許您定義多個佈局並按頁面應用它們。

app/app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
瞭解更多關於如何使用 app/layouts/ 目錄來組織布局。