Nuxt3でprimevueを使う

NuxtJS
この記事は約2分で読めます。

先月2022/11にNuxt3のstable版がリリースがされ、いよいよNuxt3を積極的に使っていける状況となりました🎉

今回はvue3にも対応しているprimevueというフレームワークを使ってデザインをしてみます。primevueですが、GitHubのスター数を見ると以下のようになってます。

2022/12/9時点

framework fork star ライセンス
primevue 598 3.1k MIT
vuetify 6.5k 36k MIT
daisyUI 647 16k MIT
bootstrap-vue 1.9k 14.1k MIT

他のUIフレームワークと比較してみました。よく知られているveutifyと比べるとスター数は決して多くはないのですが、primevueは用意されているコンポーネントが多く、個人的にお気に入りのUIフレームワークの1つです。

それでは、Nuxt3に導入して使ってみます。

インストール

primeflexというCSSライブラリも一緒にインストールします。

設定

プラグイン設定

vueプラグインとして設定します。

上記では、使用するコンポーネントをimportして、vueコンポーネントとして使えるように登録しています。また、コンポーネントが内部で参照しているメッセージ表示のために一部Locale設定が必要です。もしコンポーネントを使用してエラーになるようであれば、都度Localeを編集すれば良いと思います。

参考https://primefaces.org/primevue/locale

テーマ設定

デフォルトで使用できるテーマがいくつかあります。以下では、saba-blueというテーマを設定しています。テーマを変えたい場合は、nuxt.config.tsのcssセクションで該当するテーマのcssを指定すれば変更できます。

primevueのコンポーネントを使ってみます。

参考ソース:https://primefaces.org/primevue/divider

サンプルを表示すると、以下のような感じで表示されることを確認できます。

参考リンク

コメント

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