플러그인
Nuxt는 Vue 애플리케이션 생성 시 Vue 플러그인 등을 사용할 수 있는 플러그인 시스템을 제공합니다.
Nuxt는 plugins/
디렉토리의 파일을 자동으로 읽고 Vue 애플리케이션 생성 시 로드합니다.
모든 플러그인은 자동으로 등록되므로, nuxt.config
에 별도로 추가할 필요가 없습니다.
파일 이름에 .server
또는 .client
접미사를 사용하여 서버 또는 클라이언트 측에서만 플러그인을 로드할 수 있습니다.
등록된 플러그인
디렉토리의 최상위 레벨 파일(또는 하위 디렉토리 내의 인덱스 파일)만 플러그인으로 자동 등록됩니다.
-| plugins/
---| foo.ts // 스캔됨
---| bar/
-----| baz.ts // 스캔되지 않음
-----| foz.vue // 스캔되지 않음
-----| index.ts // 현재 스캔되지만 사용 중단 예정
foo.ts
와 bar/index.ts
만 등록됩니다.
하위 디렉토리에 플러그인을 추가하려면 nuxt.config.ts
의 plugins
옵션을 사용할 수 있습니다:
export default defineNuxtConfig({
plugins: [
'~/plugins/bar/baz',
'~/plugins/bar/foz'
]
})
플러그인 생성
플러그인에 전달되는 유일한 인수는 nuxtApp
입니다.
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
}
})
객체 구문을 사용하는 경우, 속성은 더 최적화된 빌드를 생성하기 위해 정적으로 분석됩니다. 따라서 런타임에 정의하지 않아야 합니다. :br
예를 들어, enforce: import.meta.server ? 'pre' : 'post'
를 설정하면 Nuxt가 플러그인에 대해 수행할 수 있는 미래의 최적화를 방해할 수 있습니다.
Nuxt는 객체 구문을 사용할 때 모든 훅 리스너를 정적으로 미리 로드하여 플러그인 등록 순서를 걱정하지 않고 훅을 정의할 수 있게 합니다.
등록 순서
파일 이름에 '알파벳' 번호를 접두사로 붙여 플러그인의 등록 순서를 제어할 수 있습니다.
plugins/
| - 01.myPlugin.ts
| - 02.myOtherPlugin.ts
이 예에서는 02.myOtherPlugin.ts
가 01.myPlugin.ts
에 의해 주입된 모든 것에 접근할 수 있습니다.
이는 다른 플러그인에 의존하는 플러그인이 있는 상황에서 유용합니다.
'알파벳' 번호 매기기가 처음인 경우, 파일 이름은 숫자 값이 아닌 문자열로 정렬된다는 것을 기억하세요. 예를 들어, 10.myPlugin.ts
는 2.myOtherPlugin.ts
보다 먼저 옵니다. 이 때문에 예제에서는 한 자리 숫자에 0
을 접두사로 붙입니다.
로딩 전략
병렬 플러그인
기본적으로 Nuxt는 플러그인을 순차적으로 로드합니다. 플러그인을 parallel
로 정의하면 Nuxt는 다음 플러그인을 로드하기 전에 플러그인의 실행이 끝날 때까지 기다리지 않습니다.
export default defineNuxtPlugin({
name: 'my-plugin',
parallel: true,
async setup (nuxtApp) {
// 다음 플러그인은 즉시 실행됩니다
}
})
종속성이 있는 플러그인
플러그인이 실행되기 전에 다른 플러그인을 기다려야 하는 경우, dependsOn
배열에 플러그인의 이름을 추가할 수 있습니다.
export default defineNuxtPlugin({
name: 'depends-on-my-plugin',
dependsOn: ['my-plugin'],
async setup (nuxtApp) {
// 이 플러그인은 `my-plugin`의 실행이 끝날 때까지 기다렸다가 실행됩니다
}
})
컴포저블 사용
Nuxt 플러그인 내에서 컴포저블 및 유틸리티를 사용할 수 있습니다:
export default defineNuxtPlugin((nuxtApp) => {
const foo = useFoo()
})
그러나 몇 가지 제한 사항과 차이점이 있다는 점을 염두에 두세요:
컴포저블이 나중에 등록된 다른 플러그인에 의존하는 경우 작동하지 않을 수 있습니다. :br
플러그인은 순차적으로 호출되며 다른 모든 것보다 먼저 호출됩니다. 아직 호출되지 않은 다른 플러그인에 의존하는 컴포저블을 사용할 수 있습니다.
컴포저블이 Vue.js 라이프사이클에 의존하는 경우 작동하지 않습니다. :br
일반적으로 Vue.js 컴포저블은 현재 컴포넌트 인스턴스에 바인딩되지만 플러그인은 nuxtApp
인스턴스에만 바인딩됩니다.
헬퍼 제공
NuxtApp
인스턴스에서 헬퍼를 제공하려면 플러그인에서 provide
키 아래에 반환하세요.
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/guide/directory-structure/plugins