updateTemplates function signature
The updateTemplates function is async and accepts UpdateTemplatesOptions, returning void. Signature: async function updateTemplates(options: UpdateTemplatesOptions): void
kit/templates
24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
addTemplate write property
The write property is optional and accepts a boolean. If set to true, the template will be written to the destination file. Otherwise, the template will be used only in virtual filesystem.
addTemplate dependsOn property
The dependsOn property is optional and specifies the watched inputs the output of the template can depend on, beyond nuxt.options and the resolved structure of the app. It accepts either Array<'pages' | 'plugins'> or a function ((change: { event, path }, ctx: { nuxt, app, options }) => boolean). Set to [] if the template never reads the contents of a watched file, so that Nuxt can skip recompiling it in dev mode when a file changes without any file being added or removed. List well-known keys if the template reads those sources, or pass a function to decide per change. A template that declares nothing is regenerated on every change.
addTemplate example with virtual file
Example showing addTemplate usage to create a virtual file for a runtime plugin: ```ts 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' }), }) }, }) ```
addTemplate with dependsOn empty array
Example showing how to skip regeneration in development by declaring dependsOn: [] when template is built only from configuration and file existence: ```ts import { addTemplate, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup (options, nuxt) { addTemplate({ filename: 'my-module/config.mjs', dependsOn: [], getContents: () => 'export default ' + JSON.stringify(options), }) }, }) ```
addTemplate with dependsOn pages
Example showing how to declare dependsOn with well-known sources: ```ts addTemplate({ filename: 'my-module/routes.mjs', dependsOn: ['pages'], getContents: ({ app }) => generateRoutes(app.pages), }) ```
addTemplate with dependsOn function
Example showing how to pass a function to dependsOn for files Nuxt doesn't know about: ```ts addTemplate({ filename: 'my-module/content.mjs', dependsOn: ({ path }) => path.endsWith('.yaml'), getContents: () => generateContents(), }) ```
Accessing virtual files in plugins via #build alias
Virtual files generated by addTemplate can be imported in runtime plugins using the #build alias. Example: ```ts import { createHead as createServerHead } from '@unhead/vue/server' import { createHead as createClientHead } from '@unhead/vue/client' import { defineNuxtPlugin } from '#imports' // @ts-expect-error - virtual file 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 function signature
The addTypeTemplate function accepts a NuxtTypeTemplate object or a string, and an optional context object, returning a ResolvedNuxtTemplate. Signature: function addTypeTemplate(template: NuxtTypeTemplate | string, context?: { nitro?: boolean, nuxt?: boolean }): ResolvedNuxtTemplate
addTypeTemplate src property
The src property is optional and specifies the path to the template. If src is not provided, getContents must be provided instead.
addTypeTemplate filename property
The filename property is optional and specifies the filename of the template. If filename is not provided, it will be generated from the src path. In this case, the src option is required.
addTypeTemplate dst property
The dst property is optional and specifies the path to the destination file. If dst is not provided, it will be generated from the filename path and nuxt buildDir option.
addTypeTemplate options property
The options property is optional and passes options to the template.
addTypeTemplate getContents property
The getContents property is optional and accepts a function with signature (data: Options) => string | Promise<string>. It will be called with the options object and should return a string or a promise that resolves to a string. If src is provided, this function will be ignored.
addTypeTemplate context nuxt property
The nuxt property of the context object is optional and accepts a boolean. If set to true, the type will be added to the Nuxt context.
addTypeTemplate context nitro property
The nitro property of the context object is optional and accepts a boolean. If set to true, the type will be added to the Nitro context.
addTypeTemplate basic example
Example showing addTypeTemplate usage to add type declarations for markdown files: ```ts import { addTypeTemplate, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { addTypeTemplate({ filename: 'types/markdown.d.ts', getContents: () => `declare module '*.md' { import type { ComponentOptions } from 'vue' const Component: ComponentOptions export default Component }`, }) }, }) ```
addTypeTemplate with Nitro context example
Example showing addTypeTemplate with nitro context set to true: ```ts import { addTypeTemplate, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { addTypeTemplate({ filename: 'types/auth.d.ts', getContents: () => `declare module '#auth-utils' { interface User { id: string; name: string; } }`, }, { nitro: true, }) }, }) ``` This allows the #auth-utils module to be used within the Nitro context, for example in server/api/auth.ts: ```ts import type { User } from '#auth-utils' export default eventHandler(() => { const user: User = { id: '123', name: 'John Doe', } return user }) ```
addServerTemplate function signature
The addServerTemplate function accepts a NuxtServerTemplate object and returns a NuxtServerTemplate. Signature: function addServerTemplate(template: NuxtServerTemplate): NuxtServerTemplate
addServerTemplate filename property
The filename property is required for addServerTemplate and specifies the filename of the template.
addServerTemplate getContents property
The getContents property is required for addServerTemplate and accepts a function with signature () => string | Promise<string>. It should return a string or a promise that resolves to a string.
addServerTemplate example
Example showing addServerTemplate usage to create a virtual file for Nitro: ```ts import { addServerTemplate, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { addServerTemplate({ filename: '#my-module/test.mjs', getContents () { return 'export const test = 123' }, }) }, }) ``` Then in a runtime file: ```ts import { test } from '#my-module/test.js' export default eventHandler(() => { return test }) ```
updateTemplates filter property
The filter property is optional and accepts a function with signature (template: ResolvedNuxtTemplate) => boolean. It will be called with the template object and should return a boolean indicating whether the template should be regenerated. If filter is not provided, all templates will be regenerated.
updateTemplates example
Example showing updateTemplates usage to watch and rebuild routes template when pages change: ```ts import { defineNuxtModule, updateTemplates } from '@nuxt/kit' import { resolve } from 'pathe' export default defineNuxtModule({ setup (options, nuxt) { const updateTemplatePaths = [ resolve(nuxt.options.srcDir, 'pages'), ] // 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', }) } }) }, }) ```