nuxt-prepare

ビルド時の初期化ステップ – Nuxt 2 のサーバー初期化のように

2.2K ダウンロード•103 スター•v3.0.0

johannschopplich

Nuxt Prepare

Nuxt モジュールで、ビルド時に非同期の初期化ステップを実行します。

機能

🦦 設定不要
🦎 Nuxt がアプリをビルドするときに同期または非同期操作を実行
✂️ ランタイム設定またはアプリ設定の値を条件付きで上書き
🍡 スクリプトを直列または並列で実行
🥢 Nitro サーバールートに対応
🦾 defineNuxtPrepareHandler でより良い開発体験

セットアップ

!TIP📖 ドキュメントを読む

npx nuxi@latest module add prepare

基本的な使い方

!TIP📖 ドキュメントを読む

nuxt-prepare モジュールを nuxt.config.ts に追加してください

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-prepare']
})

デフォルトでは、Nuxt Prepare はプロジェクトのルートにある server.prepare.ts ファイルを探します。Nuxt がアプリをビルドするときに同期または非同期コードを実行するには、プロジェクトのルートにハンドラーを定義し、デフォルト関数をエクスポートします

// `server.prepare.ts`
import { defineNuxtPrepareHandler } from 'nuxt-prepare/config'

export default defineNuxtPrepareHandler(async () => {
  // Do some async magic here, e.g. fetch data from an API

  return {
    // Overwrite the runtime config variable `foo`
    runtimeConfig: {
      public: {
        foo: 'Overwritten by "server.prepare" script'
      }
    },

    // Pass custom state to Nuxt and import it
    // anywhere from `#nuxt-prepare`
    state: {
      foo: 'bar'
    }
  }
})

!TIP 準備スクリプトは必要なだけ実行できます – prepare.scripts モジュール設定に追加してください。

💻 開発

このリポジトリをクローンする
corepack enable を使用して Corepack を有効にする
pnpm installを使用して依存関係をインストールする
pnpm run dev:prepare を実行します。
pnpm run dev を使用して開発サーバーを起動します。

クレジット

カメレオンのピクセルアートを提供してくれた Maronbeere に感謝します。
彼のインスピレーションを与えてくれた nuxt-server-init モジュールを提供してくれた McPizza0 に感謝します。