Nuxtにおける四つのライフサイクルフックの比較

Nuxtには、アプリケーションの異なる段階で実行されるライフサイクルフックがいくつかあります。今回は、ライフサイクルの違いと使い方を理解の限りで説明してみます。あくまでも備忘録ですね。

1. App Hooks (ランタイム)

アプリケーションの状態管理に適している。プラグインで使用可能。

種類

例

// plugins/test.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => {
    /* your code goes here */
  })
})

2. Nuxt Hooks (ビルド時)

Nuxtの設定や拡張に使用されます。Nuxtモジュールやnuxt.config.jsで使用可能。
アプリケーションの構造やビルドプロセスのカスタマイズに適している。

種類

例

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    close: () => { }
  }
})

// Within Nuxt Modules
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  }
})

3. Nitro App Hooks (ランタイム、サーバーサイド)

NitroはNuxtのサーバーサイドフレームワークです。このフックはサーバー起動時に1回だけ実行されます。requestとresponseのライフサイクルに介入可能、サーバーサイドのエラーハンドリングにも適している。

種類

例

// ~/server/plugins/test.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    console.log('render:html', html)
    html.bodyAppend.push('<hr>Appended by custom plugin')
  })

  nitroApp.hooks.hook('render:response', (response, { event }) => {
    console.log('render:response', response)
  })
})

４. Vue Lifecycle Hooks (クライアントサイド)

Vueコンポーネントに関連するフックです。Vueインスタンスの生成、更新、破棄の各段階で実行されます。

種類

例

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>

まとめ

build時コンテキスト

• Nuxt Hooks
  • 使用場所: Nuxt Config, Nuxt Modules
  • 特徴: Nuxtアプリの起動時に1回、順番に呼び出される

runtimeコンテキスト

• Nitro Hooks

  • 使用場所: Nitro Plugins
  • 特徴: サーバー起動時に1回実行される

• (Nuxt) App Hooks

  • 使用場所: Nuxt Plugins, Vue Composable
  • 特徴: Vueアプリの作成時にサーバーとクライアントの両方で呼び出される

• Vue Lifecycle Hooks

  • 使用場所: Vue Components, Vue Composables
  • 特徴: クライアントサイドでのみ呼び出される

コンテキスト	フック	使用場所	特徴
build時	Nuxt Hooks	Nuxt Config, Nuxt Modules	Nuxtアプリの起動時に1回、 順番に呼び出される
runtime	Nitro Hooks	Nitro Plugins	サーバー起動時に1回実行される
runtime	(Nuxt) App Hooks	Nuxt Plugins, Vue Composable	Vueアプリの作成時に サーバーとクライアントの 両方で呼び出される
runtime	Vue Lifecycle Hooks	Vue Components, Vue Composables	クライアントサイドでのみ呼び出される

参照リンク

https://nuxt.com/docs/guide/going-further/hooks
https://blog.nuxtdojo.com/p/2-understanding-lifecycle-hooks-in
https://qiita.com/Yuto_Tatsumi/items/177e41b2de15869b8952