透過 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,模板將寫入目的地檔案。否則,模板將僅在虛擬檔案系統中使用。