v3.17

模板

Source
Nuxt Kit 提供了一组实用程序来帮助你使用模板。这些函数允许你在开发和构建期间生成额外的文件。

模板允许在开发和构建期间生成额外的文件。这些文件将在虚拟文件系统中可用，并可用于插件、布局、组件等。addTemplate 和 addTypeTemplate 允许你向 Nuxt 应用添加模板。updateTemplates 允许你重新生成与过滤器匹配的模板。

¥Templates allows to generate extra files during development and build time. These files will be available in virtual filesystem and can be used in plugins, layouts, components, etc. addTemplate and addTypeTemplate allow you to add templates to the Nuxt application. updateTemplates allows you to regenerate templates that match the filter.

addTemplate

在构建过程中将给定的模板渲染到项目 buildDir 中。

¥Renders given template during build into the project buildDir.

类型

¥Type

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
}

参数

¥Parameters

template

类型：NuxtTemplate | string

¥Type: NuxtTemplate | string

必需：true

¥Required: true

模板对象或包含模板路径的字符串。如果提供了字符串，它将被转换为模板对象，并将 src 设置为该字符串值。如果提供了模板对象，它必须具有以下属性：

¥A template object or a string with the path to the template. If a string is provided, it will be converted to a template object with src set to the string value. If a template object is provided, it must have the following properties:

  • 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，模板将被写入目标文件。否则，该模板将仅在虚拟文件系统中使用。

示例

¥Examples

// 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 中，然后将其注册为类型。

¥Renders given template during build into the project buildDir, then registers it as types.

类型

¥Type

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
}

参数

¥Parameters

template

类型：NuxtTypeTemplate | string

¥Type: NuxtTypeTemplate | string

必需：true

¥Required: true

模板对象或包含模板路径的字符串。如果提供了字符串，它将被转换为模板对象，并将 src 设置为该字符串值。如果提供了模板对象，它必须具有以下属性：

¥A template object or a string with the path to the template. If a string is provided, it will be converted to a template object with src set to the string value. If a template object is provided, it must have the following properties:

  • 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，则此函数将被忽略。

示例

¥Examples

// 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

重新生成与过滤器匹配的模板。如果未提供过滤器，则将重新生成所有模板。

¥Regenerate templates that match the filter. If no filter is provided, all templates will be regenerated.

类型

¥Type

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
}

参数

¥Parameters

options

类型：UpdateTemplatesOptions

¥Type: UpdateTemplatesOptions

默认：{}

¥Default: {}

传递给模板的选项。此对象可以具有以下属性：

¥Options to pass to the template. This object can have the following property:

  • filter（可选）
    类型：(template: ResolvedNuxtTemplate) => boolean
    一个函数，用于使用 template 对象调用。它应该返回一个布尔值，指示是否应重新生成模板。如果未提供 filter，则所有模板都将重新生成。

示例

¥Example

// 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'
        })
      }
    })
  }
})