ライフサイクルフック

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

Docs > 4 X > Guide > Going Further > Hooks で詳細をご覧ください。

アプリケーションフック（ランタイム）

すべての利用可能なフックについては、アプリケーションソースコードをご確認ください。

フック	引数	環境	説明
`app:created`	`vueApp`	サーバー＆クライアント	最初の `vueApp` インスタンスが作成されたときに呼び出されます。
`app:error`	`err`	サーバー＆クライアント	致命的なエラーが発生したときに呼び出されます。
`app:error:cleared`	`{ redirect? }`	サーバー＆クライアント	致命的なエラーが発生したときに呼び出されます。
`vue:setup`	-	サーバー＆クライアント	Nuxt ルートのセットアップが初期化されたときに呼び出されます。このコールバックは同期である必要があります。
`vue:error`	`err, target, info`	サーバー＆クライアント	Vue のエラーがルートコンポーネントに伝播したときに呼び出されます。さらに学ぶ.
`app:rendered`	`renderContext`	サーバー	SSR レンダリングが完了したときに呼び出されます。
`app:redirected`	-	サーバー	SSR リダイレクトの前に呼び出されます。
`app:beforeMount`	`vueApp`	クライアント	アプリのマウント前に呼び出され、クライアント側でのみ呼び出されます。
`app:mounted`	`vueApp`	クライアント	Vue アプリがブラウザで初期化され、マウントされたときに呼び出されます。
`app:suspense:resolve`	`appComponent`	クライアント	Suspenseの resolved イベントで呼び出されます。resolved event.
`app:manifest:update`	`{ id, timestamp }`	クライアント	新しいバージョンのアプリが検出されたときに呼び出されます。
`app:data:refresh`	`keys?`	クライアント	`refreshNuxtData` が呼び出されたときに呼び出されます。
`link:prefetch`	`@BobbieGoede`	クライアント	`<NuxtLink>` がプリフェッチされると監視されたときに呼び出されます。
`page:start`	`pageComponent?`	クライアント	`NuxtPage` の pending イベント内で呼び出されます。の resolved イベントで呼び出されます。inside of `NuxtPage` pending event.
`page:finish`	`pageComponent?`	クライアント	`NuxtPage` の pending イベント内で呼び出されます。の resolved イベントで呼び出されます。`NuxtPage` の resolved イベント内で呼び出されます。
`page:loading:start`	-	クライアント	新しいページの `setup()` が実行されているときに呼び出されます。
`page:loading:end`	-	クライアント	`page:finish` の後に呼び出されます。
`page:transition:finish`	`pageComponent?`	クライアント	ページ遷移後のonAfterLeaveイベントで呼び出されます。
`dev:ssr-logs`	`logs`	クライアント	クライアントに渡されたサーバーサイドログの配列とともに呼び出されます（`features.devLogs` が有効な場合）。
`page:view-transition:start`	`transition`	クライアント	実験的な View Transition サポートが有効になっている場合に、`document.startViewTransition` が呼び出された後に呼び出されます。

Nuxt フック（ビルド時）

すべての利用可能なフックについては、スキーマソースコードをご確認ください。

フック	引数	説明
`kit:compatibility`	`compatibility, issues`	互換性チェックの拡張を可能にします。
`ready`	`nuxt`	Nuxt インスタンスが動作準備完了になった後、Nuxt の初期化後に呼び出されます。
`close`	`nuxt`	Nuxt インスタンスが正常に終了するときに呼び出されます。
`restart`	`{ hard?: boolean }`	現在の Nuxt インスタンスを再起動するために呼び出されます。
`modules:before`	-	Nuxt の初期化中、ユーザーモジュールがインストールされる前に呼び出されます。
`modules:done`	-	Nuxt の初期化中、ユーザーモジュールがインストールされた後に呼び出されます。
`app:resolve`	`app`	`app` インスタンスの解決後に呼び出されます。
`app:templates`	`app`	`NuxtApp` 生成中に呼び出され、ビルドディレクトリ（仮想的または `.nuxt` に書き込まれる）に新しいファイルをカスタマイズ、変更、追加することを可能にします。
`app:templatesGenerated`	`app`	テンプレートが仮想ファイルシステム（vfs）にコンパイルされた後に呼び出されます。
`build:before`	-	Nuxt バンドルビルダーの前に呼び出されます。
`build:done`	-	Nuxt バンドルビルダーが完了した後に呼び出されます。
`build:manifest`	`manifest`	Vite と webpack によるマニフェストビルド中に呼び出されます。これにより、Nitro が最終的な HTML で `<script>` および `<link>` タグをレンダリングするために使用するマニフェストをカスタマイズできます。
`builder:generateApp`	`options`	アプリ生成の前に呼び出されます。
`builder:watch`	`event, path`	開発中のビルド時、ウォッチャーがプロジェクト内のファイルまたはディレクトリの変更を検出したときに呼び出されます。
`pages:extend`	`pages`	ファイルシステムからページルートがスキャンされた後に呼び出されます。
`pages:resolved`	`pages`	ページルートがスキャンされたメタデータで拡張された後に呼び出されます。
`pages:routerOptions`	`{ files: Array<{ path: string, optional?: boolean }> }`	`router.options` ファイルを解決するときに呼び出されます。配列の後ろにある項目は前の項目を上書きします。
`server:devHandler`	`handler`	Nitro 開発サーバーに開発ミドルウェアが登録されているときに呼び出されます。
`imports:sources`	`presets`	セットアップ時に呼び出され、モジュールがソースを拡張できるようにします。
`imports:extend`	`imports`	セットアップ時に呼び出され、モジュールがインポートを拡張できるようにします。
`imports:context`	`context`	unimportコンテキストが作成されたときに呼び出されます。context is created.
`imports:dirs`	`dirs`	インポートディレクトリの拡張を可能にします。
`components:dirs`	`dirs`	`app:resolve` 内で呼び出され、自動インポート可能なコンポーネントがスキャンされるディレクトリを拡張できます。
`components:extend`	`components`	新しいコンポーネントの拡張を可能にします。
`nitro:config`	`nitroConfig`	Nitro の初期化前に呼び出され、Nitro の構成をカスタマイズできます。
`nitro:init`	`ニトロ`	Nitro が初期化された後に呼び出され、Nitro フックの登録や Nitro と直接のやり取りを可能にします。
`nitro:build:before`	`ニトロ`	Nitro インスタンスのビルド前に呼び出されます。
`nitro:build:public-assets`	`ニトロ`	パブリックアセットのコピー後に呼び出されます。Nitro サーバーがビルドされる前にパブリックアセットを変更できます。
`prerender:routes`	`ctx`	プリレンダリングされるルートの拡張を可能にします。
`build:error`	`error`	ビルド時にエラーが発生したときに呼び出されます。
`prepare:types`	`options`	`@nuxt/cli` が TypeScript 構成ファイル（`.nuxt/tsconfig.app.json`、`.nuxt/tsconfig.server.json` など）および `.nuxt/nuxt.d.ts` を書き込む前に呼び出され、`nuxt.d.ts` にカスタム参照と宣言を追加したり、生成された構成のオプションを直接変更したりできます。
`listen`	`listenerServer, listener`	開発サーバーがロードされているときに呼び出されます。
`schema:extend`	`schemas`	デフォルトスキーマの拡張を可能にします。
`schema:resolved`	`schema`	解決済みスキーマの拡張を可能にします。
`schema:beforeWrite`	`schema`	指定されたスキーマの書き込み前に呼び出されます。
`schema:written`	-	スキーマが書き込まれた後に呼び出されます。
`vite:extend`	`viteBuildContext`	Vite のデフォルトコンテキストの拡張を可能にします。
`vite:extendConfig`	`viteInlineConfig, env`	Vite のデフォルト構成の拡張を可能にします。非推奨。 `config` フックを持つ Vite プラグインを追加することをお勧めします。
`vite:configResolved`	`viteInlineConfig, env`	解決された Vite 構成の読み取りを可能にします。非推奨。 `configResolved` フックを持つ Vite プラグインを追加することをお勧めします。
`vite:serverCreated`	`viteServer, env`	Vite サーバーが作成されたときに呼び出されます。
`vite:compiled`	-	Vite サーバーがコンパイルされた後に呼び出されます。
`webpack:config`	`webpackConfigs`	webpack コンパイラの構成前に呼び出されます。
`webpack:configResolved`	`webpackConfigs`	解決された webpack 構成の読み取りを可能にします。
`webpack:compile`	`options`	コンパイル直前に呼び出されます。
`webpack:compiled`	`options`	リソースがロードされた後に呼び出されます。
`webpack:change`	`shortPath`	WebpackBar の `change` で呼び出されます。
`webpack:error`	-	WebpackBar にエラーがある場合、`done` で呼び出されます。
`webpack:done`	-	WebpackBar の `allDone` で呼び出されます。
`webpack:progress`	`statesArray`	WebpackBar の `progress` で呼び出されます。

Nitro アプリフック（ランタイム、サーバーサイド）

参照:Nitroをご確認ください。

フック	引数	説明	タイプ
`dev:ssr-logs`	`{ path, logs }`	サーバー	サーバーサイドログの配列とともにリクエストサイクルの最後に呼び出されます。
`render:response`	`response, { event }`	レスポンスを送信する前に呼び出されます。	response, event
`render:html`	`html, { event }`	HTML を構築する前に呼び出されます。	html, event
`render:island`	`islandResponse, { event, islandContext }`	アイランド HTML を構築する前に呼び出されます。	islandResponse, event, islandContext
`close`	-	Nitro が閉じられたときに呼び出されます。	-
`error`	`error, { event? }`	エラーが発生したときに呼び出されます。	error, event
`request`	`event`	リクエストが受信されたときに呼び出されます。	event
`beforeResponse`	`event, { body }`	レスポンスを送信する前に呼び出されます。	event, unknown
`afterResponse`	`event, { body }`	レスポンスを送信した後に呼び出されます。	event, unknown

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

プラグイン

Nuxt Kit は、プラグインを作成および使用するのに役立つ一連のユーティリティを提供します。これらの関数を使用して、モジュールにプラグインまたはプラギテンプレートを追加できます。

Import meta

`import.meta` を使用して、コードがどこで実行されているかを理解します。