例 · Nuxt Kit

Nuxt Vite設定へのアクセス

Nuxtが使用するランタイムViteまたはwebpack設定へのアクセスが必要な統合を構築する場合、Kitユーティリティを使用してこれを抽出することが可能です。

すでにこれを行っているプロジェクトの例

プロジェクトからVite設定にアクセスする方法の簡単な例を次に示します。同様のアプローチを実装してwebpack設定を取得できます。

import { loadNuxt, buildNuxt } from '@nuxt/kit'

// https://github.com/nuxt/nuxt/issues/14534
async function getViteConfig() {
  const nuxt = await loadNuxt({ cwd: process.cwd(), dev: false, overrides: { ssr: false } })
  return new Promise((resolve, reject) => {
    nuxt.hook('vite:extendConfig', (config, { isClient }) => {
      if (isClient) {
        resolve(config)
        throw new Error('_stop_')
      }
    })
    buildNuxt(nuxt).catch((err) => {
      if (!err.toString().includes('_stop_')) {
        reject(err)
      }
    })
  }).finally(() => nuxt.close())
}

const viteConfig = await getViteConfig()
console.log(viteConfig)

ビルダー

Nuxt Kitは、ビルダーの操作を支援するユーティリティのセットを提供します。これらの関数を使用すると、webpackとviteの設定を拡張できます。

ライフサイクルフック

Nuxtは、フックを使用してほぼすべての側面を拡張するための強力なフックシステムを提供します。