Vue３がリリースされてから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に下記のファイルを作成します。
※ 3.18.1用に更新しました。
export default {
"startsWith":"始まる",
"contains":"含む",
"notContains":"含まない",
"endsWith":"終わる",
"equals":"等しい",
"notEquals":"等しくない",
"noFilter":"フィルターなし",
"filter":"フィルター",
"lt":"未満",
"lte":"以下",
"gt":"超える",
"gte":"以上",
"dateIs":"等しい",
"dateIsNot":"等しくない",
"dateBefore":"指定日より過去",
"dateAfter":"指定日より未来",
"custom":"カスタム",
"clear":"クリア",
"apply":"適用",
"matchAll":"全て一致",
"matchAny":"いずれかが一致",
"addRule":"条件追加",
"removeRule":"条件削除",
"accept": "はい",
"reject": "いいえ",
"choose":"選択",
"upload":"アップロード",
"cancel":"キャンセル",
"close":"閉じる",
"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":"今日",
"weekHeader":"週",
"firstDayOfWeek":0,
"dateFormat":"yy/mm/dd",
"weak":"弱い",
"medium":"普通",
"strong":"強い",
"passwordPrompt":"パスワードを入力",
"emptyFilterMessage":"オプションなし",
"emptyMessage":"結果なし",
"aria": {
"trueLabel": "True",
"falseLabel": "False",
"nullLabel": "未選択",
"pageLabel": "ページ",
"firstPageLabel": "最初のページ",
"lastPageLabel": "最後のページ",
"nextPageLabel": "次のページ",
"previousPageLabel": "前のページ",
"selectLabel": "選択",
"unselectLabel": "選択解除",
"expandLabel": "展開する",
"collapseLabel": "閉じる"
}
}
次に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" />
その他のコンポーネント
今回は２つのコンポーネントだけを紹介しましたが、PrimeVueには他にもたくさんのコンポーネントが用意されています。公式サイトにショーケースがありますので、興味がある方はそちらを確認してみてください。
ショーケース https://primefaces.org/primevue/showcase/#/
まとめ
PrimeVueはVue3にもいち早く対応するなど活発に更新されており、非常に使いやすいライブラリだと思います。お仕事でもお世話になっているライブラリなので、これからも更新を見守っていきたいと思います。
最後までお読みいただき、ありがとうございました。
コメント
お世話になります。
本ページ公開が昨年時点であるからだと思いますが、現在本ページのコードでロケール設定出来ませんでした。
main.tsでの指定方法が変更されたのでしょうか。
PrimeVueのホームページも確認しましたが、ロケールオブジェクト指定方法は記載されていませんでした。
main.tsに直接ロケール設定でも正しく処理されませんでした。(フィルター等 UIが表示されなくなる。)
const app = createApp(App)
app.use(PrimeVue, {
locale: {
accept: ‘Aceptar’,
reject: ‘Rechazar’
}
})
理想は、本ページのようにファイルでロケール設定したいと考えております。
ご教示宜しくお願い致します。
書き込みありがとうございます。書き込みの通知が迷惑メール扱いになっており、返信が遅くなり申し訳ございません。
辞書情報がだいぶ更新されていますね。
最新の辞書情報を作成するようにいたします。
ちなみにこちらが公式の日本語翻訳なのですが、私がpushしたものになります。
こちらを更新しておきますので、そちらをお使いくださいませ。