ライフサイクルフック
Nuxtはフックを使用してほぼすべての側面を拡張するための強力なフックシステムを提供します。
このフックシステムは unjs/hookable によって動作しています。
Nuxtフック（ビルド時）
これらのフックは Nuxtモジュール とビルドコンテキストで利用可能です。
nuxt.config.ts 内で
nuxt.config.ts
export default defineNuxtConfig({
hooks: {
close: () => { }
}
})
Nuxtモジュール内で
import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
nuxt.hook('close', async () => { })
}
})
アプリフック（ランタイム）
アプリフックは主に Nuxtプラグイン によってレンダリングライフサイクルにフックするために使用されますが、Vueのコンポーザブルでも使用できます。
plugins/test.ts
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('page:start', () => {
/* ここにコードを記述 */
})
})
サーバーフック（ランタイム）
これらのフックは サーバープラグイン によってNitroのランタイム動作にフックするために利用可能です。
~/server/plugins/test.ts
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
console.log('render:html', html)
html.bodyAppend.push('<hr>カスタムプラグインによって追加されました')
})
nitroApp.hooks.hook('render:response', (response, { event }) => {
console.log('render:response', response)
})
})
追加のフック
イベントセクション でカスタムフックの作成について詳しく学ぶ。
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/guide/going-further/hooks