ビルダー

ソース
Nuxt Kitは、ビルダーを扱うのに役立つ一連のユーティリティを提供します。これらの関数を使用すると、Viteおよびwebpackの設定を拡張できます。

Nuxtには、ViteGlobalComponentswebpackに基づいたビルダーがあります。extendViteConfigおよびextendWebpackConfig関数を使用して、それぞれに渡される設定を拡張できます。また、addVitePlugin、addWebpackPlugin、およびaddBuildPluginを介して追加のプラグインを追加することもできます。

extendViteConfig

Viteの設定を拡張します。コールバック関数は、クライアントとサーバーの両方のビルドに適用されるときに複数回呼び出すことができます。

このフックは非推奨となり、代わりにconfigフックを持つViteプラグインを使用することをお勧めします。

使用方法

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

export default defineNuxtModule({
  setup () {
    extendViteConfig((config) => {
      config.optimizeDeps ||= {}
      config.optimizeDeps.include ||= []
      config.optimizeDeps.include.push('cross-fetch')
    })
  },
})

タイプ

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void
設定の詳細については、Viteのウェブサイトをご覧ください。

パラメーター

callback: Vite設定オブジェクトを引数として呼び出されるコールバック関数。

options: コールバック関数に渡すオプション。このオブジェクトには以下のプロパティがあります。

プロパティタイプ必須説明
devブール値falsetrueに設定すると、開発モードでのビルド時にコールバック関数が呼び出されます。
ビルドブール値falsetrueに設定すると、プロダクションモードでのビルド時にコールバック関数が呼び出されます。
サーバーブール値falsetrueに設定すると、サーバーバンドルのビルド時にコールバック関数が呼び出されます。
クライアントブール値falsetrueに設定すると、クライアントバンドルのビルド時にコールバック関数が呼び出されます。
prependブール値falsetrueに設定すると、コールバック関数はpush()ではなくunshift()を使用して配列の先頭に追加されます。

extendWebpackConfig

webpackの設定を拡張します。コールバック関数は、クライアントとサーバーの両方のビルドに適用されるときに複数回呼び出すことができます。

使用方法

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

export default defineNuxtModule({
  setup () {
    extendWebpackConfig((config) => {
      config.module!.rules!.push({
        test: /\.txt$/,
        use: 'raw-loader',
      })
    })
  },
})

タイプ

function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void
設定の詳細については、webpackのウェブサイトをご覧ください。

パラメーター

callback: webpack設定オブジェクトを引数として呼び出されるコールバック関数。

options: コールバック関数に渡すオプション。このオブジェクトには以下のプロパティがあります。

プロパティタイプ必須説明
devブール値falsetrueに設定すると、開発モードでのビルド時にコールバック関数が呼び出されます。
ビルドブール値falsetrueに設定すると、プロダクションモードでのビルド時にコールバック関数が呼び出されます。
サーバーブール値falsetrueに設定すると、サーバーバンドルのビルド時にコールバック関数が呼び出されます。
クライアントブール値falsetrueに設定すると、クライアントバンドルのビルド時にコールバック関数が呼び出されます。
prependブール値falsetrueに設定すると、コールバック関数はpush()ではなくunshift()を使用して配列の先頭に追加されます。

addVitePlugin

Viteプラグインを設定に追加します。

使用方法

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-svg-icons',
    configKey: 'nuxtSvgIcons',
  },
  defaults: {
    svg4vue: {
      assetsDirName: 'assets/icons',
    },
  },
  setup (options) {
    addVitePlugin(svg4VuePlugin(options.svg4vue))
  },
})

タイプ

function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void
参照:ViteのウェブサイトViteプラグインの詳細については、こちらをご覧ください。また、このリポジトリで、あなたのニーズに合ったプラグインを見つけることができます。

パラメーター

