nuxt logo

문서 번역(비공식)

Nuxt.js
Version:v3.17

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!"