テンプレートは、開発およびビルド時に追加のファイルを生成することができます。これらのファイルは仮想ファイルシステムで利用可能になり、プラグイン、レイアウト、コンポーネントなどで使用できます。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: テンプレートに渡すオプション。このオブジェクトは以下のプロパティを持つことができます: