テンプレート

テンプレートを使用すると、開発中およびビルド時に追加のファイルを生成できます。これらのファイルは仮想ファイルシステムで利用可能になり、プラグイン、レイアウト、コンポーネントなどで使用できます。 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 パスと Nuxt の buildDir オプションから生成されます。
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' })
    })
  }
})

`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 (オプション)
型: string
テンプレートへのパス。src が指定されていない場合は、代わりに getContents を指定する必要があります。
filename (オプション)
型: string
テンプレートのファイル名。filename が指定されていない場合は、src パスから生成されます。この場合、src オプションが必要です.
dst (オプション)
型: string
宛先ファイルへのパス。 dst が指定されていない場合、filename パスと Nuxt の buildDir オプションから生成されます。
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 オブジェクトと共に呼び出される関数。テンプレートを再生成する必要があるかどうかを示す boolean 値を返す必要があります。 filter が指定されていない場合、すべてのテンプレートが再生成されます.

例

// https://github.com/nuxt/nuxt
import { defineNuxtModule, updateTemplates } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    // 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'
        })
      }
    })
  }
})

ランタイム設定

Nuxt Kit は、Nuxt ランタイム設定にアクセスして変更するためのユーティリティのセットを提供します。

Nitro

Nuxt Kit は、Nitro の操作に役立つユーティリティのセットを提供します。これらの関数を使用すると、サーバーハンドラー、プラグイン、およびプリレンダリングルートを追加できます。