Nuxt Prepare

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

機能

🦦 ゼロコンフィグ
🦎 Nuxtがアプリをビルドする際に、同期または非同期操作を実行します
✂️ ランタイム設定またはアプリ設定値を条件付きで上書きします
🍡 スクリプトを直列または並列で実行します
🦾 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さん。
インスピレーションを与えてくれたMcPizza0さんと、彼のnuxt-server-initモジュール。

nuxt-prepare

Nuxt Prepare

機能

設定

基本的な使用方法

💻 開発

クレジット

ライセンス