透過超過 100 個技巧的集合學習 Nuxt!

佈局

Nuxt Kit 提供一組實用工具來協助您處理佈局。

佈局用於包裝您的頁面。它可以用來使用通用元件包裝您的頁面,例如頁首和頁尾。可以使用 addLayout 工具註冊佈局。

addLayout

將樣板註冊為佈局並將其新增至佈局中。

在 Nuxt 2 中,也可以使用此工具註冊 error 佈局。在 Nuxt 3+ 中,error 佈局已取代為專案根目錄中的 error.vue 頁面。

類型

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

interface NuxtTemplate {
  src?: string
  filename?: string
  dst?: string
  options?: Record<string, any>
  getContents?: (data: Record<string, any>) => string | Promise<string>
  write?: boolean
}

參數

layout

類型: NuxtTemplate | string

必要: true

樣板物件或帶有樣板路徑的字串。如果提供字串,它將會轉換為 src 設定為字串值的樣板物件。如果提供樣板物件,它必須具有以下屬性

  • src (選用)
    類型: string
    樣板的路徑。如果未提供 src,則必須提供 getContents
  • filename (選用)
    類型: string
    樣板的檔案名稱。如果未提供 filename,它將會從 src 路徑產生。在這種情況下,src 選項是必要的。
  • dst (選用)
    類型: string
    目的地檔案的路徑。如果未提供 dst,它將會從 filename 路徑和 nuxt buildDir 選項產生。
  • options (選用)
    類型: Options
    要傳遞到樣板的選項。
  • getContents (選用)
    類型: (data: Options) => string | Promise<string>
    將會使用 options 物件呼叫的函式。它應該會傳回字串或解析為字串的 Promise。如果提供了 src,將會忽略此函式。
  • write (選用)
    類型: boolean
    如果設定為 true,樣板將會寫入到目的地檔案。否則,樣板將僅在虛擬檔案系統中使用。