Vue.jsで利用できるUIライブラリを知る

Transcript

1. Vue.jsで利用できるUIライブラリを知 る
2. 自己紹介 石見（いわみ）琉弥です やってること：TypeScriptとかVue.jsとかC#とかJavaとか 久しぶりの勉強会参加です
3. 目次 1. Vue.jsで利用できるUIライブラリを知る 2. 自己紹介 3. 目次 4. 今回の資料について 5. 超人気のUIライブラリ in 2026-06 6. 今回はテーブルコンポーネントを見ていきます 1. Vuetify v4 2. Nuxt UI v4 3. PrimeVue v4 4. Quasar v2 7. まとめ
4. 今回の資料について Vue 3単体で利用できるUIコンポーネントライブラリを知る こういうのもありますよ、程度に 浅く広く理解する 今回見ていくライブラリの要件 無料かつライセンス的にも特別な制約が無く利用できること Vue.js単体で利用できること NG: Nuxtが必須、等 テーブルコンポーネントを有していること（後述）
5. 超人気のUIライブラリ in 2026-06 ライブラリ 特徴 ライセンス Star数 Vuetify Googleのマテリアルデザイン準拠 MIT 4.1万 Nuxt UI Reka UI＆Tailwind CSS＆125以上のUI MIT 6.6千 PrimeVue PrimeTek製の多機能UI MIT 1.4万 Quasar 公式ページがゲームっぽい色してる MIT 2.7万 ※GitHubのStar数は2026-06-14のもの。 沢山ある中から偏見だけで４種のみ厳選。
6. 今回はテーブルコンポーネントを見て いきます 理由 大抵のライブラリに実装されているから比較しやすい 複雑なコンポーネントの為、機能性で癖が出やすい 注：優劣を決めるものではありません。 レッツ・ゴー。
7. Vuetify v4 主な特徴 比較的機能としては標準的 ページネーション（ページ切り替え）に 対応 スクロール方式（仮想テーブル）も対応 ただし別コンポーネント扱い 標準で列ごとの並び替えやチェックボッ クでの行選択も可能 その他、テーブル内の部品をSlotで細か く置き換えることも可能 https://vuetifyjs.com/ja/components/data- tables/basics/
8. Nuxt UI v4 主な特徴 TanStack Tableというかなり多機能なコ ンポーネントをベースに構築されている Vuetifyのデータテーブルにある機能はお およそ利用可能 D&Dによる行入れ替え機能 行ホバーイベント 等。 https://ui.nuxt.com/docs/components/table 行ホバーイベントの利用例
9. PrimeVue v4 主な特徴 複数列のソート機能 列ごとのフィルター機能 列クリックでの選択機能 編集可能なセルの表示 行 or 列グループ機能 他ライブラリでは行のみ対応が多い D&Dの行入れ替え機能 Webアプリでよく使いそうな機能が沢山入 っていて嬉しい。 https://primevue.org/datatable/ 列フィルター機能 セル編集機能
10. Quasar v2 主な特徴 グリッド表示切り替え ポップアップでのセル編集機能 ※ポップアップ無しで編集することも 可能 上記以外にも標準的な機能は多数実装さ れている https://quasar.dev/vue-components/table グリッド表示機能 ポップアップでのセ ル編集
11. まとめ Vue.jsの多数あるUIコンポーネントから４種類について知ることが できた 個人的な感触として Vuetifyのテーブルは機能が少ない 最も小回りが効きそうなのはPrimeVue Quasarのグリッド表示機能はスマホ対応を考えると非常に魅力的 Powered by 余談：本スライドは