佈局

原始檔
Nuxt Kit 提供了一套實用工具來幫助你處理佈局。

佈局是頁面的一種包裝。它可用於將頁面與常用元件（例如頁首和頁尾）進行包裝。佈局可以使用 addLayout 實用工具進行註冊。

addLayout

將模板註冊為佈局並將其新增到佈局中。

在 Nuxt 2 中，error 佈局也可以使用此實用工具進行註冊。在 Nuxt 3+ 中，error 佈局已 替換 為專案根目錄中的 error.vue 頁面。

使用

import { addLayout, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addLayout({
      src: resolve('templates/custom-layout.ts'),
      filename: 'custom-layout.ts',
    }, 'custom')
  },
})

型別

function addLayout (layout: NuxtTemplate | string, name: string): void

引數

layout：模板物件或帶有模板路徑的字串。如果提供字串，它將被轉換為一個模板物件，其中 src 設定為字串值。如果提供模板物件，它必須具有以下屬性

屬性型別必需描述
srcstringfalse模板路徑。如果未提供 src，則必須提供 getContents。
filenamestringfalse模板檔名。如果未提供 filename，它將從 src 路徑生成。在這種情況下，src 選項是必需的。
dststringfalse目標檔案路徑。如果未提供 dst，它將從 filename 路徑和 nuxt buildDir 選項生成。
optionsRecord<string, any>false要傳遞給模板的選項。
getContents(data) => string | Promise<string>false一個將使用 options 物件呼叫的函式。它應該返回一個字串或解析為字串的 Promise。如果提供了 src，此函式將被忽略。
writebooleanfalse如果設定為 true，模板將寫入目標檔案。否則，模板將僅在虛擬檔案系統中使用。

name：註冊佈局的名稱（例如 default、custom 等）。

示例

這將註冊一個名為 custom 的佈局，它會用頁首和頁尾包裝頁面。

import { addLayout, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addLayout({
      write: true,
      filename: 'my-layout.vue',
      getContents: () => `<template>
  <div>
    <header>My Header</header>
    <slot />
    <footer>My Footer</footer>
  </div>
</template>`,
    }, 'custom')
  },
})

然後你可以在你的頁面中使用此佈局

app/pages/about.vue
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>

<template>
  <div>About Page</div>
</template>
由於 @vitejs/plugin-vue 缺乏對虛擬 .vue 檔案的支援，你可以透過將 write: true 傳遞給 addLayout 的第一個引數來解決此限制。