Las plantillas permiten generar archivos adicionales durante el desarrollo y el tiempo de construcción. Estos archivos estarán disponibles en el sistema de archivos virtual y pueden ser utilizados en plugins, layouts, componentes, etc. addTemplate y addTypeTemplate te permiten añadir plantillas a la aplicación Nuxt. updateTemplates te permite regenerar plantillas que coincidan con el filtro.

addTemplate

Renderiza la plantilla dada durante la construcción en el sistema de archivos virtual, y opcionalmente en el disco en el buildDir del proyecto.

Uso

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

Tipo

// @errors: 2391
import type { NuxtTemplate, ResolvedNuxtTemplate } from '@nuxt/schema'
// ---cut---
function addTemplate (template: NuxtTemplate | string): ResolvedNuxtTemplate

Parámetros

template: Un objeto de plantilla o una cadena con la ruta a la plantilla. Si se proporciona una cadena, se convertirá en un objeto de plantilla con src establecido en el valor de la cadena. Si se proporciona un objeto de plantilla, debe tener las siguientes propiedades:

Ejemplos

Creando un Archivo Virtual para un Plugin en Tiempo de Ejecución

En este ejemplo, combinamos un objeto dentro de un módulo y consumimos el resultado en un plugin en tiempo de ejecución.

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

En el módulo anterior, generamos un archivo virtual llamado meta.config.mjs. En el plugin en tiempo de ejecución, podemos importarlo usando el alias #build:

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

Renderiza la plantilla dada durante la construcción en el buildDir del proyecto, luego la registra como tipos.

Uso

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
}`,
    })
  },
})

Tipo

function addTypeTemplate (template: NuxtTypeTemplate | string, context?: { nitro?: boolean, nuxt?: boolean }): ResolvedNuxtTemplate

Parámetros

template: Un objeto de plantilla o una cadena con la ruta a la plantilla. Si se proporciona una cadena, se convertirá en un objeto de plantilla con src establecido en el valor de la cadena. Si se proporciona un objeto de plantilla, debe tener las siguientes propiedades:

context: Un objeto de contexto opcional que se puede pasar para controlar dónde se agrega el tipo. Si se omite, el tipo solo se agregará al contexto de Nuxt. Este objeto admite las siguientes propiedades:

Ejemplos

Añadiendo Plantillas de Tipo al Contexto de Nitro

Por defecto, solo se añaden las declaraciones de tipo al contexto de Nuxt. Para añadirlas también al contexto de Nitro, establece nitro en true.

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,
    })
  },
})

Esto permite que el módulo #auth-utils se utilice dentro del contexto de Nitro.

import type { User } from '#auth-utils'

export default eventHandler(() => {
  const user: User = {
    id: '123',
    name: 'John Doe',
  }

  // hacer algo con el usuario

  return user
})

addServerTemplate

Añade un archivo virtual que puede ser utilizado dentro de la construcción del servidor Nuxt Nitro.

Uso

import { addServerTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addServerTemplate({
      filename: '#my-module/test.mjs',
      getContents () {
        return 'export const test = 123'
      },
    })
  },
})

Tipo

// @errors: 2391
import type { NuxtServerTemplate } from '@nuxt/schema'
// ---cut---
function addServerTemplate (template: NuxtServerTemplate): NuxtServerTemplate

Parámetros

template: Un objeto de plantilla. Debe tener las siguientes propiedades:

Ejemplos

Creando un Archivo Virtual para Nitro

En este ejemplo, creamos un archivo virtual que puede ser utilizado dentro de la construcción del servidor Nuxt Nitro.

import { addServerTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addServerTemplate({
      filename: '#my-module/test.mjs',
      getContents () {
        return 'export const test = 123'
      },
    })
  },
})

Y luego en un archivo en tiempo de ejecución

import { test } from '#my-module/test.js'

export default eventHandler(() => {
  return test
})

updateTemplates

Regenera plantillas que coincidan con el filtro. Si no se proporciona un filtro, se regenerarán todas las plantillas.

Uso

import { defineNuxtModule, updateTemplates } from '@nuxt/kit'
import { resolve } from 'pathe'

export default defineNuxtModule({
  setup (options, nuxt) {
    const updateTemplatePaths = [
      resolve(nuxt.options.srcDir, 'pages'),
    ]
    // observa y reconstruye la lista de plantillas de rutas cuando una de las páginas cambia
    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',
        })
      }
    })
  },
})

Tipo

async function updateTemplates (options: UpdateTemplatesOptions): void

Parámetros

options: Opciones para pasar a la plantilla. Este objeto puede tener la siguiente propiedad: