Zenn
🔫

Vue3 で PRIME VUE を使ってみる

2021/05/30に公開
Vue.js
Vue 3
PrimeVue
tech

ABSTRACT

Vue3 でデザインコンポーネントを仕様したい。しかし、Vue3 に対応しているデザインコンポーネントはまだまだ少ない。
探してみた結果、 PRIME VUE が良さそうだったので使ってみた。

選んだ理由

  • Vue3 に対応していたから
  • デザインが可愛かったから(重要)

PRIME VUE の導入

公式サイト：https://primefaces.org/primevue/

Install

npm install primevue@^3.3.5 --save
npm install primeicons --save

Mosule loader

useで読み込む。

main.ts
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
createApp(App);
  .use(PrimeVue)

コンポーネントを読み込む

InputTextを利用したい時の例。
利用したいコンポーネントをひとつづつインポートして、componentで読み込む。

main.ts
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import InputText from 'primevue/inputtext'

createApp(App)
  .use(PrimeVue)
  .component('InputNumber', InputNumber)

利用してみた

スプラトゥーンのアプリ開発に使ってみた。

form画面

使用しているコンポーネント

  • InputNumber
  • InputText
  • CascadeSelect
  • Button
  • MultiSelect
  • Toast

可愛い。

Toast コンポーネント

使い方が少し特殊で、useで使う

main.ts
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import ToastService from 'primevue/toastservice'

createApp(App)
  .use(PrimeVue)
  .use(ToastService)

可愛い

ステージ情報

使用しているコンポーネント

  • Skeleton

Skeletonは読み込み時のアニメーションで使えるやつ。

( ロード中 )

( ロード完了 )

まとめ

Vue3 に対応しているコンポーネント。
使いやすい。
可愛い✌️

LTでも発表しました

https://speakerdeck.com/gamine/prime-vue-woshi-tutekasutamaizusitemita

Discussion