layouts

Nuxt 提供了一個佈局框架，用於將常見的 UI 模式提取到可重用的佈局中。
為了獲得最佳效能，放置在此目錄中的元件在使用時將透過非同步匯入自動載入。

啟用佈局

透過將 <NuxtLayout> 新增到您的 app.vue 中來啟用佈局。

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

使用佈局

  • 使用 definePageMeta 在頁面中設定一個 layout 屬性。
  • 設定 <NuxtLayout> 的 name 屬性。
佈局名稱會規範化為 kebab-case，所以 someLayout 會變成 some-layout。
如果沒有指定佈局，將使用 app/layouts/default.vue。
如果您的應用程式中只有一個佈局，我們建議改用 app.vue。
與其他元件不同，您的佈局必須只有一個根元素，以便 Nuxt 可以在佈局更改之間應用過渡 - 並且這個根元素不能是 <slot />。

預設佈局

新增 ~/layouts/default.vue

app/layouts/default.vue
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

在佈局檔案中，頁面內容將顯示在 <slot /> 元件中。

命名佈局

目錄結構
-| layouts/
---| default.vue
---| custom.vue

然後您可以在頁面中使用 custom 佈局

pages/about.vue
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>
瞭解更多關於 definePageMeta 的資訊。

您可以直接使用 <NuxtLayout> 的 name 屬性來覆蓋所有頁面的預設佈局。

app/app.vue
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

如果您的佈局位於巢狀目錄中，佈局的名稱將基於其自身的路徑目錄和檔名，並移除重複的段。

檔案佈局名稱
~/layouts/desktop/default.vuedesktop-default
~/layouts/desktop-base/base.vuedesktop-base
~/layouts/desktop/index.vuedesktop

為了清晰起見，我們建議佈局的檔名與其名稱匹配。

檔案佈局名稱
~/layouts/desktop/DesktopDefault.vuedesktop-default
~/layouts/desktop-base/DesktopBase.vuedesktop-base
~/layouts/desktop/Desktop.vuedesktop
在 文件 > 4 X > 示例 > 功能 > 佈局 中閱讀和編輯即時示例。

動態更改佈局

您還可以使用 setPageLayout 助手動態更改佈局

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <button @click="enableCustomLayout">
      Update layout
    </button>
  </div>
</template>
在 文件 > 4 X > 示例 > 功能 > 佈局 中閱讀和編輯即時示例。

逐頁覆蓋佈局

如果您正在使用頁面，您可以透過設定 layout: false，然後在頁面內使用 <NuxtLayout> 元件來完全控制。

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        Some header template content.
      </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>
如果您在頁面中使用 <NuxtLayout>，請確保它不是根元素（或停用佈局/頁面過渡）。