nuxt logo

ドキュメント翻訳(非公式)

Nuxt.js
Version:v3.17

ライフサイクルフック

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

こちらも参照 guide > going-further > hooks

アプリフック(ランタイム)

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

フック引数環境説明
app:createdvueAppサーバー & クライアント初期の vueApp インスタンスが作成されたときに呼び出されます。
app:errorerrサーバー & クライアント致命的なエラーが発生したときに呼び出されます。
app:error:cleared{ redirect? }サーバー & クライアント致命的なエラーが発生したときに呼び出されます。
vue:setup-サーバー & クライアントNuxtルートのセットアップが初期化されたときに呼び出されます。このコールバックは同期的でなければなりません。
vue:errorerr, target, infoサーバー & クライアントVueエラーがルートコンポーネントに伝播したときに呼び出されます。詳細はこちら
app:renderedrenderContextサーバーSSRレンダリングが完了したときに呼び出されます。
app:redirected-サーバーSSRリダイレクトの前に呼び出されます。
app:beforeMountvueAppクライアントアプリのマウント前に呼び出され、クライアント側でのみ呼び出されます。
app:mountedvueAppクライアントVueアプリが初期化され、ブラウザにマウントされたときに呼び出されます。
app:suspense:resolveappComponentクライアントSuspense 解決イベント時に呼び出されます。
app:manifest:update{ id, timestamp }クライアントアプリの新しいバージョンが検出されたときに呼び出されます。
app:data:refreshkeys?クライアントrefreshNuxtData が呼び出されたときに呼び出されます。
link:prefetchtoクライアント<NuxtLink> がプリフェッチされるときに呼び出されます。
page:startpageComponent?クライアントNuxtPage の保留イベント内で Suspense が呼び出されます。
page:finishpageComponent?クライアントNuxtPage の解決イベント内で Suspense が呼び出されます。
page:loading:start-クライアント新しいページの setup() が実行されるときに呼び出されます。
page:loading:end-クライアントpage:finish の後に呼び出されます。
page:transition:finishpageComponent?クライアントページ遷移後の onAfterLeave イベント。
dev:ssr-logslogsクライアントクライアントに渡されたサーバーサイドのログの配列と共に呼び出されます(features.devLogs が有効な場合)。
page:view-transition:starttransitionクライアント実験的なviewTransitionサポートが有効な場合document.startViewTransition が呼び出された後に呼び出されます。

Nuxtフック(ビルド時)

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

フック引数説明
kit:compatibilitycompatibility, issues互換性チェックを拡張することができます。
readynuxtNuxtの初期化後、Nuxtインスタンスが作業可能になったときに呼び出されます。
closenuxtNuxtインスタンスが正常に閉じるときに呼び出されます。
restart{ hard?: boolean }現在のNuxtインスタンスを再起動するために呼び出されます。
modules:before-Nuxtの初期化中、ユーザーモジュールのインストール前に呼び出されます。
modules:done-Nuxtの初期化中、ユーザーモジュールのインストール後に呼び出されます。
app:resolveappapp インスタンスの解決後に呼び出されます。
app:templatesappNuxtApp の生成中に呼び出され、ビルドディレクトリに新しいファイルをカスタマイズ、変更、または追加することができます(仮想的にまたは .nuxt に書き込むために)。
app:templatesGeneratedappテンプレートが仮想ファイルシステム (vfs) にコンパイルされた後に呼び出されます。
build:before-Nuxtバンドルビルダーの前に呼び出されます。
build:done-Nuxtバンドルビルダーが完了した後に呼び出されます。
build:manifestmanifestViteとwebpackによるマニフェストビルド中に呼び出されます。Nitroが最終HTMLで <script><link> タグをレンダリングするために使用するマニフェストをカスタマイズすることができます。
builder:generateAppoptionsアプリの生成前に呼び出されます。
builder:watchevent, path開発中にビルド時にウォッチャーがプロジェクト内のファイルまたはディレクトリの変更を検出したときに呼び出されます。
pages:extendpagesファイルシステムからページルートがスキャンされた後に呼び出されます。
pages:resolvedpagesページルートがスキャンされたメタデータで拡張された後に呼び出されます。
pages:routerOptions{ files: Array<{ path: string, optional?: boolean }> }router.options ファイルを解決するときに呼び出されます。配列内の後の項目は前の項目を上書きします。
server:devHandlerhandlerNitro開発サーバーで開発ミドルウェアが登録されるときに呼び出されます。
imports:sourcespresetsセットアップ時にモジュールがソースを拡張できるようにします。
imports:extendimportsセットアップ時にモジュールがインポートを拡張できるようにします。
imports:contextcontextunimport コンテキストが作成されるときに呼び出されます。
imports:dirsdirsインポートディレクトリを拡張することができます。
components:dirsdirsapp:resolve 内で呼び出され、自動インポート可能なコンポーネントをスキャンするディレクトリを拡張することができます。
components:extendcomponents新しいコンポーネントを拡張することができます。
nitro:confignitroConfigNitroの初期化前に呼び出され、Nitroの設定をカスタマイズすることができます。
nitro:initnitroNitroが初期化された後に呼び出され、Nitroフックの登録やNitroとの直接のやり取りが可能です。
nitro:build:beforenitroNitroインスタンスのビルド前に呼び出されます。
nitro:build:public-assetsnitro公開アセットのコピー後に呼び出されます。Nitroサーバーがビルドされる前に公開アセットを変更することができます。
prerender:routesctxプリレンダリングされるルートを拡張することができます。
build:errorerrorビルド時にエラーが発生したときに呼び出されます。
prepare:typesoptions@nuxt/cli.nuxt/tsconfig.json.nuxt/nuxt.d.ts を書き込む前に呼び出され、nuxt.d.ts にカスタム参照や宣言を追加したり、tsconfig.json のオプションを直接変更することができます。
listenlistenerServer, listener開発サーバーがロードされるときに呼び出されます。
schema:extendschemasデフォルトのスキーマを拡張することができます。
schema:resolvedschema解決されたスキーマを拡張することができます。
schema:beforeWriteschema指定されたスキーマを書き込む前に呼び出されます。
schema:written-スキーマが書き込まれた後に呼び出されます。
vite:extendviteBuildContextViteのデフォルトコンテキストを拡張することができます。
vite:extendConfigviteInlineConfig, envViteのデフォルト設定を拡張することができます。
vite:configResolvedviteInlineConfig, env解決されたVite設定を読み取ることができます。
vite:serverCreatedviteServer, envViteサーバーが作成されたときに呼び出されます。
vite:compiled-Viteサーバーがコンパイルされた後に呼び出されます。
webpack:configwebpackConfigswebpackコンパイラの設定前に呼び出されます。
webpack:configResolvedwebpackConfigs解決されたwebpack設定を読み取ることができます。
webpack:compileoptionsコンパイル直前に呼び出されます。
webpack:compiledoptionsリソースがロードされた後に呼び出されます。
webpack:changeshortPathWebpackBarの change 時に呼び出されます。
webpack:error-WebpackBarの done 時にエラーがある場合に呼び出されます。
webpack:done-WebpackBarの allDone 時に呼び出されます。
webpack:progressstatesArrayWebpackBarの progress 時に呼び出されます。

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

利用可能なすべてのフックについては、Nitro を参照してください。

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