defineNuxtPlugin は、機能強化と型安全性を備えた Nuxt プラグインを作成するためのヘルパー関数です。このユーティリティは、異なるプラグイン形式を Nuxt のプラグインシステム内でシームレスに動作する一貫した構造に正規化します。

export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
})

型

defineNuxtPlugin<T extends Record<string, unknown>>(plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>

type Plugin<T> = (nuxt: [NuxtApp](/docs/guide/going-further/internals#the-nuxtapp-interface)) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }

interface ObjectPlugin<T> {
  name?: string
  enforce?: 'pre' | 'default' | 'post'
  dependsOn?: string[]
  order?: number
  parallel?: boolean
  setup?: Plugin<T>
  hooks?: Partial<[RuntimeNuxtHooks](/docs/api/advanced/hooks#app-hooks-runtime)>
  env?: {
    islands?: boolean
  }
}

パラメータ

plugin: プラグインは次の2つの方法で定義できます:

1. 関数プラグイン: NuxtApp インスタンスを受け取り、NuxtApp インスタンス上でヘルパーを提供したい場合に provide プロパティを持つ可能性のあるオブジェクトを含むプロミスを返すことができる関数。
2. オブジェクトプラグイン: プラグインの動作を設定するための name、enforce、dependsOn、order、parallel、setup、hooks、env などのさまざまなプロパティを含むことができるオブジェクト。

例

基本的な使用法

以下の例は、グローバルな機能を追加するシンプルなプラグインを示しています:

export default defineNuxtPlugin((nuxtApp) => {
  // グローバルメソッドを追加
  return {
    provide: {
      hello: (name: string) => `Hello ${name}!`
    }
  }
})

オブジェクト構文プラグイン

以下の例は、高度な設定を持つオブジェクト構文を示しています:

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre',
  async setup (nuxtApp) {
    // プラグインのセットアップロジック
    const data = await $fetch('/api/config')
    
    return {
      provide: {
        config: data
      }
    }
  },
  hooks: {
    'app:created'() {
      console.log('App created!')
    }
  },
})