Vue3でPrimeVueを使ってみよう!

プログラミング

Vue3がリリースされてから1年近くが経過しますが、私がよく使っているUIライブラリであるVuetifyがまだまだVue3に対応しそうにありませんので、Vue3対応のUIライブラリであるPrimeVueを使ってみました。

PrimeVueとは

PrimeVueとはトルコのPrimeTek社が開発しているVue向けのUIライブラリです。オープンソース(MIT)として公開されています。
各種入力フォームや、ボタン、データテーブル、ツールバー、グラフなどアプリケーションを開発する際に使用する様々なコンポーネントが提供されています。また、レスポンシブ対応もされており、モバイル環境でも利用可能です。
TypeScriptにも完全対応しており、バージョン3.5からはIDE対応が強化されVScodeやWebstormなどでコード補完ができるようになりました。
PrimeVue以外にもAngular向けのPrimeNG、React向けのPrimeReact、JavaのJSFの実装であるPrimeFacesなどがあります。

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

私自身はJavaでのWebシステムの開発経験が非常に長いのですが、PrimeFacesは5年ほど前ぐらいまで非常にお世話になった製品でもあります。

あと個人的に非常に気になっているのですが、PrimeVueを始めとする製品のロゴがトランスフォーマーっぽいのですが何か関係があるのでしょうか。。。Optimus Prime??

環境

Vue CLIベースのアプリケーションをベースに説明していきます。

Vue: 3.2.6
TypeScript: 4.3.5
PrimeVue: 3.7.0

導入方法

ターミナルから下記コマンドを入力し、ライブラリをインストールします。
PrimeVueの本体の他にアイコン用のライブラリであるprimeiconsとbootstrapのようなグリッドシステムやflexboxなどを扱えるようにするためのprimeflexも合わせてインストールしています。

npm i primevue
npm i primeicons
npm i primeflex@2.0.0

次にmain.tsでPrimeVueをpluginとして読み込みます。

import { createApp } from "vue"
import PrimeVue from "primevue/config"
import App from "@/App.vue"

const app = createApp(App)

app.use(PrimeVue) // PrimeVueを適用
app.mount("#app")

続いてcssを読み込みます。

import { createApp } from "vue"
import PrimeVue from "primevue/config"
import InputText from "primevue/inputtext"
import App from "@/App.vue"

import "primevue/resources/themes/saga-blue/theme.css" // テーマ
import "primevue/resources/primevue.min.css" // ベース
import "primeicons/primeicons.css" // アイコン
import "primeflex/primeflex.css" // primeflex

テーマは上で書いたsaga-blue以外にも様々なテーマが用意されています。また、有料のテーマや画面パターンのテンプレートなども存在します。

日本語化

PrimeVueはデフォルトでは英語表示になっていますので、日本語で表示できるようにしてみましょう。
PrimeVueはpluginの適用時にロケールオブジェクトを渡すことで国際化できるようになっています。
残念ながら2021年9月時点では公式にロケールファイルを配布していませんので、手動でロケールオブジェクトを作成することで日本語化可能です。

src/i18n/localeに下記のファイルを作成します。

export default {
    accept: "はい",
    reject: "いいえ",
    choose: "選択",
    upload: "アップロード",
    cancel: "キャンセル",
    dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
    dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
    dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    today: "今日",
    clear: "クリア",
    weekHeader: "週",
    firstDayOfWeek: 0,
    dateFormat: "yy/mm/dd",
    weak: "弱い",
    medium: "普通",
    strong: "強い",
    passwordPrompt: "パスワードを入力"
}

次にmain.tsを修正します。

import ja from "@/i18n/locale/ja" // ja.tsをインポート

const app = createApp(App)

app.use(PrimeVue, { locale: ja }) // localeにja.tsをセット

app.mount("#app")

ここまででPrimeVueのセットアップが終わりました!

コンポーネントの利用

それではコンポーネントを利用していきましょう。
コンポーネントの利用するには使用したいコンポーネントを明示的にインポートして登録する必要があります。

アプリケーション全体で使用する場合

main.tsでコンポーネント登録を行います。

import InputText from "primevue/inputtext" // 使用するコンポーネントをインポート

const app = createApp(App)

app.use(PrimeVue, { locale: ja })

app.component("InputText", InputText) // コンポーネントを登録

app.mount("#app")
個別に使用する場合
<script lang="ts">
import { defineComponent } from "vue"
import InputText from "primevue/inputtext" // 使用するコンポーネントをインポート

export default defineComponent({
    components: { InputText },  // コンポーネントを登録
})
</script>
<template>
    <InputText />
</template>

カレンダー : Calendar

日付入力用のコンポーネントです。カレンダーを使った入力が可能です。

import Calendar from "primevue/calendar"
<Calendar v-model="value"/>

値にはDate型の変数を指定します。
日付のフォーマットの指定やカレンダーの表示内容のカスタマイズなどのプロパティが用意されています。

ちょっと残念なのが、カレンダーの年月表示の部分が英語表記の月年の表示にハードコードされていることです。本来であれば2021年9月みたいな感じで表示したいのですが・・・

ボタン : Button

ボタンを表示します。アイコンを表示したり、サイズやスタイルを変更するためのプロパティが用意されています。

import Button from "primevue/button"
<Button label="Hello" />

<!-- イベント -->
<Button label="CLICK ME!" @click="onClickMe" />

<!-- アイコン表示 -->
<Button label="OK" icon="pi pi-check" />

<!-- 重大度(カラー)-->
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Warning" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />

<!-- テキストボタン -->
<Button label="テキスト" class="p-button-text" />

<!-- サイズ -->
<Button label="小" class="p-button-sm"  />
<Button label="中" class="p-button"  />
<Button label="大" class="p-button-lg" />

その他のコンポーネント

今回は2つのコンポーネントだけを紹介しましたが、PrimeVueには他にもたくさんのコンポーネントが用意されています。公式サイトにショーケースがありますので、興味がある方はそちらを確認してみてください。

ショーケース https://primefaces.org/primevue/showcase/#/

まとめ

PrimeVueはVue3にもいち早く対応するなど活発に更新されており、非常に使いやすいライブラリだと思います。お仕事でもお世話になっているライブラリなので、これからも更新を見守っていきたいと思います。

最後までお読みいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました