ライフサイクルフック
Nuxtは、フックを使用してほぼすべての側面を拡張するための強力なフックシステムを提供します。
アプリフック(ランタイム)
利用可能なすべてのフックについては、アプリのソースコードを確認してください。
フック | 引数 | 環境 | 説明 |
---|---|---|---|
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 解決イベント時に呼び出されます。 |
app:manifest:update | { id, timestamp } | クライアント | アプリの新しいバージョンが検出されたときに呼び出されます。 |
app:data:refresh | keys? | クライアント | refreshNuxtData が呼び出されたときに呼び出されます。 |
link:prefetch | to | クライアント | <NuxtLink> がプリフェッチされるときに呼び出されます。 |
page:start | pageComponent? | クライアント | NuxtPage の保留イベント内で Suspense が呼び出されます。 |
page:finish | pageComponent? | クライアント | NuxtPage の解決イベント内で Suspense が呼び出されます。 |
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 | クライアント | 実験的なviewTransitionサポートが有効な場合 に 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 コンテキストが作成されるときに呼び出されます。 |
imports:dirs | dirs | インポートディレクトリを拡張することができます。 |
components:dirs | dirs | app:resolve 内で呼び出され、自動インポート可能なコンポーネントをスキャンするディレクトリを拡張することができます。 |
components:extend | components | 新しいコンポーネントを拡張することができます。 |
nitro:config | nitroConfig | Nitroの初期化前に呼び出され、Nitroの設定をカスタマイズすることができます。 |
nitro:init | nitro | Nitroが初期化された後に呼び出され、Nitroフックの登録やNitroとの直接のやり取りが可能です。 |
nitro:build:before | nitro | Nitroインスタンスのビルド前に呼び出されます。 |
nitro:build:public-assets | nitro | 公開アセットのコピー後に呼び出されます。Nitroサーバーがビルドされる前に公開アセットを変更することができます。 |
prerender:routes | ctx | プリレンダリングされるルートを拡張することができます。 |
build:error | error | ビルド時にエラーが発生したときに呼び出されます。 |
prepare:types | options | @nuxt/cli が .nuxt/tsconfig.json と .nuxt/nuxt.d.ts を書き込む前に呼び出され、nuxt.d.ts にカスタム参照や宣言を追加したり、tsconfig.json のオプションを直接変更することができます。 |
listen | listenerServer, listener | 開発サーバーがロードされるときに呼び出されます。 |
schema:extend | schemas | デフォルトのスキーマを拡張することができます。 |
schema:resolved | schema | 解決されたスキーマを拡張することができます。 |
schema:beforeWrite | schema | 指定されたスキーマを書き込む前に呼び出されます。 |
schema:written | - | スキーマが書き込まれた後に呼び出されます。 |
vite:extend | viteBuildContext | Viteのデフォルトコンテキストを拡張することができます。 |
vite:extendConfig | viteInlineConfig, env | Viteのデフォルト設定を拡張することができます。 |
vite:configResolved | viteInlineConfig, env | 解決された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 |
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/3.x/api/advanced/hooks