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

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

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

npm install @rollup/plugin-yaml

yarn add @rollup/plugin-yaml

pnpm add @rollup/plugin-yaml

bun add @rollup/plugin-yaml

다음으로, 이를 가져와서 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!"

<script setup>
import config from '~/data/hello.yaml'
</script>

<template>
  <h1>{{ config.greeting }}</h1>
</template>