Vue3 프로젝트에 PrimeVue 적용하기.(Bootstrap-vue, Bootstrap-vue-3 ,Bootstrap-vue-next 대체)

 

처음에는 JS를 사용하거나 할 때 쉽게 쓰던 부트스트랩5를 사용하거나 하려고 했었다.
그러나 Vue에서 사용하거나 할 때에는 컴포넌트로 제공되는 경우 매우 간편하게 사용 할 수 있고 JS에서 직접적으로 데이터를 조작하거나 html을 그리거나 하는 부분들이 적어서 별로인듯 했다.

물론 BootstrapVueNext 라던지 Vue3를 기반으로 컴포넌트를 제공하는게 있었지만.... 아래와 같은 절차로 너무 힘들었다.

적용방법 정리...

1. 그냥 JS 형태로 부트스트랩5 설치
   개발자가 모든걸 짜야함. 번거로움
2. bootstrap-vue
   Vue2, bootstrap4를 지원하는 bootstrapVue이지만 Vue3에서는 안됨.
3. bootstrap-vue-3
   
   deprecated될 예정이고 공식홈페이지로 보여지는 해당 컴포넌트들은 바로 위 2번 Vue2, bootstrap4에서만 지원하는 컴포넌트도 같이 보여지고 있어서 문서를 볼 때 혼동이 올 수 있음.

BootstrapVue

BootstrapVue

4. bootstrap-vue-next그나마 공식홈페이지에서 보여지는게 좀 있고 몇몇 컴포넌트들은 아직 작성안된것도 보인다.공식문서

Bootstrap-vue를 사용하고자 한다면 선택지가..없음
베타 버전인것 같지만…Vue3에서 사용 할 수 있는 선택지가 많이 없다..

BootstrapVueNext

BootstrapVueNext

3버전은 몇몇 컴포넌트가 사라졌기도 했고 범위가 많은 부트스트랩 4버전 기반으로 다운받아 적용 하려고했으나 해당버전은 Vue2만지원한다… 적용이 불가능함.

하지만 위 버전도 알파버전에 가깝다고 한다ㅠ 깃허브나 해당 프로젝트를 수행하는 곳에 보면 실질적인 업무에 사용하는건 권장하지 않았다.

NOT PRODUCTION READY

This project is still in alpha version. There is a lot of work to do and the documentation may be out of date, if you want to contribute you can use it and submit an issue or even better, a pull request 😄

 

 

 

결국 좀 잘만든것 같은 PrimeVue를 기반으로 프로젝트를 새로 세팅했다.

 

PrimeVue 의 경우 기본 MIT라이센스를 가지고 있다.

기본 홈페이지

PrimeVue | Vue UI Component Library

PrimeVue | Vue UI Component Library

깃허브

https://github.com/primefaces/primevue

GitHub - primefaces/primevue: Next Generation Vue UI Component Library

 

실질적인 설치에 대한 절차는 Primevue에서 자세하게 설명해주고 있다.

설치

npm install primevue
npm install primeicons

적용모습

import PrimeVue from 'primevue/config';
import "primevue/resources/themes/saga-blue/theme.css"; //theme
import "primevue/resources/primevue.min.css"; //core CSS
import "primeicons/primeicons.css"; //icons

createApp(App)
    .use(router
    .use(PrimeVue)
    .mount('#app');

 

적용 참고주소

How To Use PrimeVue With Vue3

How To Use PrimeVue With Vue3

 

 

상세한 모습을 보고 적용할지 말지를 선택하면 될 것 같다.

여기에서 제공하는 테마들의 경우 PrimeVue의 기본 템플릿이고 기타 다른사람들이 만든 템플릿도 무료로 많이는 아니지만 여러개가 있었다. 이번 프로젝트의 경우 그 중 Sakai Vue 템플릿을 적용하였다.

https://primevue.org/templates/

PrimeVue | Vue UI Component Library