defineNuxtPlugin은 향상된 기능과 타입 안전성을 갖춘 Nuxt 플러그인을 생성하기 위한 헬퍼 함수입니다. 이 유틸리티는 다양한 플러그인 형식을 Nuxt의 플러그인 시스템 내에서 원활하게 작동하는 일관된 구조로 정규화합니다.

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

Type

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
  }
}

Parameters

plugin: 플러그인은 두 가지 방법으로 정의할 수 있습니다:

1. Function Plugin: NuxtApp 인스턴스를 받아들이고, NuxtApp 인스턴스에 헬퍼를 제공하려는 경우 provide 속성을 가진 객체를 포함할 수 있는 프라미스를 반환할 수 있는 함수입니다.
2. Object Plugin: 플러그인의 동작을 구성하기 위한 다양한 속성을 포함할 수 있는 객체로, name, enforce, dependsOn, order, parallel, setup, hooks, env 등이 있습니다.

Examples

Basic Usage

아래 예제는 글로벌 기능을 추가하는 간단한 플러그인을 보여줍니다:

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

Object Syntax Plugin

아래 예제는 고급 구성을 가진 객체 구문을 보여줍니다:

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!')
    }
  },
})