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) |