plugins

Nuxt에는 Vue 플러그인 및 기타 기능을 Vue 애플리케이션 생성 시에 사용할 수 있는 플러그인 시스템이 있습니다.

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

<aside> ❗ plugins/ 디렉토리 내의 모든 플러그인은 자동으로 등록되며, 별도로 nuxt.config에 추가할 필요가 없습니다.

</aside>

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

</aside>

등록된 플러그인

해당 디렉토리의 최상위 레벨에 있는 파일 또는 하위 디렉토리 내의 index 파일만 자동으로 플러그인으로 등록됩니다.

-| plugins/
---| foo.ts      // 스캔 대상인 플러그인
---| bar/
-----| baz.ts    // 스캔되지 않는 플러그인
-----| foz.vue   // 스캔되지 않는 Vue 파일
-----| index.ts  // 현재는 스캔되고 있지만, 사용이 권장되지 않는(deprecated) 상태인 플러그인입니다.

foo.ts와 bar/index.ts만이 등록됩니다.

서브 디렉토리에 있는 플러그인을 추가하려면 nuxt.config.ts에서 plugins 옵션을 사용할 수 있습니다.

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

플러그인 만들기

// plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
	// nuxtApp으로 어떤 작업을 할 수 있습니다.
})

객체 구문 플러그인

고급 사용 사례를 위해 객체 구문을 사용하여 플러그인을 정의하는 것도 가능합니다. 예를 들어:

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