Nuxt에서 Vite 플러그인 사용하기

Nuxt 프로젝트에 Vite 플러그인을 통합하는 방법을 알아보세요.

Nuxt 모듈은 광범위한 기능을 제공하지만, 때로는 특정 Vite 플러그인이 더 직접적으로 요구 사항을 충족할 수 있습니다.

먼저 Vite 플러그인을 설치해야 합니다. 예시로 @rollup/plugin-yaml을 사용해 보겠습니다:

npm install @rollup/plugin-yaml

다음으로, 이를 가져와서 nuxt.config.ts 파일에 추가해야 합니다:

nuxt.config.ts
import yaml from '@rollup/plugin-yaml'

export default defineNuxtConfig({
  vite: {
    plugins: [
      yaml(),
    ],
  },
})

이제 Vite 플러그인을 설치하고 구성했으므로, 프로젝트에서 YAML 파일을 직접 사용할 수 있습니다.

예를 들어, 설정 데이터를 저장하는 config.yaml 파일을 만들고 이 데이터를 Nuxt 컴포넌트에서 가져올 수 있습니다:

greeting: "Hello, Nuxt with Vite!"

Nuxt 모듈에서 Vite 플러그인 사용하기

Nuxt 모듈을 개발 중이고 Vite 플러그인을 추가해야 한다면, addVitePlugin 유틸리티를 사용해야 합니다:

modules/my-module.ts
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import yaml from '@rollup/plugin-yaml'

export default defineNuxtModule({
  setup () {
    addVitePlugin(yaml())
  },
})

Nuxt 5+에서 환경별 플러그인을 사용하려면 applyToEnvironment() 메서드를 사용하세요:

modules/my-module.ts
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      // 플러그인 설정
    }))
  },
})
해결된 Vite 설정에 접근해야 하는 코드를 작성하는 경우, Nuxt의 vite:extend, vite:extendConfig, vite:configResolved를 사용하는 대신 Vite 플러그인 내부에서config 및 configResolved 훅을 사용해야 합니다.
Nuxt Kit 문서에서 addVitePlugin에 대해 더 읽어보세요.