템플릿은 개발 및 빌드 시간 동안 추가 파일을 생성할 수 있게 해줍니다. 이러한 파일들은 가상 파일 시스템에서 사용 가능하며, 플러그인, 레이아웃, 컴포넌트 등에서 사용할 수 있습니다. addTemplate과 addTypeTemplate은 Nuxt 애플리케이션에 템플릿을 추가할 수 있게 해줍니다. updateTemplates는 필터에 맞는 템플릿을 재생성할 수 있게 해줍니다.

addTemplate

빌드 중에 주어진 템플릿을 가상 파일 시스템에 렌더링하고, 선택적으로 프로젝트 buildDir에 디스크로 저장합니다.

사용법

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

타입

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

매개변수

template: 템플릿 객체 또는 템플릿 경로를 가진 문자열. 문자열이 제공되면, 문자열 값을 src로 설정한 템플릿 객체로 변환됩니다. 템플릿 객체가 제공되면, 다음 속성을 가져야 합니다:

예제

런타임 플러그인을 위한 가상 파일 생성

이 예제에서는 모듈 내부의 객체를 병합하고, 결과를 런타임 플러그인에서 사용합니다.

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

위 모듈에서는 meta.config.mjs라는 가상 파일을 생성합니다. 런타임 플러그인에서는 #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

빌드 중에 주어진 템플릿을 프로젝트 buildDir에 렌더링한 후, 이를 타입으로 등록합니다.

사용법

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

타입

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

매개변수

template: 템플릿 객체 또는 템플릿 경로를 가진 문자열. 문자열이 제공되면, 문자열 값을 src로 설정한 템플릿 객체로 변환됩니다. 템플릿 객체가 제공되면, 다음 속성을 가져야 합니다:

context: 타입이 추가될 위치를 제어하기 위해 전달할 수 있는 선택적 컨텍스트 객체입니다. 생략되면, 타입은 Nuxt 컨텍스트에만 추가됩니다. 이 객체는 다음 속성을 지원합니다:

예제

Nitro 컨텍스트에 타입 템플릿 추가

기본적으로, －－는 타입 선언을 Nuxt 컨텍스트에만 추가합니다. Nitro 컨텍스트에도 추가하려면, nitro를 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,
    })
  },
})

이렇게 하면 #auth-utils 모듈을 Nitro 컨텍스트 내에서 사용할 수 있습니다.

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

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

  // 사용자와 관련된 작업 수행

  return user
})

addServerTemplate

Nuxt Nitro 서버 빌드 내에서 사용할 수 있는 가상 파일을 추가합니다.

사용법

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

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

타입

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

매개변수

template: 템플릿 객체. 다음 속성을 가져야 합니다:

예제

Nitro를 위한 가상 파일 생성

이 예제에서는 Nuxt Nitro 서버 빌드 내에서 사용할 수 있는 가상 파일을 생성합니다.

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

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

그리고 런타임 파일에서

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

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

updateTemplates

필터에 맞는 템플릿을 재생성합니다. 필터가 제공되지 않으면, 모든 템플릿이 재생성됩니다.

사용법

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

export default defineNuxtModule({
  setup (options, nuxt) {
    const updateTemplatePaths = [
      resolve(nuxt.options.srcDir, 'pages'),
    ]
    // 페이지 중 하나가 변경될 때 경로 템플릿 목록을 감시하고 재빌드합니다.
    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',
        })
      }
    })
  },
})

타입

async function updateTemplates (options: UpdateTemplatesOptions): void

매개변수

options: 템플릿에 전달할 옵션. 이 객체는 다음 속성을 가질 수 있습니다: