最終更新日: 2023年08月15日

ライフサイクルフック

Nuxtは、ほぼすべての側面を拡張するための強力なフックシステムを提供しています。この機能は、unjs/hookableによって提供されています。

Nuxt フック(Build Time)

これらのフックは、Nuxtモジュールとビルドコンテキストで利用可能です。

nuxt.configの使用方法

nuxt.config
ts

export default defineNuxtConfig({
  hooks: {
    'close': () => { }
  }
})

Nuxt モジュールの使用方法

nuxt.config
ts

export default defineNuxtConfig({
  hooks: {
    'close': () => { }
  }
})

App フック(Runtime)

アプリフックは主に Nuxt プラグインによってレンダリングライフサイクルにフックするために使用されますが、Vue コンポーザブルでも使用できます。

Pluginsの使用方法

plugins/test.ts
ts

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

Nitro App フック(Runtime)

これらのフックは、Nitro プラグインがNitro のランタイム動作にフックするために使用できます。

Nitro プラグイン内での使用方法

~/server/plugins/test.ts
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)
  })
})

Info 利用可能なNitro ライフサイクルフックの詳細をご覧ください。

追加のフック

モジュールには、Nuxtが提供する型を拡張して追加のフックを追加することができます。これはモジュールにとって便利です。

import { HookResult } from "@nuxt/schema";

declare module '#app' {
  interface RuntimeNuxtHooks {
    'your-nuxt-runtime-hook': () => HookResult
  }
  interface NuxtHooks {
    'your-nuxt-hook': () => HookResult
  }
}

declare module 'nitropack' {
  interface NitroRuntimeHooks {
    'your-nitro-hook': () => void;
  }
}

ライフサイクル フック