佈局系統

Layouts 是 Nuxt 應用程式的骨架。它們允許你定義跨頁面共用的結構（如導覽列、側邊欄、頁尾），避免在每個頁面重複撰寫相同的程式碼。

核心概念

佈局 (Layout) 是一個包覆器 (Wrapper)。它將頁面內容 (Page Content) 包裹在共用的 UI 結構中。關鍵在於 <slot />，這是頁面內容被注入的地方。

Layout Anatomy

Header

Sidebar

Page Content Injected Here

Footer

目錄結構

Nuxt 會自動掃描 layouts/ 目錄。 default.vue 是預設佈局，會自動應用於所有未指定佈局的頁面。

File Structure

app/
- layouts/
  - default.vue預設佈局
  - auth.vue登入/註冊專用
  - docs.vue文件專用

命名規則

佈局檔案名稱即為其 ID。例如 layouts/custom-layout.vue 的 ID 為 'custom-layout'。

注意

佈局檔案中必須包含單一根元素 (Single Root Element)，且必須包含 <slot />。

使用方式

在頁面元件中使用 definePageMeta 來指定該頁面要使用的佈局。

layouts/auth.vue

<template>
  <div class="h-screen flex items-center justify-center bg-slate-900">
    <div class="w-full max-w-md p-8 bg-slate-800 rounded-xl">
      <!-- 這裡插入登入表單 -->
      <slot />
    </div>
  </div>
</template>

pages/login.vue

<script setup>
definePageMeta({
  layout: 'auth'
})
</script>

<template>
  <form>
    <h1>Login</h1>
    <!-- ... -->
  </form>
</template>

動態切換

有時你需要根據使用者狀態（例如是否登入）來動態改變佈局。可以使用 setPageLayout 函式。試著點擊下方的按鈕，觀察佈局如何即時切換：

Select Layout

// Usage in Page

definePageMeta({
  layout: 'default'
})

Page Content

<script setup>
const user = useUser()

function toggleLayout() {
  // 動態切換佈局
  setPageLayout(user.value.isLoggedIn ? 'default' : 'auth')
}
</script>

<template>
  <div>
    <button @click="toggleLayout">
      Switch Layout
    </button>
  </div>
</template>

進階技巧：Per-Component Layout

如果你需要完全控制佈局的渲染位置，可以使用 <NuxtLayout> 元件。這在處理巢狀佈局或複雜的轉場動畫時非常有用。

<template>
  <NuxtLayout name="custom">
    <template #header>...</template>
    <SomeComponent />
  </NuxtLayout>
</template>