[ Nuxt ] primevue UI 라이브러리 적용하기 | preset 사용

primevue는 vue에서 많이 쓰이는 UI 라이브러리이고, 문서가 깔끔하게 잘 되어있다는 장점이 있다. 

특히나 pass through를 이용해 css 커스텀을 쉽게 할 수 있는 것도 굉장히 편리하다.

 

primevue 설치

npm install primevue
npm install --save-dev @primevue/nuxt-module

// styled
npm install @primevue/themes

 

nuxt.config.ts 파일에 모듈 등록

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        /* Configuration */
    }
})

 

 

---

 

기본 테마 쉽게 사용하는 방법

import Aura from "@primevue/themes/aura";

export default defineNuxtConfig({
  modules: [
    '@primevue/nuxt-module'
  ],
  primevue: {
    options: {
       theme: {
         preset: Aura,
       },
    },
  }
})

 

 

---

preset 사용하는 방법

preset을 사용하면 공통적인 컴포넌트 스타일 커스터마이징이 수월하다는 장점이 있다. 

 

1. preset 다운로드

Releases · primefaces/primevue-tailwind

 

 

2. 프로젝트에 넣기

./presets/aura

 

3. Config

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: {
            unstyled: true
        },
        importPT: { as: 'Aura', from: '~/presets/aura' }     //import and apply preset
    }
})

 

 

4.Tailwind Config

npm i tailwindcss-primeui

import primeuiPlugin from "tailwindcss-primeui";

export default {
  // ...
  content: [
    "./presets/**/*.{js,vue,ts}",
    // other paths
  ],
  plugins: [primeuiPlugin],
};

 

 

5. style

./assets/css/primevue.css

Tailwind CSS based Vue UI Component Library

 

6. icons

npm install primeicons

export default defineNuxtConfig({
  // ...
  css: ["primeicons/primeicons.css"],
});

import할 필요는 없음