<NuxtLayout>
Nuxt 提供 <NuxtLayout> 元件，用於在頁面和錯誤頁面上顯示版面配置。
您可以使用 <NuxtLayout /> 元件來啟用 app.vue 或 error.vue 上的 default 版面配置。
app.vue
<template>
<NuxtLayout>
some page content
</NuxtLayout>
</template>
屬性
name: 指定要呈現的版面配置名稱，可以是字串、響應式參考或計算屬性。它必須與layouts/目錄中對應的版面配置檔案名稱相符。- 類型:
string - 預設值:
default
- 類型:
pages/index.vue
<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
請注意，版面配置名稱會被正規化為 kebab-case，因此如果您的版面配置檔案名為
errorLayout.vue，當作為 name 屬性傳遞給 <NuxtLayout /> 時，它會變成 error-layout。error.vue
<template>
<NuxtLayout name="error-layout">
<NuxtPage />
</NuxtLayout>
</template>
fallback: 如果將無效的版面配置傳遞給name屬性，則不會呈現任何版面配置。在此情況下，指定要呈現的fallback版面配置。它必須與layouts/目錄中對應的版面配置檔案名稱相符。- 類型:
string - 預設值:
null
- 類型:
額外屬性
NuxtLayout 也接受您可能需要傳遞給版面配置的任何額外屬性。這些自定義屬性隨後可以作為屬性訪問。
pages/some-page.vue
<template>
<div>
<NuxtLayout name="custom" title="I am a custom layout">
<-- ... -->
</NuxtLayout>
</div>
</template>
在上面的示例中，可以使用自定義元件中的模板的 $attrs.title 或 <script setup> 中的 useAttrs().title 來訪問 title 的值。
layouts/custom.vue
<script setup lang="ts">
const layoutCustomProps = useAttrs()
console.log(layoutCustomProps.title) // I am a custom layout
</script>
轉場效果
<NuxtLayout /> 通過 <slot /> 呈現傳入的內容，然後將其包裹在 Vue 的 <Transition /> 元件周圍以啟用版面配置轉場效果。為了使其按預期工作，建議 <NuxtLayout /> 不是頁面元件的根元素。
<template>
<div>
<NuxtLayout name="custom">
<template #header> Some header template content. </template>
</NuxtLayout>
</div>
</template>
版面配置的 Ref
要取得版面配置元件的 ref，請通過 ref.value.layoutRef 訪問它。
<script setup lang="ts">
const layout = ref()
function logFoo () {
layout.value.layoutRef.foo()
}
</script>
<template>
<NuxtLayout ref="layout">
default layout
</NuxtLayout>
</template>