[随時更新]Vue3対応のプラグイン調査


# UIフレームワーク

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[Element](https://github.com/ElemeFE/element)|[Element-Plus](https://github.com/element-plus/element-plus/)||
|[Vuetify](https://github.com/vuetifyjs/vuetify)|3.x～||
|[bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue)|△<br>2.23.0～|Vue3 migration buildで動作する状態|
|[BootstrapVue 3](https://www.npmjs.com/package/@technokrat/bootstrap-vue-3)|〇|BootstrapVue から大きく影響を受けている|
|[Quasar](https://github.com/quasarframework/quasar)|2.x～||
|[Buefy](https://github.com/buefy/buefy)|[ntohq/buefy-next](https://github.com/ntohq/buefy-next)||
|[Oruga](https://github.com/oruga-ui/oruga)|〇||

# ユーティリティ関数のライブラリ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[VueUse](https://github.com/vueuse/vueuse)|〇||
|[vue-composable](https://github.com/pikax/vue-composable)|〇|Vue2.7に対応してなさそう|
|[vue-hooks](https://github.com/vueuse/vueuse)|×||
|[vue-use-web](https://github.com/Tarektouati/vue-use-web)|×||

# 管理画面

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[Geeker-Admin](https://github.com/HalseySpicy/Geeker-Admin)|〇||
|[Fantastic-admin](https://github.com/fantastic-admin/basic)|〇||
|[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)|×||

# 入力チェック

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vuelidate](https://github.com/vuelidate/vuelidate)|〇|Vue2と3に対応している|
|[vee-validate](https://github.com/logaretm/vee-validate)|4.x～||

# アイコン

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[@fortawesome/vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)|3.0～||

# 表

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[ag-grid](https://github.com/ag-grid/ag-grid)|〇||
|[DataTables component for Vue 3](https://github.com/DataTables/Vue)|〇||
|[vue-good-table](https://github.com/xaksis/vue-good-table)|×|[vue-good-table-next](https://github.com/borisflesch/vue-good-table-next)に移行|
|[vue-bootstrap4-table](https://github.com/rubanraj54/vue-bootstrap4-table)|×|2020年以降修正無し|
|[vue-tables-2](https://github.com/matfish2/vue-tables-2)|×|開発終了|

# グラフ描画

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-echarts](https://github.com/ecomfe/vue-echarts)|6.0.0～|Vue2と3に対応している|
|[vue-chartjs](https://github.com/apertureless/vue-chartjs)|4.0.0～||

# ツリー状にネストされた複数選択のセレクトメニューコンポーネントライブラリ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[@riophae/vue-treeselect](https://www.npmjs.com/package/@riophae/vue-treeselect)|×|https://www.npmjs.com/search?q=vue3-treeselect|
|[vue3-tree-vue](https://github.com/geekhybrid/vue3-tree-vue)|〇||
|[vue3-tree](https://github.com/wopehq/vue3-tree)|〇||
|[el-tree-select](https://github.com/ayiaq1/el-tree-select)|×|[vue3-tree-select](https://github.com/hacfins/vue3-tree-select)に移行|

Element-Plusを使うなら、以下に移行も検討
https://element-plus.org/en-US/component/tree-select.html 

# 絵文字

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[emoji-mart-vue](https://www.npmjs.com/package/emoji-mart-vue)|×|Vue2と3に対応している[emoji-mart-vue-fast](https://www.npmjs.com/package/emoji-mart-vue-fast)に移行|

# 無限スクロール

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[splitpanes](https://github.com/antoniandre/splitpanes)|〇||
|[vue-split-panel](https://www.npmjs.com/package/vue-split-panel)|×|[coder-vue3-split-panel](https://www.npmjs.com/package/coder-vue3-split-panel)や[vue3-infinite-scroll-good](https://www.npmjs.com/package/vue3-infinite-scroll-good)に移行、または、別のライブラリを探す|
|[vue-infinite-loading](https://github.com/PeachScript/vue-infinite-loading)|×|[vue-eternal-loading](https://github.com/ts-pro/vue-eternal-loading)に移行|
|[vue-virtual-scroller](https://www.npmjs.com/package/vue-virtual-scroller)|〇|vue-virtual-scroller@next|
|[v3-infinite-loading](https://www.npmjs.com/package/v3-infinite-loading)|〇||
|[vue-virtual-scroll-list](https://www.npmjs.com/package/vue-virtual-scroll-list)|×||


Element-Plusを使うなら、以下に移行も検討
https://element-plus.org/en-US/component/infinite-scroll.html

# トースト表示

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-toast-notification](https://www.npmjs.com/package/vue-toast-notification)|3.0～||
|[vue-toasted](https://www.npmjs.com/package/vue-toasted)|×|[@hoppscotch/vue-toasted](https://www.npmjs.com/package/@hoppscotch/vue-toasted)に移行|

# Cronエディタ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue3-cron-antd](https://github.com/Bratrindersteak/vue3-cron)|〇|中国語表示のみ。[demo](https://codesandbox.io/s/vue3-cron-antd-sample-3k27n6)|
|[@vue-js-cron/light](https://www.npmjs.com/package/@vue-js-cron/light)|〇||
|[vue-cron](https://www.npmjs.com/package/vue-cron)|×|英語/中国語表示切替あり|
|[vue-cron-generator](https://github.com/ldang264/vue-cron-generator)|×||
|[vue-cron-editor-buefy](https://github.com/karoletrych/vue-cron-editor)|×|開発終了|

# ローカルストレージ/セッションストレージ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vuex-persist](https://www.npmjs.com/package/vuex-persist)|〇|動いた(2023/7/24)|
|[vuex-persister](https://github.com/shadrqen/vuex-persister)|〇||
|[vuex-persistedstate](https://www.npmjs.com/package/vuex-persistedstate)|〇|開発終了。非推奨のパッケージ|
|[pinia-plugin-persist](https://www.npmjs.com/package/pinia-plugin-persist)|〇|Vue2と3に対応している|
|[pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)|〇||

# グラフ表示

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-echarts](https://www.npmjs.com/package/vue-echarts)|〇|Vue2/3の両方に対応|
|[vue-chartjs](https://github.com/apertureless/vue-chartjs)|4.0.0～||

# ドラッグ＆ドロップ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)|×|[vue.draggable.next](https://github.com/SortableJS/vue.draggable.next)に移行。2020年以降に修正無し|

# クリップボード

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-clipboard2](https://github.com/Inndy/vue-clipboard2)|×|[vue3-clipboard](https://github.com/soerenmartius/vue3-clipboard)または[vue-clipboard3](https://github.com/JamieCurnow/vue-clipboard3)に移行|


# プログレスバー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-progressbar](https://github.com/hilongjw/vue-progressbar)|×|[vue3-progressbar](https://github.com/aacassandra/vue3-progressbar)に移行|

# 画像の遅延読み込み

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-lazyload](https://github.com/hilongjw/vue-lazyload)|3.x～||

# モーダルやダイアログ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-js-modal](https://github.com/euvl/vue-js-modal)|×|[vue-final-modal](https://github.com/vue-final/vue-final-modal)か[vue-modal](https://github.com/kouts/vue-modal)に移行|

# ツールチップ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[Floating Vue](https://github.com/Akryum/floating-vue)|2.x～||

# プログレスバー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-progressbar](https://github.com/hilongjw/vue-progressbar)|×|[vue3-progressbar](https://github.com/aacassandra/vue3-progressbar)に移行|

# スライダー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-slider-component](https://github.com/NightCatSama/vue-slider-component)|〇||
|[Hooper](https://github.com/baianat/hooper)|×|[hooper-vue3](https://github.com/magFixCorp/hooper-vue3)か[vue3-carousel](https://github.com/ismail9k/vue3-carousel)に移行|

# テキストハイライト

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-text-highlight](https://github.com/AlbertLucianto/vue-text-highlight)|×|[vue-word-highlighter](https://github.com/kawamataryo/vue-word-highlighter)に移行|

# タブコンポーネント

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-tabs-component](https://github.com/spatie/vue-tabs-component)|×|開発終了。[vue3-tabs-component](https://github.com/Jacobs63/vue3-tabs-component)に移行|

# トップに戻る

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-go-top](https://github.com/inotom/vue-go-top)|×||

# カレンダー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)|×|[vue-datepicker](https://github.com/sumcumo/vue-datepicker)に移行|
|[v-calendar](https://github.com/nathanreyes/v-calendar)|v-calendar@next||

# ファイルアップロード

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-dropzone](https://github.com/rowanwins/vue-dropzone)|×|[vue3-dropzone](https://www.npmjs.com/package/vue3-dropzone)か[https://www.npmjs.com/package/vue2-dropzone-vue3](https://www.npmjs.com/package/vue2-dropzone-vue3)に移行|

# セレクトメニュー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-select](https://github.com/sagalbot/vue-select)|vue-select@beta||

# マークダウンエディタ

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[mavonEditor](https://github.com/hinesboy/mavonEditor)|3.0.0～||
|[md-editor-v3](https://www.npmjs.com/package/md-editor-v3)|〇||
|[vuetify-markdown-editor](https://www.npmjs.com/package/vuetify-markdown-editor)|×||

# クエリービルダー

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[query-builder-vue](https://www.npmjs.com/package/query-builder-vue)|×||
|[vue-query-builder](https://www.npmjs.com/package/vue-query-builder)|×|開発終了|
|[vue-query-builder-buefy](https://www.npmjs.com/package/vue-query-builder-buefy)|×||
|[vue-query-builder-plus](https://www.npmjs.com/package/vue-query-builder-plus)|×||

# WebSocket

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-native-websocket](https://www.npmjs.com/package/vue-native-websocket)|×|[vue-native-websocket-vue3](https://www.npmjs.com/package/vue-native-websocket-vue3)に移行|

# 未整理

|ライブラリ名|Vue3対応|備考|
| ---- | :---: |---- |
|[vue-prism-component](https://www.npmjs.com/package/vue-prism-component)|2.0.0|2021年以降の修正なし|
|[vue-json-pretty](https://www.npmjs.com/package/vue-json-pretty)|2.0.0～||
|[vue-at](https://www.npmjs.com/package/vue-at)|△(3.0.0-alpha.2)||