UIフレームワーク
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| Element | Element-Plus | |
| Vuetify | 3.x～ | |
| bootstrap-vue | △ 2.23.0～ |
Vue3 migration buildで動作する状態 |
| BootstrapVue 3 | 〇 | BootstrapVue から大きく影響を受けている |
| Quasar | 2.x～ | |
| Buefy | ntohq/buefy-next | |
| Oruga | 〇 |
ユーティリティ関数のライブラリ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| VueUse | 〇 | |
| vue-composable | 〇 | Vue2.7に対応してなさそう |
| vue-hooks | × | |
| vue-use-web | × |
管理画面
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| Geeker-Admin | 〇 | |
| Fantastic-admin | 〇 | |
| vue-element-admin | × |
入力チェック
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vuelidate | 〇 | Vue2と3に対応している |
| vee-validate | 4.x～ |
アイコン
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| @fortawesome/vue-fontawesome | 3.0～ |
表
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| ag-grid | 〇 | |
| DataTables component for Vue 3 | 〇 | |
| vue-good-table | × | vue-good-table-nextに移行 |
| vue-bootstrap4-table | × | 2020年以降修正無し |
| vue-tables-2 | × | 開発終了 |
グラフ描画
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-echarts | 6.0.0～ | Vue2と3に対応している |
| vue-chartjs | 4.0.0～ |
ツリー状にネストされた複数選択のセレクトメニューコンポーネントライブラリ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| @riophae/vue-treeselect | × | https://www.npmjs.com/search?q=vue3-treeselect |
| vue3-tree-vue | 〇 | |
| vue3-tree | 〇 | |
| el-tree-select | × | vue3-tree-selectに移行 |
Element-Plusを使うなら、以下に移行も検討
https://element-plus.org/en-US/component/tree-select.html
絵文字
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| emoji-mart-vue | × | Vue2と3に対応しているemoji-mart-vue-fastに移行 |
無限スクロール
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| splitpanes | 〇 | |
| vue-split-panel | × | coder-vue3-split-panelやvue3-infinite-scroll-goodに移行、または、別のライブラリを探す |
| vue-infinite-loading | × | vue-eternal-loadingに移行 |
| vue-virtual-scroller | 〇 | vue-virtual-scroller@next |
| v3-infinite-loading | 〇 | |
| vue-virtual-scroll-list | × |
Element-Plusを使うなら、以下に移行も検討
https://element-plus.org/en-US/component/infinite-scroll.html
トースト表示
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-toast-notification | 3.0～ | |
| vue-toasted | × | @hoppscotch/vue-toastedに移行 |
Cronエディタ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue3-cron-antd | 〇 | 中国語表示のみ。demo |
| @vue-js-cron/light | 〇 | |
| vue-cron | × | 英語/中国語表示切替あり |
| vue-cron-generator | × | |
| vue-cron-editor-buefy | × | 開発終了 |
ローカルストレージ/セッションストレージ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vuex-persist | 〇 | 動いた(2023/7/24) |
| vuex-persister | 〇 | |
| vuex-persistedstate | 〇 | 開発終了。非推奨のパッケージ |
| pinia-plugin-persist | 〇 | Vue2と3に対応している |
| pinia-plugin-persistedstate | 〇 |
グラフ表示
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-echarts | 〇 | Vue2/3の両方に対応 |
| vue-chartjs | 4.0.0～ |
ドラッグ＆ドロップ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| Vue.Draggable | × | vue.draggable.nextに移行。2020年以降に修正無し |
クリップボード
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-clipboard2 | × | vue3-clipboardまたはvue-clipboard3に移行 |
プログレスバー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-progressbar | × | vue3-progressbarに移行 |
画像の遅延読み込み
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-lazyload | 3.x～ |
モーダルやダイアログ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-js-modal | × | vue-final-modalかvue-modalに移行 |
ツールチップ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| Floating Vue | 2.x～ |
プログレスバー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-progressbar | × | vue3-progressbarに移行 |
スライダー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-slider-component | 〇 | |
| Hooper | × | hooper-vue3かvue3-carouselに移行 |
テキストハイライト
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-text-highlight | × | vue-word-highlighterに移行 |
タブコンポーネント
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-tabs-component | × | 開発終了。vue3-tabs-componentに移行 |
トップに戻る
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-go-top | × |
カレンダー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vuejs-datepicker | × | vue-datepickerに移行 |
| v-calendar | v-calendar@next |
ファイルアップロード
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-dropzone | × | vue3-dropzoneかhttps://www.npmjs.com/package/vue2-dropzone-vue3に移行 |
セレクトメニュー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-select | vue-select@beta |
マークダウンエディタ
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| mavonEditor | 3.0.0～ | |
| md-editor-v3 | 〇 | |
| vuetify-markdown-editor | × |
クエリービルダー
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| query-builder-vue | × | |
| vue-query-builder | × | 開発終了 |
| vue-query-builder-buefy | × | |
| vue-query-builder-plus | × |
WebSocket
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-native-websocket | × | vue-native-websocket-vue3に移行 |
未整理
| ライブラリ名 | Vue3対応 | 備考 |
|---|---|---|
| vue-prism-component | 2.0.0 | 2021年以降の修正なし |
| vue-json-pretty | 2.0.0～ | |
| vue-at | △(3.0.0-alpha.2) |