模板
Nuxt Kit 提供了一系列工具,帮助您使用模板。这些函数允许您在开发和构建时生成额外的文件。
模板允许在开发和构建时生成额外的文件。这些文件将可在虚拟文件系统中使用,可以在插件、布局、组件等中使用。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
路径和 nuxtbuildDir
选项生成。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' })
})
}
})
import { createHead as createServerHead } from '@unhead/vue/server'
import { createHead as createClientHead } from '@unhead/vue/client'
import { defineNuxtPlugin } from '#imports'
// @ts-ignore
import metaConfig from '#build/meta.config.mjs'
export default defineNuxtPlugin((nuxtApp) => {
const createHead = import.meta.server ? createServerHead : createClientHead
const head = createHead()
head.push(metaConfig.globalMeta)
nuxtApp.vueApp.use(head)
})
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
路径和 nuxtbuildDir
选项生成。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) {
// 监视并在页面之一更改时重建路由模板列表
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'
})
}
})
}
})