<NuxtLayout> · Nuxt Components

您可以使用 <NuxtLayout /> 元件，在 app.vue 或 error.vue 上啟用 default 版面配置。

app.vue

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

請在文件 > 指南 > 目錄結構 > 版面配置中閱讀更多資訊。

Props

name：指定要渲染的版面配置名稱，可以是字串、響應式參考或計算屬性。它必須與 layouts/ 目錄中相應的版面配置檔案名稱相符。
- type: string
- default: 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 prop，則不會渲染任何版面配置。在此情況下，指定要渲染的 fallback 版面配置。它必須與 layouts/ 目錄中相應的版面配置檔案名稱相符。
- type: string
- default: null

其他 Props

NuxtLayout 也接受您可能需要傳遞給版面配置的任何其他 props。然後，這些自訂 props 可以作為屬性存取。

pages/some-page.vue

<template>
  <div>
    <NuxtLayout name="custom" title="I am a custom layout">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

在上面的範例中，title 的值將可使用範本中的 $attrs.title 或 custom.vue 中 <script setup> 裡的 useAttrs().title 來取得。

layouts/custom.vue

<script setup lang="ts">
const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // I am a custom layout
</script>

Transitions

<NuxtLayout /> 透過 <slot /> 渲染傳入的內容，然後將其包裝在 Vue 的 <Transition /> 元件周圍，以啟用版面配置轉換。為了使其按預期工作，建議 <NuxtLayout /> 不是頁面元件的根元素。

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

請在文件 > 入門 > 轉換效果中閱讀更多資訊。

Layout's 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>

請在文件 > 指南 > 目錄結構 > 版面配置中閱讀更多資訊。

顯示 pages/ 目錄中頁面時，<NuxtPage> 元件是必要的。

Nuxt 提供 <NuxtLink> 元件來處理應用程式內的任何連結。