플러그인은 일반적으로 Vue에 앱 수준 기능을 추가하는 독립적인 코드입니다. Nuxt에서는 app/plugins/ 디렉터리에서 플러그인이 자동으로 가져와집니다. 하지만 모듈과 함께 플러그인을 제공해야 하는 경우, Nuxt Kit은 addPlugin 및 addPluginTemplate 메서드를 제공합니다. 이 유틸리티를 사용하면 플러그인 구성을 필요에 맞게 커스터마이즈할 수 있습니다.
addPluginNuxt 플러그인을 등록하고 플러그인 배열에 추가합니다.
import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
const { resolve } = createResolver(import.meta.url)
addPlugin({
src: resolve('runtime/plugin.js'),
mode: 'client',
})
},
})
function addPlugin (plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin
plugin: 플러그인 객체 또는 플러그인 경로를 담은 문자열입니다. 문자열이 제공되면, src가 해당 문자열 값으로 설정된 플러그인 객체로 변환됩니다.
플러그인 객체가 제공되는 경우, 다음 속성을 가져야 합니다:
| Property | Type | Required | Description |
|---|---|---|---|
src | string | true | 플러그인 파일의 경로입니다. |
mode | 'all' | 'server' | 'client' | false | 'all'로 설정하면 플러그인이 클라이언트와 서버 번들 모두에 포함됩니다. 'server'로 설정하면 플러그인은 서버 번들에만 포함됩니다. 'client'로 설정하면 플러그인은 클라이언트 번들에만 포함됩니다. 또한 src 옵션을 지정할 때 .client 및 .server 수식어를 사용하여 플러그인을 클라이언트 또는 서버 측에서만 사용하도록 할 수 있습니다. |
order | number | false | 플러그인의 순서입니다. 이를 통해 플러그인 순서를 더 세밀하게 제어할 수 있으며, 고급 사용자만 사용하는 것이 좋습니다. 숫자가 낮을수록 먼저 실행되며, 사용자 플러그인의 기본값은 0입니다. pre 플러그인(Nuxt 플러그인보다 먼저 실행되는 플러그인)의 경우 -20, post 플러그인(Nuxt 플러그인 이후에 실행되는 플러그인)의 경우 20 사이의 숫자로 order를 설정하는 것을 권장합니다. |
order 사용은 피하세요. 단순히 Nuxt 기본 플러그인 이후에 플러그인을 등록해야 한다면 append를 사용하세요.options: 다음 속성을 가진 선택적 객체입니다:
| Property | Type | Required | Description |
|---|---|---|---|
append | boolean | false | true이면 플러그인이 플러그인 배열의 끝에 추가됩니다. false이면 앞에 추가됩니다. 기본값은 false입니다. |
import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
const { resolve } = createResolver(import.meta.url)
addPlugin({
src: resolve('runtime/plugin.js'),
mode: 'client',
})
},
})
export default defineNuxtPlugin((nuxtApp) => {
const colorMode = useColorMode()
nuxtApp.hook('app:mounted', () => {
if (colorMode.preference !== 'dark') {
colorMode.preference = 'dark'
}
})
})
addPluginTemplate템플릿을 추가하고 Nuxt 플러그인으로 등록합니다. 이는 빌드 시점에 코드를 생성해야 하는 플러그인에 유용합니다.
import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (options) {
addPluginTemplate({
filename: 'module-plugin.mjs',
getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
name: 'module-plugin',
setup (nuxtApp) {
${options.log ? 'console.log("Plugin install")' : ''}
}
})`,
})
},
})
function addPluginTemplate (pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin
pluginOptions: 다음 속성을 가진 플러그인 템플릿 객체입니다:
| Property | Type | Required | Description |
|---|---|---|---|
src | string | false | 템플릿의 경로입니다. src가 제공되지 않는 경우, 대신 getContents가 제공되어야 합니다. |
filename | string | false | 템플릿의 파일 이름입니다. filename이 제공되지 않으면 src 경로에서 생성됩니다. 이 경우 src 옵션이 필수입니다. |
dst | string | false | 대상 파일의 경로입니다. dst가 제공되지 않으면 filename 경로와 Nuxt buildDir 옵션을 기반으로 생성됩니다. |
mode | 'all' | 'server' | 'client' | false | 'all'로 설정하면 플러그인이 클라이언트와 서버 번들 모두에 포함됩니다. 'server'로 설정하면 플러그인은 서버 번들에만 포함됩니다. 'client'로 설정하면 플러그인은 클라이언트 번들에만 포함됩니다. 또한 src 옵션을 지정할 때 .client 및 .server 수식어를 사용하여 플러그인을 클라이언트 또는 서버 측에서만 사용하도록 할 수 있습니다. |
options | Record<string, any> | false | 템플릿에 전달할 옵션입니다. |
getContents | (data: Record<string, any>) => string | Promise<string> | false | options 객체와 함께 호출되는 함수입니다. 문자열 또는 문자열로 resolve되는 프로미스를 반환해야 합니다. src가 제공된 경우 이 함수는 무시됩니다. |
write | boolean | false | true로 설정하면 템플릿이 대상 파일에 기록됩니다. 그렇지 않으면 템플릿은 가상 파일 시스템에서만 사용됩니다. |
order | number | false | 플러그인의 순서입니다. 이를 통해 플러그인 순서를 더 세밀하게 제어할 수 있으며, 고급 사용자만 사용하는 것이 좋습니다. 숫자가 낮을수록 먼저 실행되며, 사용자 플러그인의 기본값은 0입니다. pre 플러그인(Nuxt 플러그인보다 먼저 실행되는 플러그인)의 경우 -20, post 플러그인(Nuxt 플러그인 이후에 실행되는 플러그인)의 경우 20 사이의 숫자로 order를 설정하는 것을 권장합니다. |
getContents 사용을 우선적으로 고려하세요. 필요하지 않다면 order 설정은 피하세요.options: 다음 속성을 가진 선택적 객체입니다:
| Property | Type | Required | Description |
|---|---|---|---|
append | boolean | false | true이면 플러그인이 플러그인 배열의 끝에 추가됩니다. false이면 앞에 추가됩니다. 기본값은 false입니다. |
빌드 시점에 플러그인 코드를 동적으로 생성해야 할 때 addPluginTemplate을 사용하세요. 이를 통해 전달된 옵션에 따라 서로 다른 플러그인 내용을 생성할 수 있습니다. 예를 들어, Nuxt는 내부적으로 이 함수를 사용해 Vue 앱 설정을 생성합니다.
import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (_, nuxt) {
if (nuxt.options.vue.config && Object.values(nuxt.options.vue.config).some(v => v !== null && v !== undefined)) {
addPluginTemplate({
filename: 'vue-app-config.mjs',
write: true,
getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
name: 'nuxt:vue-app-config',
enforce: 'pre',
setup (nuxtApp) {
${Object.keys(nuxt.options.vue.config!)
.map(k => `nuxtApp.vueApp.config[${JSON.stringify(k)}] = ${JSON.stringify(nuxt.options.vue.config![k as 'idPrefix'])}`)
.join('\n')
}
}
})`,
})
}
},
})
이는 제공된 설정에 따라 서로 다른 플러그인 코드를 생성합니다.
export default defineNuxtConfig({
vue: {
config: {
idPrefix: 'nuxt',
},
},
})
import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
name: 'nuxt:vue-app-config',
enforce: 'pre',
setup (nuxtApp) {
nuxtApp.vueApp.config.idPrefix = 'nuxt'
},
})