defineNuxtPlugin

ソース
defineNuxtPlugin() は Nuxt プラグインを作成するためのヘルパー関数です。

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

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
})
詳細は、Docs > 4 X > Guide > Directory Structure > App > Plugins#creating Plugins をお読みください。

タイプ

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

type Plugin<T> = (nuxt: NuxtApp) => 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>
  env?: {
    islands?: boolean
  }
}

パラメーター

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

  1. 関数プラグイン: NuxtApp インスタンスを受け取り、NuxtApp インスタンス上でヘルパーを提供したい場合は、provide プロパティを持つ可能性のあるオブジェクトを返すプロミスを返す関数です。
  2. オブジェクトプラグイン: プラグインの動作を設定するためのさまざまなプロパティを含めることができるオブジェクトです。これには、name、enforce、dependsOn、order、parallel、setup、hooks、および env などがあります。
プロパティタイプ必須説明
name文字列falseプラグインのオプション名。デバッグや依存関係の管理に役立ちます。
enforce'pre' | 'default' | 'post'false他のプラグインとの相対的なプラグインの実行タイミングを制御します。
dependsOnstring[]falseこのプラグインが依存するプラグイン名の配列。適切な実行順序を保証します。
ordernumberfalseこれにより、プラグインの順序をより詳細に制御できますが、上級ユーザーのみが使用すべきです。これは enforce の値を上書きし、プラグインのソートに使用されます。
parallelブール値false他の並列プラグインと並行してプラグインを実行するかどうか。
setupPlugin<T>falseメインのプラグイン関数。関数プラグインに相当します。
hooksPartial<RuntimeNuxtHooks>falseNuxt アプリのランタイムフックを直接登録します。
env{ islands?: boolean }falseサーバー専用コンポーネントまたはアイランドコンポーネントをレンダリングするときにプラグインを実行したくない場合は、この値を false に設定します。

例

基本的な使い方

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

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Add a global method
  return {
    provide: {
      hello: (name: string) => `Hello ${name}!`,
    },
  }
})

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

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

plugins/advanced.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre',
  async setup (nuxtApp) {
    // Plugin setup logic
    const data = await $fetch('/api/config')

    return {
      provide: {
        config: data,
      },
    }
  },
  hooks: {
    'app:created' () {
      console.log('App created!')
    },
  },
})