플러그인은 일반적으로 Vue에 앱 수준의 기능을 추가하는 독립적인 코드입니다. Nuxt에서는 plugins/ 디렉토리에서 플러그인이 자동으로 가져옵니다. 그러나 모듈과 함께 플러그인을 제공해야 하는 경우, Nuxt Kit은 addPlugin과 addPluginTemplate 메서드를 제공합니다. 이 유틸리티는 플러그인 구성을 사용자 요구에 맞게 커스터마이즈할 수 있도록 합니다.

addPlugin

Nuxt 플러그인을 등록하고 플러그인 배열에 추가합니다.

사용법

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로 설정한 플러그인 객체로 변환됩니다.

플러그인 객체가 제공되면, 다음 속성을 가져야 합니다:

options: 다음 속성을 가진 선택적 객체:

예제

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

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: 다음 속성을 가진 플러그인 템플릿 객체:

options: 다음 속성을 가진 선택적 객체:

예제

다양한 옵션으로 플러그인 템플릿 생성

빌드 시 동적으로 플러그인 코드를 생성해야 할 때 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')
    }
  }
})`,
      })
    }
  },
})

이는 제공된 구성에 따라 다른 플러그인 코드를 생성합니다.

::code-group

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

::

EJS 템플릿을 사용하여 플러그인 생성

EJS 템플릿을 사용하여 플러그인을 생성할 수도 있습니다. 옵션은 options 속성을 통해 전달되고, EJS 템플릿 내에서 플러그인 내용을 생성하는 데 사용됩니다.

import { addPluginTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    addPluginTemplate({
      src: resolve('templates/plugin.ejs'),
      filename: 'plugin.mjs',
      options: {
        ssr: nuxt.options.ssr,
      },
    })
  },
})