pluginOrGetter: Viteプラグインインスタンス、またはViteプラグインインスタンスの配列。関数が提供された場合、ViteプラグインインスタンスまたはViteプラグインインスタンスの配列を返さなければなりません。

options: コールバック関数に渡すオプション。このオブジェクトには以下のプロパティがあります。

プロパティタイプ必須説明
devブール値falsetrueに設定すると、開発モードでのビルド時にコールバック関数が呼び出されます。
ビルドブール値falsetrueに設定すると、プロダクションモードでのビルド時にコールバック関数が呼び出されます。
サーバーブール値falsetrueに設定すると、サーバーバンドルのビルド時にコールバック関数が呼び出されます。
クライアントブール値falsetrueに設定すると、クライアントバンドルのビルド時にコールバック関数が呼び出されます。
prependブール値falsetrueに設定すると、コールバック関数はpush()ではなくunshift()を使用して配列の先頭に追加されます。

addWebpackPlugin

webpackプラグインを設定に追加します。

使用方法

import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-eslint',
    configKey: 'eslint',
  },
  defaults: nuxt => ({
    include: [`${nuxt.options.srcDir}/**/*.{js,jsx,ts,tsx,vue}`],
    lintOnStart: true,
  }),
  setup (options, nuxt) {
    const webpackOptions = {
      ...options,
      context: nuxt.options.srcDir,
      files: options.include,
      lintDirtyModulesOnly: !options.lintOnStart,
    }
    addWebpackPlugin(new EslintWebpackPlugin(webpackOptions), { server: false })
  },
})

タイプ

function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void
参照:webpackのウェブサイトwebpackプラグインの詳細については、こちらをご覧ください。また、このコレクションで、あなたのニーズに合ったプラグインを見つけることができます。

パラメーター

pluginOrGetter: webpackプラグインインスタンス、またはwebpackプラグインインスタンスの配列。関数が提供された場合、webpackプラグインインスタンスまたはwebpackプラグインインスタンスの配列を返さなければなりません。

options: コールバック関数に渡すオプション。このオブジェクトには以下のプロパティがあります。

プロパティタイプ必須説明
devブール値falsetrueに設定すると、開発モードでのビルド時にコールバック関数が呼び出されます。
ビルドブール値falsetrueに設定すると、プロダクションモードでのビルド時にコールバック関数が呼び出されます。
サーバーブール値falsetrueに設定すると、サーバーバンドルのビルド時にコールバック関数が呼び出されます。
クライアントブール値falsetrueに設定すると、クライアントバンドルのビルド時にコールバック関数が呼び出されます。
prependブール値falsetrueに設定すると、コールバック関数はpush()ではなくunshift()を使用して配列の先頭に追加されます。

addBuildPlugin

addVitePluginおよびaddWebpackPluginのビルダーに依存しないバージョン。存在する場合、Viteとwebpackの両方の設定にプラグインを追加します。

タイプ

function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

パラメーター

pluginFactory: viteおよび/またはwebpackプロパティを持つオブジェクトを返すファクトリ関数。これらのプロパティは、ViteプラグインインスタンスまたはViteプラグインインスタンスの配列、および/またはwebpackプラグインインスタンスまたはwebpackプラグインインスタンスの配列を返す関数でなければなりません。

options: コールバック関数に渡すオプション。このオブジェクトには以下のプロパティがあります。

プロパティタイプ必須説明
devブール値falsetrueに設定すると、開発モードでのビルド時にコールバック関数が呼び出されます。
ビルドブール値falsetrueに設定すると、プロダクションモードでのビルド時にコールバック関数が呼び出されます。
サーバーブール値falsetrueに設定すると、サーバーバンドルのビルド時にコールバック関数が呼び出されます。
クライアントブール値falsetrueに設定すると、クライアントバンドルのビルド時にコールバック関数が呼び出されます。
prependブール値falsetrueに設定すると、コールバック関数はpush()ではなくunshift()を使用して配列の先頭に追加されます。