模板 · Nuxt Kit - Nuxt 框架

範本允許在開發和建置期間產生額外的檔案。這些檔案將在虛擬檔案系統中可用，並可在外掛程式、佈局、元件等中使用。addTemplate 和 addTypeTemplate 允許您將範本新增至 Nuxt 應用程式。updateTemplates 允許您重新產生符合篩選條件的範本。

`addTemplate`

在建置期間將指定的範本渲染到專案的 buildDir 中。

類型

function addTemplate (template: NuxtTemplate | string): ResolvedNuxtTemplate

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

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

參數

`template`

類型: 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，則範本將被寫入目標檔案。否則，該範本將僅在虛擬檔案系統中使用。

範例

// https://github.com/nuxt/bridge
import { addTemplate, defineNuxtModule } from '@nuxt/kit'
import { defu } from 'defu'

export default defineNuxtModule({
  setup(options, nuxt) {
    const globalMeta = defu(nuxt.options.app.head, {
      charset: options.charset,
      viewport: options.viewport
    })

    addTemplate({
      filename: 'meta.config.mjs',
      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
    })
  }
})

`addTypeTemplate`

在建置期間將指定的範本渲染到專案的 buildDir 中，然後將其註冊為類型。

類型

function addTypeTemplate (template: NuxtTypeTemplate | string): ResolvedNuxtTemplate

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

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

參數

`template`

類型: NuxtTypeTemplate | 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，則將忽略此函式。

範例

// https://github.com/Hebilicious/nuxtpress
import { addTypeTemplate, defineNuxtModule } from "@nuxt/kit"

export default defineNuxtModule({
  setup() {
    addTypeTemplate({
      filename: "types/markdown.d.ts",
      getContents: () => /* ts */`
      declare module '*.md' {
        import type { ComponentOptions } from 'vue'
        const Component: ComponentOptions
        export default Component
      }`
    })
  }
}

`updateTemplates`

重新產生符合篩選條件的範本。如果未提供篩選條件，則將重新產生所有範本。

類型

async function updateTemplates (options: UpdateTemplatesOptions): void

interface UpdateTemplatesOptions {
  filter?: (template: ResolvedNuxtTemplate) => boolean
}

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

參數

`options`

類型: UpdateTemplatesOptions

預設值: {}

要傳遞給範本的選項。此物件可以具有以下屬性

filter (選填)
類型: (template: ResolvedNuxtTemplate) => boolean
一個將使用 template 物件呼叫的函式。它應該傳回一個布林值，指示是否應重新產生該範本。如果未提供 filter，則將重新產生所有範本。

範例

// https://github.com/nuxt/nuxt
import { defineNuxtModule, updateTemplates } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    // watch and rebuild routes template list when one of the pages changes
    nuxt.hook('builder:watch', async (event, relativePath) => {
      if (event === 'change') { return }

      const path = resolve(nuxt.options.srcDir, relativePath)
      if (updateTemplatePaths.some(dir => path.startsWith(dir))) {
        await updateTemplates({
          filter: template => template.filename === 'routes.mjs'
        })
      }
    })
  }
})

執行階段配置

Nuxt Kit 提供了一組工具，協助您存取和修改 Nuxt 執行階段配置。

Nitro

Nuxt Kit 提供了一組工具，協助您使用 Nitro。這些函式允許您新增伺服器處理常式、外掛程式和預先渲染路由。