nuxt logo

문서 번역(비공식)

플러그인

Nuxt는 Vue 애플리케이션 생성 시 Vue 플러그인 등을 사용할 수 있는 플러그인 시스템을 제공합니다.

Nuxt는 plugins/ 디렉토리의 파일을 자동으로 읽고 Vue 애플리케이션 생성 시 로드합니다.

모든 플러그인은 자동으로 등록되므로, nuxt.config에 별도로 추가할 필요가 없습니다.

파일 이름에 .server 또는 .client 접미사를 사용하여 서버 또는 클라이언트 측에서만 플러그인을 로드할 수 있습니다.

등록된 플러그인

디렉토리의 최상위 레벨 파일(또는 하위 디렉토리 내의 인덱스 파일)만 플러그인으로 자동 등록됩니다.

디렉토리 구조
-| plugins/
---| foo.ts      // 스캔됨
---| bar/
-----| baz.ts    // 스캔되지 않음
-----| foz.vue   // 스캔되지 않음
-----| index.ts  // 현재 스캔되지만 사용 중단 예정

foo.tsbar/index.ts만 등록됩니다.

하위 디렉토리에 플러그인을 추가하려면 nuxt.config.tsplugins 옵션을 사용할 수 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    '~/plugins/bar/baz',
    '~/plugins/bar/foz'
  ]
})

플러그인 생성

플러그인에 전달되는 유일한 인수는 nuxtApp입니다.

plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
  // nuxtApp을 사용하여 작업 수행
})

객체 구문 플러그인

더 고급 사용 사례를 위해 객체 구문을 사용하여 플러그인을 정의할 수도 있습니다. 예를 들어:

plugins/hello.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // 또는 'post'
  async setup (nuxtApp) {
    // 일반 함수형 플러그인과 동일
  },
  hooks: {
    // 여기에서 Nuxt 앱 런타임 훅을 직접 등록할 수 있습니다
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // 훅에서 작업 수행
    }
  },
  env: {
    // 서버 전용 또는 아일랜드 컴포넌트를 렌더링할 때 플러그인을 실행하지 않으려면 이 값을 `false`로 설정하세요.
    islands: true
  }
})

객체 구문을 사용하는 경우, 속성은 더 최적화된 빌드를 생성하기 위해 정적으로 분석됩니다. 따라서 런타임에 정의하지 않아야 합니다. :br 예를 들어, enforce: import.meta.server ? 'pre' : 'post'를 설정하면 Nuxt가 플러그인에 대해 수행할 수 있는 미래의 최적화를 방해할 수 있습니다. Nuxt는 객체 구문을 사용할 때 모든 훅 리스너를 정적으로 미리 로드하여 플러그인 등록 순서를 걱정하지 않고 훅을 정의할 수 있게 합니다.

등록 순서

파일 이름에 '알파벳' 번호를 접두사로 붙여 플러그인의 등록 순서를 제어할 수 있습니다.

디렉토리 구조
plugins/
 | - 01.myPlugin.ts
 | - 02.myOtherPlugin.ts

이 예에서는 02.myOtherPlugin.ts01.myPlugin.ts에 의해 주입된 모든 것에 접근할 수 있습니다.

이는 다른 플러그인에 의존하는 플러그인이 있는 상황에서 유용합니다.

'알파벳' 번호 매기기가 처음인 경우, 파일 이름은 숫자 값이 아닌 문자열로 정렬된다는 것을 기억하세요. 예를 들어, 10.myPlugin.ts2.myOtherPlugin.ts보다 먼저 옵니다. 이 때문에 예제에서는 한 자리 숫자에 0을 접두사로 붙입니다.

로딩 전략

병렬 플러그인

기본적으로 Nuxt는 플러그인을 순차적으로 로드합니다. 플러그인을 parallel로 정의하면 Nuxt는 다음 플러그인을 로드하기 전에 플러그인의 실행이 끝날 때까지 기다리지 않습니다.

plugins/my-plugin.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
  async setup (nuxtApp) {
    // 다음 플러그인은 즉시 실행됩니다
  }
})

종속성이 있는 플러그인

플러그인이 실행되기 전에 다른 플러그인을 기다려야 하는 경우, dependsOn 배열에 플러그인의 이름을 추가할 수 있습니다.

plugins/depending-on-my-plugin.ts
export default defineNuxtPlugin({
  name: 'depends-on-my-plugin',
  dependsOn: ['my-plugin'],
  async setup (nuxtApp) {
    // 이 플러그인은 `my-plugin`의 실행이 끝날 때까지 기다렸다가 실행됩니다
  }
})

컴포저블 사용

Nuxt 플러그인 내에서 컴포저블유틸리티를 사용할 수 있습니다:

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  const foo = useFoo()
})

그러나 몇 가지 제한 사항과 차이점이 있다는 점을 염두에 두세요:

컴포저블이 나중에 등록된 다른 플러그인에 의존하는 경우 작동하지 않을 수 있습니다. :br

플러그인은 순차적으로 호출되며 다른 모든 것보다 먼저 호출됩니다. 아직 호출되지 않은 다른 플러그인에 의존하는 컴포저블을 사용할 수 있습니다.

컴포저블이 Vue.js 라이프사이클에 의존하는 경우 작동하지 않습니다. :br

일반적으로 Vue.js 컴포저블은 현재 컴포넌트 인스턴스에 바인딩되지만 플러그인은 nuxtApp 인스턴스에만 바인딩됩니다.

헬퍼 제공

NuxtApp 인스턴스에서 헬퍼를 제공하려면 플러그인에서 provide 키 아래에 반환하세요.