このページの内容

Awesome logo of vue-awesome repository

logo of vue-awesome repositoryを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

Vue.jsのAwesomeリスト Awesome Track Awesome List

Vue.jsに関連する優れた資料の厳選リストです。

目次

資料

公式資料

特に優れたプロジェクト

特に品質が高く、実績があり、Vue.js開発に欠かせないプロジェクトです。

  • Vue DevTools - Vue.jsアプリケーションのデバッグ用ブラウザデベロッパーツール拡張機能
  • unplugin-icons - 広く使われている主要なアイコンセットに対応するオンデマンドアイコンローダー
  • vue-i18n - Vue.jsの国際化プラグイン

外部資料

  • Vue.js 資料まとめ(for japanese) by @hashrock
  • Vue.js Wikipedia
  • Vue Curated Resources - おすすめのVue.jsコースとチュートリアル
  • Vue School - コアメンバーや業界の専門家による動画コースでVue.jsを学べるサイト
  • VueDose. Tips & tricks about the Vue ecosystem, for busy devs.
  • Vue.js DEV Community - DEV.toにおけるVue.js JavaScriptフレームワークの公式タグ
  • WebTechSurvey.com - Vue.js JavaScriptフレームワークで作成されたウェブサイトの広範なリスト
  • Vue Mastery - Vue開発者のための究極の学習リソース
  • Vue 3 Video Playlist - 素晴らしいVue 3チュートリアルと実験
  • Vue.js Workshops - Vue 2をブラウザ上で学ぶ3つのアプリケーション(ランディングページ、TODOアプリ、ポッドキャスト集約)を構築することで学ぶ。(Vue.js、Vue-Router、Vuex、Vue-Axios、Vue-Apollo)
  • Vue.js Articles - Vue 2およびVue 3のチュートリアルと記事のさまざまな選集
  • Best vue.js Courses On YouTube - YouTube上での最高のVue.jsチュートリアルを厳選したリスト
  • Notes on Vue - Vue開発に関する個人的なガイド
  • Vue-FAQ - フロントエンドおよび特にVue.jsに関するよくある質問
  • State of Vue Report - Vueに関する包括的なレポートの第5版。Evan YouおよびVueとNuxtのコアチームとの共同制作
  • TODOvue Blog - Vue.jsで現代的なコンポーネントを作成するためのガイドとチュートリアル。 Website

ニュースレター

  • Weekly Vue news - 最も興味深いVueおよびNuxtのニュース、チュートリアル、プロジェクト、ツールを週に1回配信するニュースレター。

求人ポータル

コミュニティ

カンファレンス

ポッドキャスト

公式サンプル

チュートリアル

サンプル

  • Vue 2048 (Vue + Webpack) by @pengfu: Popular 2048-Game implemented using Vue,Webpack,Sass,ES6
  • easy-vue a easy example using the vue to implement easy web with vue 2.0, vuex 2.0, vue-router 2.0, vue-infinite-scroll 2.0, vue-progressbar 2.0 by TIGERB
  • Vue.js with Sails.js example project - このプロジェクトは、シングルページアプリケーションに初めて触れる人向けで、実際の例を通じて学習するためのものです。
  • Vue.js & Pyramid web framework app - Pylons PyramidウェブフレームワークバックエンドとVue.js、webpack2、vue-router、yarn(パッケージマネージャー)を用いたボイラプレート
  • vue-feathers-chat A sample realtime chat made with Vue in frontend and Feathers in backend, but using just Socket.IO-Client for the communication
  • vue-xplan A rotating earth demo page created with Vue and three.js
  • vueSocketChatRoom A socket chat room using vue2.x,vuex2.x,vue-router2.x,vux2.x,socket.io
  • vue-tetris (Use Vue, Vuex, Immutable to code Tetris) by @Binaryify: Use Vue, Vuex, Immutable to code Tetris.
  • route-planner-vue by @Kasheftin: The tool for planning routes with multiple sortable layers, draggable directions, markers and shapes on google map.
  • VueJS Example Projects on Github
  • Vue Weather Notifier A small sample animation app with SVG and Vuex
  • X-Flowchart-Vue - SVGとVueを用いたフローチャートエディタ
  • koa-vue-notes-web - Koa 2.3をバックエンド、Vue 等2.4をフロントエンドに使用した、詳細なSPA。ユーザー認証コンポーネント、ユーザーのノートに対するCRUD操作、およびVuexストアモジュールを含む。
  • vue-vuex-todomvc - TodoMVCのVue.jsアプリ例にVuexストアとRESTによるサーバーバックエンド、およびE2Eテストの完全セットをCypress.ioテストランナーで実現したアプリ
  • X-WebDesktop-Vue - VueをベースとしたWebDesktopシステム
  • Skeleton Vue+TypeScript - TypeScript、VueJS、ElementUI、Vue Router、Vuex、Material Icons、BrowserSync、Dockerfile
  • Vue Design System - Vue.jsを用いたUIデザインシステムの構築用オープンソースボイラプレート
  • Vuejs Examples
  • Laravel + Nuxt.js boilerplate - @acidjazzによって
  • vue-stack-cesium - CesiumJSとVueのすべての素晴らしい機能を含む最小限のサンプル設定プロジェクト。このプロジェクトには、特定のパッケージを組み合わせて使用するための多くの例が含まれています
  • vuemoji-picker - Vue 2およびVue 3用の軽量エモジピッカー
  • Maxim Web Chat - flooによるIM SDK(美信拓扑IM SDK)を使用したチャットデモアプリの例 MaximTop
  • umo editor - Umo EditorはVue3とTiptapに基づくオープンソースドキュメントエディタです。 Playgroundにアクセスして高速な体験を楽しんでください
  • Vitesse Starter ⛺️ Vue 3 starter inclode ( Layouts | i18n | UnoCSS | pinia | Markdown | Dark Mode | PWA | SSG | Component Auto-Importing | File-Based Router | Composition API | TypeScript)
  • Vitesse-lite Starter ⛺️ Lightweight version of Vitesse (Vue 3 Starter)
  • Vue Tic Tac Toe | Cerito Cruz by @EduardoProfe666: Popular Tic-Tac-Toe-Game with extra features using Vue 3, Vite, TypeScript, Tailwind, Gsap, Howler, Headless UI and Vue Use
  • i18n boilerplate Intlayer + Vue 3 + Vite
  • tab-toolkit - 初心者ギタリスト向けの非常に小さなアプリツール 🎸 (PWA | Pinia | UnoCSS) by @mioe

書籍

ブログ記事

コース

  • Learn Vue by Building and Deploying a CRUD App - このコースは、テストドリブン開発(TDD)を用いてウェブアプリケーションを構築・テストすることで、Vueの基本を教えるものです。
  • Advanced Vue.js Features from the Ground Up - アクセス性の高いルーティング、状態管理、フォームバリデーション、国際化ライブラリをゼロから構築する方法を学びましょう!
  • Become a Ninja with Vue 3 - このコースは、Vue CLI、TypeScriptおよびComposition APIを用いて、Vue 3で完全なアプリケーションをステップバイステップで構築する方法を教えます。各演習には指示とテストがあり、コードの100%を確認できます。

ドキュメンタリー

Vue.jsを利用する企業

Vue.jsを利用するプロジェクト

オープンソース

  • npmcharts.com - npmパッケージを比較し、ダウンロードトレンドを確認します。

  • Koel - 個人用の音楽ストリーミングサーバーが動作するもの。

  • astralapp - GitHubのスターを簡単に整理できます。

  • PJ Blog - LaravelとVue.jsで構築されたオープンソースブログ

  • OpenAPI 3 viewer - OpenAPI 3.0仕様で記述されたREST APIをブラウズおよびテスト

  • nativescript-vue - NativeScriptレンダラーのVue.js実装

  • Paper-Dashboard -Creative Tim Paper Dashboard made for Vue

  • CoreUI Vue Admin Template - Vue.jsをベースにしたオープンソースアドミンテンプレート

  • vuejs-extension-pack vscode - VSCode用の拡張パッケージで、Vue.js開発に必要な人気VS Code拡張機能を提供。

  • Wiki.js - NodeJS、Git、Markdownをベースにした現代的で軽量かつ強力なWikiアプリ

  • peregrine-cms - Vue.js と Apache Sling をベースにしたヘッドオプショナル CMS

  • Light Bootstrap Dashboard - Creative Tim が Vue 用に開発したライトな Bootstrap ダッシュボード

  • vue-storefront - Vue.js ストアフォント - エコシステム向け PWA。完全オフライン対応、プラットフォームに依存しない、ヘッドレス、Magento2 対応

  • Laravel Enso - Bulma、VueJS および Laravel を使用した SPA アドミンパネル。本体に多数の機能を搭載。

  • Hubble - :telescope: GitHub Stars の歴史をたどる

  • Vuepress - シンプルな Vue を活用した静的サイトジェネレーター

  • Socialhome - ソーシャルネットワーキング機能を備えた、連携型豊かなプロフィールビルダー

  • chrome-ribbon-reminder - Vue と Async/Await を使用した Chrome エクステンション。ポップアップ表示を用い、バッジ数を変更。

  • Faviator - シンプルで使いやすい favicon 生成ツール

  • Minimal Notes - Vue.js を使用したウェブアプリ

  • Stack Edit - ブラウザ内 Markdown エディタ

  • Bael Blog Template - Netlify CMS をバックエンドとして、Netlify でホスティングする静的ブログテンプレート。ブラルズティスなデザイン、ふわっとした検索、サーバレスメール登録なども備えている。

  • Buefy Shop - オープンソースのサンプルショップ。Nuxt、Stripe、Firebase、Bulma、サーバレス関数で構成。

  • Carpoolear - アルゼンチンのカーポールングアプリケーション向けのオープンソースVue.jsフロントエンド(モバイルおよびCordovaアプリ): Carpoolear

  • Vue E-Store Templet - vue/vuex/vue-router と bootstrap4 を使用したエコシステム用テンプレート

  • Twill - Laravel 用のオープンソース CMS ツールキット。開発者が、直感的で強力で柔軟なカスタムアドミンコンソールを迅速に構築できるように支援。

  • Vue Org Chart - インタラクティブな組織図(orgchart)の管理と公開。無料で、Webサーバー不要。

  • Thermal - すべての Git リポジトリを一括管理。

  • QMK Configurator - QMK フォームのキーボード設定 UI(Vue.js で構築)。

  • Daily - あなたの新タブにデベロッパー向けニュースを配信。👩🏽‍💻

  • Laravel File Manager - Laravel 用の強力なファイルマネージャー

  • Vue Crypto Dashboard - Vue.jsで作成された暗号通貨ダッシュボード

  • Vue Expenses - Vue.js、VuetifyおよびASP.NET Coreを使用した支出トラッキングアプリ

  • Akaunting - LaravelとVueJSをベースにした、小規模事業者やフリーランス向けの無料オンライン会計ソフトウェア

  • MQTTX - Vue.js、TypeScriptおよびElectronで構築されたクロスプラットフォームMQTT 5.0デスクトップクライアント

  • Pychat - セルフホスト型WebRTC視聴チャット(Slackの代替案)

  • CodeceptJS UI - ✔️ CodeceptJSのエンドツーエンドテストに使えるCypress風UI ✔️

  • LeagueStats - オンラインゲーム『リーグオブレジェンズ』のプレイヤー向けの統計サイト

  • Savycart - スーパーマーケットへ行くために紙とペンを使わずに個人購入をトラッキングできるPWA 🏬 VueとVuetify

  • Afterman - 🌕 PostmanコレクションからMarkdownおよびHTMLで美しいドキュメントを作成。Quasar Frameworkを使用

  • LogChimp - 顧客からのフィードバックを追跡し、より良い製品を構築するためのオープンソースソフトウェア

  • Yacht - Vuetifyを使用したDockerコンテナ管理WebUI。Dockerコンテナとプロジェクトの管理を簡単に行うためのツール

  • Antares SQL - シンプルかつ完全なクロスプラットーンSQLクライアント

  • Bagisto - すべての事業者向けに構築された無料かつオープンソースのLaravelエコノミクスフレームワーク。ビジネスの構築と拡張を可能にします

  • GrandNode 2.0 - .NET Core 5.0およびMongoDB/Azure CosmosDB/Amazon DocumentDB/VueJSをベースにしたオープンソースのクロスプラットフォームEコマースソリューション

  • Aimeos - Laravelエコノミクスフレームワークのリーダー。1から1,000,000,000件以上のアイテムまでスケーラブルな超高速オンラインショップやマーケットプレイス、複雑なB2Bアプリケーションを構築可能

  • XIV ToDo - Final Fantasy XIVのためのダッシュボード、完了トラッカー、カスタマイズされた週間および日間チェックリスト、ツール

  • Interface X - UIの検索・発見コンポーネントで、美しい検索体験を迅速に構築

  • Balancer - Ethereum上で動作する分散型金融アプリ

  • Materio Free Vuetify VueJS Laravel Admin Template - エレガントなデザインとユニークなレイアウトを備えたオープンソースかつ使いやすいVuetify Vuejs Laravel管理テンプレート

  • Dashy - セルフホスト型スタートページ。使いやすい視覚エディタ、ステータス確認、テーマ、ウィジェットなど、多数の機能を備えています

  • FAIRshare - 適用可能なFAIRガイドラインに従って、生物医学研究データとソフトウェアを共有

  • Snippets.Ninja - コードスニペット管理用のプログレッシブウェブアプリ。オフライン優先。オープンソース。アプリはIndexedDBを使用してローカルストレージを実現。

  • ZuiOJ - Vue2のUIを用いて開発されたZuiOJシステム

  • vue-paho-mqtt - Vue 3向けに使いやすいPaho MQTTクライアントライブラリ。中央集約されたサブスクリプション管理、型サポート、および内蔵のオプションアラート通知ライブラリを備えている

  • VueFinder File Library - ウェブファイルマネージャーライブラリ

  • Overlay - 開発者がオープンソースパッケージを選択する前に評価できるブラウザ拡張機能

  • activist.org/ - 非営利活動プラットフォーム

  • MYDY Dashboard - AIアシスタント、カンバンボード、時間記録、Telegramミニアプリ統合を備えた、セルフホスト型の個人の生産性および財務管理ダッシュボード。Nuxt 4とLaravel 1、11を使用して構築。

  • Sneat Free Vuetify VueJS Admin Template - レスポンシブウェブアプリ開発用の最高品質の無料VueJS管理テンプレート

  • slidev - 開発者向けプレゼンテーションスライド

  • YesPlayMusic - 見た目が美しい第三者のNetEaseクラウドプレイヤー。Windows / macOS / Linuxに対応 :electron:

  • douyin - TikTokを模倣した、Vueでのモバイル開発ベストプラクティス

  • MyIP - すべてのIPツールを一括で提供。IPの確認、IPの地理位置情報、DNSリークチェック、WebRTC接続の確認、スピードテスト、pingテスト、MTRテスト、ウェブサイトの可用性確認など、さまざまな機能を提供。

  • fylepad - 強力な富テキスト編集機能を備えたノートアプリ。Vueで構築。

  • fresfolio - 個人および研究プロジェクトの管理に使えるブラウザベースのノートアプリ。バックエンドはFlask、フロントエンドはVue.jsで構成。UIコンポーネントとレスポンシブデザインはQuasarフレームワークを使用。

  • FavBox - タグ、検索、重複・破損リンクの検出をサポートする、ローカル優先型のブラウザ拡張機能。Vue 3、Vite、IndexedDBで構築。

  • JARVIS - Vue 3のフロントエンド、Piniaの状態管理、TypeScript、リアルタイムSSEストリーミングチャットを備えたセルフホスト型AIアシスタントプラットフォーム。バックエンドはFastAPIで、LangGraph ReActアグエント、RAG知識ベース、マルチLLMサポート(DeepSeek/OpenAI/Anthropic)、プラグインSDKを備えている。

  • Simple IoT - Vue 3 + Element Plusの管理SPAを用いた、シングルバイナリのセルフホスト型IoTプラットフォーム。視覚的なドラッグアンドドロップルールエンジン、リアルタイムデバイスダッシュボード(ECharts)、ホットロードプロトコルスクリプト、MQTTブローカーを内蔵。Spring Boot 4バックエンド。ThingsBoard CEの軽量代替。

  • MarkerOn - Tauri v2、Vue 3、Canvas APIを用いて構築された軽量なスクリーンアノテーションツール。デスクトップ上のどこでも描画、強調、アノテーションが可能。

商用製品

  • Wijmo - VueJS対応のUIコントロール一覧
  • ChatWoot - Facebook メッセージ上でライブチャットとアグリーティブの協働
  • VueA - VueJSの管理テンプレート(複数レイアウト)およびLaravelバージョン
  • EducationLink - 教育関連のアグリーティブや大学向けCRMおよび販売自動化
  • Pragmatic v2.0 - Vue.jsとElementで構築されたレスポンシブかつ設定可能な管理テンプレート
  • Moonitor - デスクトップ用の暗号資産トレーサー
  • Deskree - アイデア、タスク、問題を一つの場所に統合したオンライン協働プラットフォーム
  • ScaffoldHub - VueJSとNodeJS、MongoDBまたはSQLを用いたオンラインWebアプリ生成ツール
  • Commandeer - クラウド管理の再構築。Vue.jsとElectronで構築されたデスクトップクラウド管理アプリ
  • Leave Dates - 従業員の休暇を追跡する強力な新しい方法
  • vREST NG - VueJSとElement UIで構築された自動APIテスト用エンタープライズアプリ
  • Coloban - チャット、カンバン、ギャンツチャート、電話、スクリーン共有など、多数の機能を備えた一括プロジェクト管理ツール
  • NxShell - ElectronとVueJSに基づいた使いやすいSSH用ターミナル
  • Materio Vuetify VueJS Admin Template - 最も強力で開発者向け、生産性に優れ、包括的なVuetify VueJS管理テンプレート
  • NocoDB - オープンソースのAirtableの代替ツール
  • He3 - 無料かつ現代的な開発者用ユーティリティツールボックス
  • RunJS - コードをタイプするたびに評価し、即時フィードバックを提供するJavaScriptプレインダーサイド。アイデアのプロトタイピングや新しいライブラリの試用に最適
  • Sneat Vuetify VueJS Admin Template - レスポンシブウェブアプリ向けの究極のVueJS管理テンプレート
  • Litlyx - AIを活用したウェブ分析プラットフォーム。Google Analytics 4およびMixpanelのオープンソース代替ツール
  • Fynk - 契約の作成、署名、管理プラットフォーム

アプリ/Webサイト

  • Laravel Spark
  • Vice Video
  • Formlets
  • Laracasts
  • esa.io
  • Prague Airport
  • Portfolio Site
  • Statamic
  • TravelMap - 旅行者が地図に基づいてブログを作成できるシンプルな方法
  • Proper Cloth Shirt Builder - カスタムシャツビルダー
  • vNotes - Vue.jsとローカルストレージAPIを使ったシンプルで美しいメモ帳(マークダウン)
  • Dermail - node.jsで構築されたDermailメールシステム用のVue.jsによるウェブメールクライアント
  • octimine - 特許検索エンジン
  • Draxed - ウェブベースのMySQLおよびPostgreSQLデータブラウザとダッシュボードマネージャー
  • 滚蛋吧!莆田系 - _putian_病院のすべての情報表示
  • Livestorm - ウェビナー/ライブイベントアプリ
  • Holden
  • 12BAY.VN - オンライン航空券予約アプリケーション
  • PLAYCODE.IO - Rapid Frontend Experimentsのプレイングランド
  • The Void Radio - 地下ハウスミュージックオンラインラジオ
  • Bitly Vue - VueJSとBitly APIを使ってURLを短縮
  • Storyblok - VueJSをフロントエンドとして使用したAPIベース/解離型CMS
  • EasyWebinar - ウェビナーソフトウェア/ライブイベント&ウェビナーアプリ
  • WizzAir
  • Moving to HTTPS - 複数プラットフォーム/ホスティングサイトをHTTPSに移行するガイド
  • Euronews - Euronewsはフランスリヨンに本社を置く多言語ニュースメディアサービス
  • Vue.js Feed - Vue.jsとLaravelで作成された最新のVue.jsニュース、チュートリアル、プラグインなど
  • Guess Right - 単語を「当ててみよう」ゲーム - Vue/vuex/vue-router(フロントエンド)とLaravel/MySQL(バックエンド)で構成されたアプリ。コードはOpen Source on GitHub(ただし、kdcinfoで実行されているゲームのライブファイルとは異なります)
  • GRAP - ビジネスコミュニケーションサービス
  • JSON Schema Editor - Vue.jsとFirebaseで構築されたJSONスキーマ用の直感的なエディタ
  • Winsome Trivia - Vue.jsで構築された2,000以上のユニークな質問を備えたシングルまたはマルチプレイヤーのトリビアゲーム
  • Moon Organizer - 月のカレンダーアプリ
  • Kinderbesteck - Vue2.0、Vuex、Vue Routerを用いた完全なオンラインショップSPA
  • Power Thesaurus - ユーザーが参加するオンライン語彙辞書
  • PAIXIN - 本物の写真販売サイト
  • 1XBET - 2007年から運営されているベティング会社
  • CrowdCircus - ヨーロッパ最大のクラウドファンディングおよびクラウドインベストメント集約サイト
  • PingBreak - Vue.jsを用いたリアルタイムダッシュボードを備えた無料かつシンプルなウェブサイト監視サービス
  • Todoist Tribute - Rails+Vueで構築されたTodoistのクローン
  • JSON Editor - Vue2とFirebaseを用いたスキーマ認識JSONエディタ
  • Develteam - インディーゲーム開発者のためのソーシャルネットワーク
  • Mixsii - 若者、成人、家族、友人向けの無料ビデオチャットルームサイト
  • PipQuest - Vueで構築されたレトロ風パズルゲーム
  • Matryx - 分散型協働プラットフォーム
  • iPrevYou - YouTube™ Player - デスクトップ上でYouTube動画を視聴できるChromeアプリ
  • Item Manager - Destiny 2ゲーム用のアイテム移動アプリ
  • Frontend Masters Intro to Vue - Frontend Mastersの全日コース
  • TR-101 - ドラムシンセサイザー/シーケンサ
  • Bazaar - メディア共有プラットフォーム
  • Vectr - 無料のベクターグラフィックスソフトウェア
  • Habitica - タスク管理アプリとしてのロールプレイングゲーム形式のオンラインアプリ
  • MadeWithVueJs - Vue.jsで作成されたプロジェクトギャラリー(サイト自体もVue.jsを使用)
  • Thousand Ether Homepage - ZXQ Million Dollar Homepage を Ethereum DApp として再構築。Vue.js とオープンソースで構築。
  • Let’s Enchance - 神経ネットワークを用いた無料オンライン画像拡大および向上機能。
  • Pi.TEAM - Online Invoicing and Accounting - シンプルなオンライン会計と請求書作成。個人ユーザーおよびフリーランス向け無料。
  • Tipe - 次世代 API ファースト CMS。強力な編集ツールでコンテンツを作成し、GraphQL または REST API でどこからでもアクセス可能に。CMS がアプリ開発の方法を決めるのをやめましょう。
  • Bubbleflat - 学生や若手プロフェッショナルが、ライフスタイルや興味、学校などに類似した人を検索して最適な同居人を見つけるためのオンラインプラットフォーム。Laravel & Vuejs
  • sunpos - 太陽の位置、高度、方位、黄道座標/赤道座標、日出日没時間(ユリウス日)の計算および変換ツール。ウェブサイトは純粋な JS、Vuejs および i18n Vuejs ローカライズプラグインで構成。可視化は D3.js を使用。
  • 27.ua - ウクライナにあるインターネットハイパーサイズマーケット
  • Chess Guardian - 自分のゲームからチェスの局面に関する質問に答える。
  • Blackjack Break - ブラックジャックの簡単なゲーム
  • GameVix - 使ったビデオゲームディスクを他の人と交換できる。PWA で Material Design を採用。
  • VivifyScrum - チームが納品するプロジェクト管理アプリ。カスタマイズ可能なスクラムおよびカンバンボード。
  • 9GAG - 人気のオンラインプラットフォームおよびソーシャルメディアサイト
  • Kitchen Stories - 調理プラットフォーム
  • Cronhub - 手軽な Cron モニタリングツール
  • wrkprty - フリーランス、リモート勤務者、オフィスを離れて外に出てみたいプロフェッショナル向けのポップアップコワーキングイベント。
  • Broker Notes - ‘実 estate エージェントになるための学習’ :house:
  • SyncLounge - SyncLounge は、複数の場所に配置された複数のプレイヤー間で Plex 内容を同期するツール。
  • HCE.it - イタリアのアgency のウェブサイト。すべて Vue で構成され、LaravelベースのヘッドレスCMSを使用。
  • Spektrum - Spektrum Media Agency のウェブサイト
  • SPK The website of SPK Ecosystem
  • IDDEF ☪️ The Federation of the Associations that Value Humanity’s webpage, CMS, CRM and Donation and all e-commerce pages are designed with Vue.js, Vuex and pure JavaScript 🙏
  • Roast an app built to help coffee enthusiasts find their next cup of coffee while learning about Laravel + Vue.js.
  • CryptoArte - Ethereum 上のアートコレクション、非代替トークン、および DApp。
  • Scroll.in - スクロールインは、独立したニュース、情報、エンタメの事業である。
  • Brandy - メニューバー用のブランド資産マネージャー。
  • NBC Sports - NBCスポーツはスポーツニュースサイトである。
  • WITHIN - バーチャルリアリティによる特別なストーリー。
  • beCamp - バージンス・バージンスのテックカンファレンス。ウェブサイトコードはオープンソース。
  • Trustpilot - 誰でも無料で利用できるレビュープラットフォーム。
  • Lagom - シンプルで直感的かつ完全にレスポンシブなWHMCSテーマ
  • ScoutMyTrip - Roadtrip Planner - インド向けのロードトリップ計画アプリで、旅行者がルートに沿って観光地や宿泊施設、ガソリンスタンド、飲食店などを発見できる。
  • GamersClub - ブラジルにおけるeスポーツコミュニティ開発の最大企業
  • MIT - マサチューセッツ工科大学の公式サイト。
  • Elvenar - エルベナールはブラウザベースのファンタジー都市建設ゲーム。
  • Beacon - :blue_heart: 複数のウェブサイトでコンテンツを共有できるサービス。
  • Artfinder - アートファインダーは、アート画の購入・販売を行うウェブサイト。
  • GitHubExplorer - GitHubを探索するための純粋な静的ページウェブアプリ。VuejsGitHub GraphQL API v4を使用しています
  • HappyPlants - 植物を整理するためのプログレッシブウェブアプリ 🌱。
  • Pocket Lists - 世界で最も親切なタスク管理アプリ。
  • Padlet - 協働型の掲示板
  • Glovo - オンデマンド配達
  • MySigMail - MySigMailは、アカウントを作成せずにブラウザ内でのメール署名生成ツール。
  • Wordguru - チームに分かれて、できるだけ多くのキーワードを予想するシンプルな言語ゲーム。
  • ApiFlash - 開発者向けのChromeベースのスクリーンショットAPI。
  • Git Superstar - Gitのスター数とトップリポジトリをカウント
  • Tapestri Designer - ゲノムシーケンス実験(NGS)用のPCRプライマー設計に使える無料ツール
  • Geenes - UIに色パレットを生成・適用し、Sketchまたはコードにエクスポート
  • ExifShot - 写真撮影における「何を」「どうするか」を美しく説明
  • Studolog - 学生向けオンラインファイル共有プラットフォーム。現在はチェコ語(🇨🇿)のみ。
  • Gamebrary - ビデオゲームコレクションを整理するオープンソースツール
  • Premium Poker Tools - ポーカー玩家が使う研究ツール
  • QMK Configurator - ブラウザからカスタムQMKファイアウォールを設定・構築・ダウンロード
  • Worksome - 資格のあるITプロフェッショナルやフリーランス、採用を希望する企業が利用できるマーケットプレイス/プラットフォーム
  • Translator-vuejs - Vue.js、Yandex APIおよびResponsiveVoice.js APIで構築された翻訳アプリ
  • Big Timer - ワークショップ、ミーティング、プレゼンテーション用のフルスクリーンカウントダウンタイマー。Big Timerはワークショップの進行管理、ミーティングの進行担当者、デザインスプリントの実施者、プレゼンター、ゲームショーの新規開設者にプログラムの進行を助けます
  • Kvalitetskontroll - 建設業界向けのノルウェー製管理システム
  • Poolside FM - レトロ風の音楽プレイヤー
  • Inoreader.com - 世界で最も大きなRSSリーダーおよびニュース集約ツールの一つ
  • AwesomeTechStack - ウェブサイトのテックスタック分析ツール
  • massCode - 開発者向けオープンソースコードスニペットマネージャー。Electron、Vue、Monacoエディタで構築。
  • ClipLeap - 長編動画の中の瞬間を投稿・共有できるプラットフォーム
  • RSVP Keeper - オンライン予約を簡単に行う。イベントをすぐに立ち上げられます。VueとGoで作成。
  • PNGK - 人道的、人権関連および類似組織の解決策を提供するコンサルティング会社の公式サイト
  • BMWUSA Vehicle Configurator - BMWUSA向けの車両設定ツール
  • Fanmio - ファンミオ上での個人ビデオ体験で、あなたの好きなタレントと出会いましょう
  • AtomicWallet - マルチ資産の暗号通貨ウォレット。デスクトップアプリとmobileアプリはどちらもVueで構築されています
  • Helpninja - シンプルで高速なヘルプデスク
  • Todo DEV - Vuejs、Vuetify、強力なFirebaseを活用した開発者向けシンプルなTodoアプリ
  • 36 Pixels - フランスのアグェンシー向けウェブサイト(vue.jsで構築)
  • temp-mail.io - 一時的なメールサービス
  • Narrandum - Vue.js、Vuetify、Feathersjsを用いた顧客体験マッピングツール
  • goonlinetools.com - 100%無料オンラインツールサイト
  • Portfolio Site - Olaolu Olawuyi、フロントエンド開発者およびUXエンジニアのポートフォリオサイト
  • d-patterns.js.org - FOSS Discordテンプレート一覧サイト 💬
  • linksift.com - LinkSiftは、ウェブサイトがリンクしている内容を探索できます
  • postmake.io - 300以上の企業やスタートアップが使っているツールとリソースのキュレーションされたディレクトリ。Vue.jsとNuxtで構築。
  • screenshotapi.net - ウェブサイトスクリーンショットAPI、ピクセル正確なウェブサイトスクリーンショットを取得
  • FontGet - 無料フォントをダウンロード
  • Travel_Smart - Vue + Vue Router + Vuexを活用したツアー型ウェブアプリ
  • National Institutes of Health (NIH): FEVS Survey Results - 米国国立保健研究所(NIH)による連邦視点調査(FEVS)結果のデータ可視化
  • Nipashe -“Nipashe” is a Swahili word that means “Inform me”. Nipashe is a web app built in Vue + Vuex(state management) + Vue-Router(navigation) that gives a tally/statistics on the current COVID19 infections across the world based on the WHO
  • DevSnap.me - ウェブ開発者が無料かつオープンソースのHTML、CSS、JavaScript資産を多数見つけることができるウェブサイト
  • Back Home/回家 - コロナ禍でも運航中の海外から中国本土(および中国から海外)への飛行機検索エンジン
  • Deadlines - Vue.jsとlocalForageで作成されたオフラインのシンプルな期限管理ツール
  • Darwin Analytics - サイトの測定・最適化ツール。Vue3とViteで構築。
  • Scrumfast - 非常に直感的なプロジェクト管理スクラムツール
  • Gradientos - グレディエントスは、傾きの確認を簡単に行えるようにしています。
  • httptools.dev - ウェブ開発者向けのオンラインチェックやツールのコレクション。JSONフォーマッター、リダイレクトチェック、URLエンコーダーなど。Vue3とvue-routerで構築。バックエンドAPIはLaravelを使用。
  • FontBolt - ポップカルチャーから好きなフォントを発見・生成
  • Portfolio Site - モンアイム・イスラム、フルスタックウェブアプリ開発者向けポートフォリオサイト。愛を込めてVue 3で作成。
  • MapperMate - 無料で使えるタイルマップエディタ。2Dゲーム用のタイルマップを作成・編集・管理に使用。
  • Chris Courses - JavaScriptと2Dゲーム開発を学ぶためのプラットフォーム。インタラクティブな動画、クイズ、コードチャレンジを提供。
  • BulkPicTools - プライバシーを最優先にした大量画像処理ツール。Vue 3とWebAssemblyで構築。
  • Shiko - 獣医臨床診療プラットフォーム。予約スケジューリング、マップ付きインタラクティブ診療所ディレクトリ、マルチプラットフォーム対応。
  • Text to Handwriting - 入力されたテキストをリアルな手書きノートに変換できるオンラインツール。

インタラクティブ体験

企業での利用

アクセシビリティ

  • Vue A11y project - Vue.jsコミュニティプロジェクトによるウェブアクセシビリティの向上。
  • vue-axe - Vue.jsアプリケーションのアクセシビリティ診断。
  • vue-announcer - スクリーンリーダーに役立つ情報を、Vueで簡単に発表できる方法。
  • vue-focus-lock - これは罠です!フォーカスに用いられるロック。フォーカスのスコープを目的としたA11yユーティリティ。
  • eslint-plugin-vuejs-accessibility - Vue.jsのアクセシビリティESLintプラグインは@vue-a11yによって管理されています。

コンポーネントとライブラリ

フレームワーク

レスポンシブ

Set of components + responsive layout system

  • quasar-framework - Quasarフレームワーク。Vue.js 3を使用して、レスポンシブウェブサイト、ハイブリッドモバイルアプリ、Electronアプリを一括で構築できます。
  • vuetify - Vue.js 2向けのMaterial Component Framework。
  • buefy - Bulmaフレームワークに基づくコンポーネント。
  • iview-ui - ウェブ向けのVue.js 2.0 UIフレームワーク。
  • AT-UI - デスクトップアプリケーションに特化した、新しくフラットなUIキット。Vue.js 2.0で作成されました。
  • BootstrapVue - Vue.js向けのBootstrap v4コンポーネントとグリッドシステム。
  • fish-ui - Web向けのVue.js 、2.0 UIツールキット。
  • zircle-ui - ズーム可能なユーザーインターフェースを開発するためのフロントエンドライブラリ。
  • ant-design-vue - Ant DesignとVue 3.2.0に基づくエンタープライズクラスのUIコンポーネント。
  • heyui - (https://www.heyui.top/en) - Web向けVue.js 2.0 UIツールキット
  • Carvue.js - IBMのCarbon Design System for Vue.js。
  • BalmUI - Material DesignとVue 3.0に基づく、モジュール化・カスタマイズ可能なUIライブラリ。
  • Osiris UI - :art: Vue.js 2.0向けのユニバーサルレスポンシブUIコンポーネントライブラリ
  • @Carbon/vue - @carbonチームによるCarbon Design Systemのコンポーネント。
  • Inkline - Inklineは、Vue.js 3のデザインシステムを構築するための開発者フレンドリーなUIコンポーネントライブラリです。
  • MDBootstrap - 最新のBootstrap 4とVue 2.6.10に基づく強力なUIツールキット。レスポンシブでモバイル優先のウェブサイトやアプリを迅速に構築できる、スムーズでレスポンシブなページテンプレート、レイアウト、コンポーネント、ウィジェットを提供します。
  • vue-material-adapter - Googleが推奨するベストプラクティスに従ったMaterial Components for Vue.jsの統合:FoundationとAdapterの使用。
  • PrimeVue - Vue向けの最も完全なUIコンポーネントライブラリ。
  • CoreUI for Vue.js - CoreUI for Vue.jsは、クロスブラウザ、レスポンシブ、軽量なVue.js UIコンポーネントを提供するUIコンポーネントライブラリです。
  • oruga - Vue.js に CSS フレームワークを必要としない UI コンポーネント
  • Wave UI - Vue.js 用の新しい UI フレームワーク。明るい側面だけを備えたもの。☀️
  • element3 - element-ui に基づく Vue.js 3.0 の UI ツールキット
  • vuestic-ui - Vue.js 3.0 用のカスタマイズ可能な UI フレームワーク
  • Qui-max - Vue 3.x 用のウェブデザインシステム
  • Naive UI - TypeScript を使用し、カスタマイズ可能なテーマ、動作が速く、かなり興味深い Vue 3.x デザインシステム
  • Element Plus - Vue 3 の UI フレームワーク
  • AgnosticUI - React、Svelte、Angular にも対応するアクセシブルな Vue 3 コンポーネントプリミティブ!
  • Vexip UI - 高度にカスタマイズ可能なプロパティ値、TypeScript を使用、パフォーマンスは良好な Vue 3 UI ライブラリ
  • Vue USWDS - USWDS(米国ウェブデザインシステム)に基づく Vue.js の実装
  • Vuersatile Components - フォームの自己検証と SCSS フレームワークが統合された Vue 3 コンポーネのライブラリ
  • Prefect Design - Vue 3、TypeScript および Tailwind を使用したコンポーネントライブラリ
  • Stellar UI - Vue 3 用の完全にスタイル化され、カスタマイズ可能なコンポーネント
  • Reka UI - Vue 3 で高品質なデザインシステムやウェブアプリを構築するための、未スタイル化かつアクセシブルな UI プリミティブを備えたオープンソースライブラリ(以前は Radix Vue)
  • shadcn-vue - 非公式かつコミュニティが中心となって開発された、shadcn/uiのVue版(Reka UIとTailwind CSSで構築された再利用可能なコンポーネントを含む)
  • BoldKit - Vue 3 および Nuxt 用のネオブリュタリズムコンポーネントライブラリ。55以上のコンポーネント、10のチャートタイプ、64のSVG形状、17のアニメーション付きASCII形状を備えている。Reka UI に基づき、shadcn-vue CLI と互換性がある
  • Inspira UI - Vue、Nuxt、Tailwind CSS を使用して、すばらしいアニメーションインターフェースを簡単に構築できるオープンソースコンポーネント
  • flowbite-vue - Tailwind CSS をベースにした Vue コンポーネントライブラリ
  • Maz-UI - Vue 3 および Nuxt 3 および 4 用の軽量かつ効率的なライブラリ。50以上のコンポーネント、テーマ設定、i18n および便利なプラグインとコマンドを備えている
  • @oneflowui/ui - Vue 3 + TypeScript によるタスク管理ビュー用コンポーネントライブラリ。テーブル、カンバン、ギャンツタイムライン、ギャラリー、AIチャット、ダッシュボードチャート、富テキストエディタ、MermaidChartなど、75以上のコンポーネントが標準で提供されている。
  • Nuxt UI - Tailwind CSS および Reka UI を使用して構築された、Vue および Nuxt 用の125以上のアクセシブルかつカスタマイズ可能なコンポーネント

モバイル

UI frameworks for mobile

  • Framework7-Vue - Framework7 と Vue を使って、フル機能の iOS および Android アプリを構築します。
  • vue-onsenui - HTML5 と JavaScript を使用したモバイルアプリ開発フレームワークおよび SDK。美しいかつ高性能なクロスプラットフォームモバイルアプリを構築します。Web Components をベースにし、Angular 1、2、React および Vue.js へのバインディングを提供します。
  • Ionic - モバイルアプリ開発フレームワーク
  • Native script - NativeScript を使ってネイティブモバイルアプリを構築
  • uni-app - Vue.js を使用したクロスプラットフォームフレームワーク

Set of components for mobile

  • vant - YouZan による Vue.js 2.0 モバイル UI。
  • cube-ui - Vue.js 2 で実装された素晴らしいモバイル UI ライブラリ。
  • mand-mobile - Vue.js 2 をベースにしたモバイル UI ツールキットで、金融シーンに特化。
  • NutUI - Vue.js 2.0 モバイルウェブ用 UI ツールキット

コンポーネント集

Set of components without layout system

  • Naive UI - Vue 3 のコンポーネントライブラリ。かなり充実しており、テーマカスタマイズ可能。TypeScript を使用し、高速。
  • keen-ui - Vue で作成された軽量かつ必須の UI コンポーネントのコレクション。Material Design にインスピレーションを受けています。
  • uiv - Vue2 で実装された Bootstrap3 コンポーネント。
  • Essential JS 2 for Vue - 45個以上のフル機能 Vue.js コンポーネント。データグリッド、チャート、スケジューラ、ダイアグラムなど、さまざまなコンポーネントを含む。
  • jqwidgets - Material Design テーマを備えた 70個以上の Vue.js 2.、UI コンポーネント。
  • Kendo UI for Vue – Over 70 UI components, including a Grid, built for business applications. Fully responsive with support for several Design Languages including Material Design and Bootstrap.
  • element-pro-components A component library for Vue 3 base on element-plus
  • TW Elemetns for Vue - Tailwind CSS との Vue.js インテグレーション — 無料かつオープンソースの UI キット
  • Origin UI Vue - Tailwind CSS と Vue で構築された美しい UI コンポーネント
  • @todovue/tv-ui - Vue 3向けのカスタマイズ可能でアクセシビリティを最優先したUIコンポーネントライブラリ。 Docs

管理画面テンプレート

Set of admin template

  • Vue Material Admin - Vueマテリアルデザインのアドミンテンプレート Online Demo
  • dashboard - vue.jsに基づくダッシュボードのフレームワーク。vuejs/vue-cli 4.xで作成された Online Demo
  • vue-pro-sidebar : A responsive template starter with the ecosystem configuration (vue-router, vuex), this boilerplate allows you to choose your preferred colors. Live demo
  • vuestic-admin - Vue 3とvuestic-uiを使用して構築されたVueアドミンダッシュボード
  • Materio-vuetify-vuejs-admin-template-free - プロダクション用に丁寧に設計された、最も包括的なVuetify Vuejsアドミンテンプレート。 Live demo
  • Tailmin - Vue.jsとTailwind CSSで構築されたアドミンダッシュボード。 Live demo
  • Admin One Vue 3 Tailwind dashboard - Vue.js 3 と Tailwind CSS のアドミンテンプレート(ダークモード対応)
  • Mosaic - Vue Admin TailwindCSS template - すべての機能を備えた Tailwind CSS アドミンダッシュボードテンプレート。
  • vue-admin-box - vue3とelement-plusに基づくアドミンテンプレート。 Live demo
  • argon-dashboard-vue3 - テンプレート、Element Plus および TailwindCSS 3、Vue3。
  • Dolphin Admin - Vue 3 + Vite + Naive UI + TypeScript + TailwindCSSに基づくオープンソース、無料、軽量、即時使用可能、国際化されたアドミンテンプレート。 Live demo
  • vue-vben-admin - 現代的なvueアドミン。Vue3、vite、TypeScriptに基づいています。速い! Live demo
  • Geeker-Admin - Vue3 + TypeScript + Element Plusに基づくオープンソースバックエンド管理フレームワークのセット。 Live demo
  • gin-vue-admin - 🚀Vite+Vue3+Gin開発基本プラットフォーム。 Live demo
  • adminforth - Vue + Node + Tailwind管理フレームワーク。 Live Demo
  • soybean-admin - Vue3、Vite5、TypeScript、Pinia、NaiveUI および UnoCSS をベースにした、シンプルで洗練された、美しいそして強力なアドミンテンプレート。
  • AirPower4T - Vue3、TypeScript、Element Plus、Viteに基づいた開発ライブラリで、バックエンドプラットフォーム機能(OOP Decoration)を提供し、開発をより効率化します。
  • YummyAdmin - 📈 Naive UI と TailwindCSS をベースにした無料 Vue 管理パネル。デザインが美しく、右から左へ対応(RTL)および多言語対応を備えた、かなり完成された製品。(MSW、Pinia、TS、UnoCss、Vite)

サーバーサイドレンダリング

  • Nuxt.js - 柔軟性のあるVue.jsフレームワーク。

静的サイトジェネレーター

  • VuePress - Vueを用いたミニマリズムの静的サイトジェネレーター
  • îles - インタラクティブな島のサイトジェネレーター
  • VitePress - Vite と Vue をベースにした静的サイトジェネレーター

その他

  • CabloyJS The Ultimate NodeJS Full Stack Business Development Platform, based on KoaJS & EggJS & VueJS & Framework7
  • DataFormsJS - Vue をテンプレートエンジンとして使用する、最小限のルーティングとウェブサービスフレームワーク
  • Vue-Low-Code - Quant-UX プロトタイプから VUE アプリを生成できる、Low Code ツールキット
  • vue-notion - 非公式の Notion レンダラー – Notion を Vue(例:Nuxt)のCMSとして使用
  • Fes.js - vue3をベースにした使いやすいフロントエンドアプリケーションフレームワーク

UIレイアウト

Layout for the overall / main view

  • vue-grid-layout - Vue.js 用のドラッグ&リサイズ可能なグリッドレイアウト
  • vue-masonry - Vue.js 用のマスンブロックレイアウトディレクティブ
  • vue-virtual-scroll-list - vue (2.x) コンポーネントがビッグデータを扱えるように、仮想スクロールリストを使用
  • vue-virtual-scroller - 大量の要素を効率的にスクロールできるコンポーネント(Vue 2.x)
  • dnd-grid - Vuejs グリッドにドラッグ&リサイズ可能なボックスを備えたコンポーネント
  • vue-fullpage.js - Vue.js 用の公式 fullPage.js コンポーネのためのコンポーネント
  • splitpanes - Vue JS で信頼性があり、シンプルでタッチ対応可能なパネル分割/リサイズコンポーネント
  • vue-simple-drawer - 小さなドレッカー・パネルでバウンスアニメーションを備え、ネスト対応およびテーマカスタマイズが可能。方向:左/右/上/下
  • fit-screen - スケールによる大画面適応を実現する、vueベースのコンポーネント
  • vue-virtual-waterfall - Vue 3.x 用の仮想ウェーバー(水の流れ)コンポーネント
  • vue-stack-grid - Vue 3 コンポーネントで、動的でレスポンシブなグリッドレイアウトの作成を簡単かつ効率的に可能にする
  • virtual-scroll - 高パフォーマンスの Vue 3 仮想スクロールライブラリ。大量のリストを簡単に処理。縦、横、両方向(グリッド)スクロールに対応。ResizeObserverによる動的アイテムサイズ、右から左へ(RTL)レイアウトの完全対応、内蔵アクセシビリティ(a11y)

UIコンポーネント

テーブル

Tables / data grids

  • ag-grid-vue - ag-Grid用Vueアダプタ
  • vue-grid - Vue.js向けフレキシブルなグリッドコンポーネント
  • vue-crud-x - 通常のページ、ソート、フィルタに加え、ネストされたCRUD、カスタムフォーム、フィルタ、操作を実現する、Vuetifyレイアウトを活用した拡張可能なCRUDコンポーネント
  • Vue Datatable - LaravelサーバーサイドロードとJSONテンプレート設定を活用したVueJSによるデータテーブル
  • vue-cheetah-grid - Vue.js用の高性能グリッドエンジン。キャンバス上で動作する。
  • vue-table-component - シンプルで明確なVueコンポーネント。テーブルの表示に特化。
  • @ioi-dev/vue-table - パフォーマンスを最優先としたVue 3データテーブル。バーチャライゼーション、選択、編集、CSV出力機能を備えている。
  • @lossendae/vue-table - Vue.js 2.x向けのシンプルなテーブルコンポーネント。ページネーションとソート可能な列を備える。
  • vueye-datatable - Vueyeデータテーブルは、Vue.js 2に基づくレスポンシブデータテーブルコンポーネントであり、データをページごとに整理することで、容易にナビゲートできるようにしている。
  • fancy-grid-vue - FancyGrid用Vueアダプタ
  • vue-quintable - Vue 2.xとBootstrap 4.xに基づくレスポンシブかつ高度にカスタマイズ可能なテーブル
  • vue-datagrid - 強力なウェブコンポーネントrevo-gridをラップしたVueグリッドコンポーネント。Excelのような豊かな編集と動作を提供。
  • vue-dataset - フィルタ、ページング、ソート機能を備えたデータセットを表示するためのVue.jsコンポーネントセット!
  • jz-gantt - 高性能なVue Ganttコンポーネント。高度にカスタマイズ可能なテーブル列、動的データ更新、進行バーの自由なドラッグ、ヘッダーの切り替えなど、さまざまな機能を備えている。
  • vue3-easy-data-table - Vuetify 2のデータテーブルコンポーネントのAPIおよびUIを参考にした、Vue.js 3.xで作成された使いやすいデータテーブルコンポーネント。
  • tanstack-table - 強力なテーブルおよびデータグリッドの構築用ヘッドレスUI。
  • vuetify-drilldown-table - Vuetify Drilldown Tableは、Vuetifyフレームワークのv-data-tableおよびv-data-table-serverの機能を強化する強力なコンポーネント。階層データをネスト形式で表示できる再帰的なテーブル構造を提供する。
  • vxe-table - Vueフォーム/テーブルソリューション。
  • hy-vue-gantt - Vue 3アプリケーション向けに強力で柔軟なGanttチャートコンポーネント。
  • Vue3 Pivottable – A Vue 3 port of the jQuery-based PivotTable.js.
  • GridSheet - フォーマルサポート、マルチシート参照、Vue3ラッパーを備えた高度にカスタマイズ可能なスプレッドシートエンジン(Preactコアに基づく)
  • @witqq/spreadsheet - ZXQのスプレッドシートエンジン。依存関係ゼロで、並べ替え、フィルタ、式、協働機能を含み、10万行以上を60fpsでレンダリング。
  • Jordium Gantt Vue3 - Vue3の甘いGanttチャートコンポーネント。リソースビュー、タスクの依存関係、プロジェクトスケジューリング機能を備えている。
  • gp-grid - TypeScript Vue3データグリッド。スロットベースの仮想スクロール、機能の支払い壁なし、実行時依存関係ゼロ。
  • TinyPivot - 軽量なVue3データグリッド。ピボットテーブル、チャート、CSV/Excelエクスポート、オプションのAIデータアナリストを備える。

通知

Toaster / snackbar — Notify the user with a modeless temporary little popup

  • VueToastify - 手軽な通知コンポーネント。
  • @kyvg/vue3-notification - Vue3通知ライブラリ
  • notivue - Vue3およびNuxt3向けの完全機能の通知システム。
  • Toastflow - 💡 ヘッドレストースト(通知)エンジン+Vue3レンダラー(TSファースト、CSSファーストテーマ、高度にカスタマイズ可能)。

ローダー

Loaders / spinners / progress bars — Let the user know that something is loading

  • epic-spinners - vue.js統合の簡単なCSSスピナーコレクション。
  • vue-ellipse-progress - 美しいアニメーション付き円形プログレスバーとローダーを作成するためのフレキシブルなVue.jsコンポーネント。
  • vue-default-page - Vue3.0プラグイン。v-loading、v-skeleton、v-error、v-emptyのカスタムディレクティブを内蔵。
  • vue-skeleton-content-loader - 軽量でアクセシブルなライブラリ。Vueアプリに自動的に適応する美しいアニメーション付きロードスケルトンを作成。
  • phantom-ui - リアルDOMを測定する構造認識型スケルトンローダーWebコンポーネント。Vue、React、Svelte、および純粋HTMLをサポート。
プログレスバー

A slim progress bar at the top of the page

  • vue-scroll-progress - シンプルなVue.jsプラグイン。ページスクロールプログレスバー。
  • vue-ins-progress-bar - インスタイル風のプログレスバー。一款インスタイル風のvue進度バーコンポーネト。
  • vue-next-progressbar - Vue3向けの軽量プログレスバー(1KB圧縮済)。
  • css-3d-progress - ウェブコンポーネントで書かれた3Dプログレスバー。Vue、React、Svelteをサポート。

ツールチップ

Tooltips / popovers

オーバーレイ

Overlay / modal / alert / dialog / lightbox / popup

  • vodal - アニメーション付きVueモーダル。
  • v-viewer - vue2およびvue3向けの画像閲覧コンポーネント。回転、スケーリング、ズームなどに対応。基盤は viewer.js
  • vuejs-dialog - 軽量で、Promiseベースのアラート、プロンプト、確認ダイアログ。
  • v-dialogs - シンプルで強力なダイアログ。モーダル、アラート、マスク、トーストモードを備えている。Vue2.xに基づく。
  • vue-sweetalert2 - スweatlaert2用のラッパー。TypeScript、Nuxt、SSRに対応
  • @kouts/vue-modal - W3CのWAI-ARIA Dialog(モーダル)セクションに則した、カスタマイズ可能でスタック可能かつ軽量のモーダルコンポーネント
  • vue-final-modal Tailwind-friendly, highly customizable, stackable modal component.
  • vue-it-bigger - Vue.js用のシンプルな画像/(YouTube)動画のライトボックスコンポーネント
  • vuejs-confirm-dialog - :speech_balloon: Vue.jsでモーダルダイアログを簡単に作成・再利用・プロミス化・チェーン構築できる方法
  • @kolirt/vue-modal - ⚡️ Vue3用シンプルなモーダルパッケージ
  • vuetify-resize-drawer - vuetify-resize-drawerコンポーネントはv-navigation-drawerの機能を拡張し、ユーザーがサイズを変更できるようにする

マーキー

  • vue3-marquee - Vue 3アプリケーション向けにシンプルかつレスポンス性のあるスライド表示コンポーネント。0の依存関係。

メニュー

  • vue-tree-navigation - Vue.js 2のツリーナビゲーション(vue-router対応)
  • v-selectmenu - Vue2向けシンプルで使いやすく、高度にカスタマイズ可能なメニュー解決策
  • vue-navigation-bar - Vueプロジェクト向けシンプルで美しく、使いやすいナビバー
  • vue-file-toolbar-menu - Vueアプリ用のUIファイル/ツールバーメニュー
  • v-dropdown-menu - vuejs用のカスタマイズ可能なドロップダウンメニュープラグイン。SSR対応
  • vue-bottom-sheet - Hammer.jsで作成されたVue.js用スワイプ可能なボトムシートコンポーネート
  • vue-awesome-sidebar - vue(3x)向け現代的で高速なサイドバーメニューコンポーネント。vue-router対応
  • vue-use-fixed-header - つまらない固定ヘッダーをスマートなものに変える
  • navpress - NavPressは静的ナビゲーションサイトを生成するCLIツール。設定ファイルを使ってナビゲーションサイトを迅速に構築できる
  • vue-my-dropdown - TypeScript対応のVue 3用カスタマイズ可能なドロップダウンコンポーネント

カルーセル

  • vue-easy-slider - Vue.jsのスライダーコンポーネント
  • vue-flux - 20のカッコイイトランジション付きの画像スライダー
  • @egjs/vue-flicking - Vue.js 2および3向けの信頼性・柔軟性・拡張性に優れたカーソルコンポーネント
  • swiper - 公式SwiperコンポーネのVue 3用。Tree-shaking対応、SSR対応、型付け、アクセシビリティなど多数の機能
  • vue-concise-carousel - Vueコンパクトカーサルで真のSSRを実現。Vue 2と3で動作します。
  • vue3-carousel - 高度にカスタマイズ可能で軽量なVue 3カーソルコンポーネント。次世代の素晴らしいプロジェクトに最適です.
  • vue-snap - 🌿 モダンで軽量なVue 3カーソル。CSS Scroll Snapで駆動されています.

チャート

  • vue-chartjs - Chart.js用のVue.jsラッパー.
  • vue-chartkick - 1行のVueで美しいJavaScriptチャートを作成します
  • vue-apexcharts - Vue.js向けApexChartsのコンポーネント。
  • vue-css-donut-chart - 純粋なCSSによるドーナツチャートを描く軽量Vueコンポーネント.
  • ZingChart-Vue - ZingChartが開発したVueコンポーネント。35以上のチャートタイプをサポートしています.
  • flowchart-vue - Vue.js用のフローチャートおよびフローチャート設計ツールコンポーネント.
  • vue-echarts - Apache ECharts™用のVue.jsコンポーネント.
  • vue-data-ui - Vue 3用のチャートライブラリ(60以上のコンポーネント)。公式サイト:https://vue-data-ui.graphieros.com/
  • vue-speedometer - d3を使用してスピードメーターのようなゲージを表示するVueコンポーネント.

時刻

Display time / date / age

  • v-idle - Vue.jsプラグインで無活動/非アクティブユーザーを検出します.
  • vue-timer-hook - React-timer-hookをインスピレーションとして作られたVue 3タイマーモジュール

カレンダー

Display non-editable events in a Calendar

  • vue-simple-calendar - FlexboxベースのVue月カレンダーコンポーネント。複数日イベント、ローカリゼーション、祝日エモジ、ドラッグ&ドロップをサポート。依存関係なし.
  • vue-functional-calendar - Vueベースの軽量かつ高性能カレンダーコンポーネント(日付選択、日付範囲)。
  • vue-cal - Vue JSフルカレンダー。依存関係なし、無駄な要素なし。🤘.
  • vue-spring-calendar - Vueベースのコンポーネントで、毎日のイベントを表示するフルカレンダー機能を提供。the demo
  • vue-tailwind-datepicker - Tailwind CSS 3を用いたVue 3日付選択コンポーネド.
  • qalendar - Vue 3向けイベントカレンダーおよび日付選択コンポーネント.
  • schedule-x - マテリアルデザインのイベントカレンダー。カスタマイズ可能で、ライト・ダークモードおよび多言語対応をサポートしています.
  • vue-calendar - 完全に機能的なカスタマイズ可能なカレンダー日付選択コンポーネント。Vue 3向けで、内蔵のTailwind CSSサポートあり。スケジュールアプリ、イベントカレンダー、日付選択に最適です.

地図

  • vue-cesium - Vue 2.x & Vue 3.x向けのCesiumコンポーネント
  • vue3-openlayers - OpenLayersと連携するVue 3のコンポーネント
  • vue-mars3d - Vue 2.x向け3D地球可視化JavaScript開発プラットフォーム
  • vue-maplibre-gl - TypeScriptで記述されたMaplibre GL JSライブラリに囲まれたVue 3.xのラッパー。スタイル切り替えとフレームレート制御を含む。
  • @vue-leaflet/vue-leaflet - Leaflet (1.x)マップ向けのVue 3コンポーネント
  • @maxel01/vue-leaflet - Leaflet (2.x)マップ向けのVue 3コンポーネント
  • mapmetrics-gl - タイル、地名検索、ルート計算、検索を内蔵したMapbox GL JS互換のマッピングライブラリ
  • vue3-map-chart - 世界、大陸、国、カスタムマップに動的なデータを表示するVue 3コンポーネント

音声/動画

  • vue-audio-visual - Vue HTML5オーディオ可視化コンポーネント
  • vue-h5-audio-controls - Vue向けシンプルなh5音楽コントローラー
  • vue-use-sound - 音声効果を再生するVueのHook
  • Vue-Player - 軽量でカスタマイズ可能で実装が簡単なvueビデオプレイヤー

無限スクロール

  • @egjs/vue-infinitegrid - Vue.js 2向け、マスオブジェクトのようなレイアウトタイプに応じて無限のカード要素を配置するコンポーネント
  • virtua - ReactおよびVue向けのゼロ設定、高速で小型(約3kB)の仮想リストコンポーネント
  • vue-infinity - Vue 3向け使いやすい仮想リストコンポーネント。カスタマイズ可能なグリッドレイアウト、水平/垂直スクロール、スクロールフィット、シーク、SSRをサポート。

Markdown

  • @f3ve/vue-markdown-it - Vue3向けのmarkdown-itコンポーネント。使いやすく、完全に型付けされている。
  • Vue Markdown - Markdown文字列をレンダリングするvueコンポーネント。特定のノードタイプのカスタムレンダリングをサポートし、AIチャットストリームによりよく適応。
  • markdown-design - リアルタイムレンダリングを備えた、標準搭載のVue 3 Markdownコンポーネント。目次生成、全文検索なども備えている。
  • markstream-vue - Vue 3、Nuxt、VitePressのAIチャットUI向けのストリーミングMarkdownレンダラー。不完全なMarkdown、Mermaid、KaTeX、長文応答、ストリーミングコードブロックに対応。

PDF

  • vue-pdf-embed - Vue 2およびVue 3向けPDF埋め込みコンポーネント
  • @tato30/vue-pdf - Vue 3向けのPDF閲覧コンポーネント。 Demo
  • @jasy/vue - Vue 3コンポーネントとしてPDFを作成し、ブラウザ内でそのままレンダリング。ヘッドレスブラウザは不要。実際のレイアウト、ページネーション、テーブルをサポート。XRechnungおよびZUGFeRD電子請求書も標準搭載(Nuxtモジュールあり)

ツリー

  • sl-vue-tree - Vue.js用シンプルでカスタマイズ可能なドラッグ可能なツリーコンポーネント
  • vue-finder - 階層データを表示するための選択、フィルタ、ドラッグ&ドロップ機能付きコンポーネント

グラフ

  • vnodes - SVGのインタラクティブなグラフ、図解、ノードベースの視覚ツールを作成するための汎用コンポーネント
  • v-network-graph - Vue 3用のインタラクティブなSVGベースのネットワークグラフ可視化コンポーネント
  • coya - 図面描画ライブラリ(Vue3専用)
  • vue-skia - Skiaベースの2DグラフィックスVue3レンダリングライブラリ。Rustを基にソフトウェアレンダリングを実現しています
  • vue-flow - Vue3用のインタラクティブでカスタマイズ可能なグラフおよびフローチャートエディタ

ソーシャル共有

  • vue-share-modal - Vue 3用の純粋で軽量で美しいシェアモーダル
  • vue3-social-sharing - 主要なソーシャルネットワークでのリンク共有を可能にする、スタイルに依存しないVue 3プラグイン

QRコード

  • vue-qrcode-reader - QRコードの検出とデコードを行うためのVue.jsコンポーネントセット
  • vue3-qr-reader - Vue 3用のQRリーダーコンポーネント。vue-qrcode-readerをVue 3互換性にリファクタリング
  • qrcode.vue - QRコードを生成するVue.jsコンポーネのためのコンポーネント。Vue 2およびVue 3に対応しています

検索

  • reactivesearch-vue - Elasticsearchを用いたデータ駆動型アプリケーションの開発に必要なUIコンポーネント
  • vue-search-input - StorybookおよびGitHubのグローバル検索入力にインスパイアされたVue 3用の検索入力コンポーネント

その他

  • vue-kanban - 柔軟なドラッグ&ドロップによるカンバンボードコンポーネント
  • v-offline - Vueアプリケーションにおけるオフライン・オンラインイベントの検知(最小390b未満)をシンプルかつ軽量に実現
  • vue-connection-listener - Vueのイベントバスプラグイン(オンライン/オフライン変更を監視)
  • vue-prom - Vueのプロミスラッパーコンポーネント
  • vue-identify-network - ⚡️ユーザーが使用しているインターネットの種類を特定!
  • vue-command - 完全に動作するVue.js用のテルミナルエミュレーター
  • vue-fixed-header - TypeScriptで書かれたVue.js用シンプルかつクロスブラウザ対応の固定ヘッダーコンポーネント
  • tsParticles - Javascriptライブラリで簡単に高設定可能かつインタラクティブな粒子アニメーションを作成
  • vue-image-zoomer - Vue.js 2および3向けの、タッチデバイスでも動作する画像ズームコンポーネント
  • vue-advanced-chat - ファイル、画像、動画、音声、エモジ、カスタムアクションなど、豊富な機能と完全にカスタマイズ可能なチャットルームコンポーネント
  • vue-word-highlighter - Vue 2およびVue 3向けのワードハイライトライブラリ
  • vue3-emoji-picker - Vue3向けシンプルかつ強力なエモジピッカー
  • vue-web-terminal - 💻 Vue2およびVue3向けに機能豊かで強力なウェブターミナルプラグイン(機能的なウェブコマンドラインターミナルプラグイン)
  • vite-plugin-vue-preview - vite用のコードプレビュープラグイン(もちろん、コンポーネントを別途使用することも可能です)
  • @kolirt/vue-web3-auth - 💎 WalletConnect v2およびwagmiをベースにしたVue3アプリ向けWeb3認証
  • zoom-image - ウェブ上で画像をズームする、シンプルで強力なフレームワークに依存しないライブラリ
  • vue-wheel-spinner - シンプルでカスタマイズ可能な輪切り型ランダム選択コンポーネント。 See Demo
  • vue-progress-circle - vue3向けの円形プログレスバーコンポーネント
  • vue-awesome-button - Vue 3Dボタンコンポーネント。進行状態、ソーシャルシェア、テーマ、アニメーション遷移をサポート
  • vuehex - Vue 3向けの高速かつバーチャル化されたヘキサデシマルビューとエディタ。バイナリデータの表示と編集が可能。 Demo
  • vue3-icon-picker Icon picker component for Vue 3.
  • custom-highlight - 要素内の任意のテキストをCSSカスタムハイライトAPIでスタイル設定するためのVueディレクティブ。 Docs

タブ

  • vue-lumino - Vue.jsとJupyter Lumino(PhosphorJS)を統合し、イベントリスナーとVueの反応システムを介してDOMおよびVDOMを連携するコンポーネント
  • vue3-tabor - 豊富なAPIを備えたVue 3用タブコンポーネント。keep-aliveおよびiframe統合をサポート

フォーム

Let the user create & edit data

電話番号入力フォーマッター
  • vue-tel-input - Vueで国際的な電話番号入力フォーム。
ピッカー
  • vue-scroll-picker - Vue 2.x向けスクロールピッカーコンポーネント。マウス(もしくはホイール)およびタッチのすべてのジェスチャーをサポート
  • vue-roller-picker - vue3向けロールデザインのセレクタコンポーネント
  • vue-smooth-picker - Vue 3向けのスムーズピッカー(iOSのネイティブdatetimeピッカーに似たもの)
ジェネレーター
  • form-create - 動的レンダリング、データ収集、バリデーション、提出機能を備えたフォームビルダー。JSONデータをサポート
  • vue3-otp-input - Vue 3.xおよびVue Composition APIを用いて構築された、完全にカスタマイズ可能なワンタイムパスワード(OTP)入力コンポーネント
  • Vueform - (おそらく) Vue.js向け最も包括的なフォームビルダー Online Demo
  • Everright-formEditor - 視覚的なドラッグ&ドロップによる低コードフォームエディタ
日付ピッカー

Date / datetime / time Picker

  • VCalendar Very customizable and powerful calendar/datepicker component with many features and good documentation.
  • vue-datepicker - ZXQのクリーンでレスポンスの良い日付選択肢。Material DesignスタイルでVuejs 2.x用。日付/月/四半期選択、日付範囲選択:新機能
  • vue-timepicker - Vue 3向け軽量かつカスタマイズ可能なタイムピッカー。TypeScript対応。単一選択/範囲選択、複数フォーマット、簡単なスタイル設定、バリデーションなどに対応
  • vue-month-spinner-picker - iOS風ドラムロール月選択ピッカー(Vue 3用)。インエリタススクロール、ボトムシートモーダル、最小/最大制限、i18nおよびCSS変数によるテーマ設定。依存関係なし
選択
  • vue-select - jQueryのオーバーヘッドを一切無くした、Select2に類似した機能を備えたネイティブVue.jsコンポーネント
  • vue-multiselect - Vue.js用のユニバーサル選択/マルチ選択/タグ付けコンポーネント
  • v-region - シンプルな地域選択コンポーネント。中国の行政区分データを提供
  • v-selectpage - Vue2向け強力な選択コンポーネント。リストまたはテーブルビューのページネーション、タグによる複数選択、i18nおよびサーバー側リソース対応
  • vue-cool-select - Bootstrap / Material Designテーマ。スロット、自動補完、イベント、バリデーションなどに対応
  • vue-select-sides - Vue.jsで2側データを選択するためのコンポーネント
  • @vueform/multiselect - Vue 3向けマルチ選択コンポンエント。単一選択、マルチ選択、タグ付けオプションを提供
  • vue3-select-component - Vue 3 Selectコンポーネント。単一選択およびマルチ選択に対応。TypeScriptによる最適なUXサポート、簡単なスタイル設定、スロットなど。約4.4KB
  • vue-superselect - ヘッドレス、アクセシブル、TypeScript中心の選択/コマボックスコンポーネント(Vue 3用)。ダブルコンポジットコンポーネントおよびコマポジブルAPIを備えている
ドラッグ&ドロップ
  • Vue DnD Kit - Vue 3向け軽量かつパフォーマンスの高いドラッグ&ドロップツールキット。コマポジブルAPI、キーボードナビゲーション、アクセシビリティサポート、高度なカスタマイズオプションを提供。あらゆるケースおよびタッチデバイスに対応。React DnD Kitを参考にした
  • vuedraggable-plus - Vue.jsでドラッグ&ドロップソートモジュールを提供するコンポーネント。Vue>=v3またはVue>=2.7に対応。Sortable.jsに基づく
  • vue-draggable-resizable - Vue2向けドラッグ可能かつリサイズ可能な要素を提供するコンポーネント
  • vue3-dnd - React DnDのComposition API実装。ソート可能および自由にドラッグ可能な要素をComposition APIで使用可能。Vue2およびVue3に対応
  • sortablejs-vue3 - Vue 3向け、SortableJSを薄いラッパーとして提供するコンポーネント
  • vue-fluid-dnd - Vue 3向けドラッグ&ドロップ、ソート可能、依存関係のないライブラリ。魅力的なアニメーションと、Vueコマポジブルを用いた使いやすいAPIを提供
型選択

Let the user select a tag / something while typing

  • v-image :camera: Tiny little component for input type=file (< 1kb, gzipped)
カラーピッカー
  • radial-color-picker - サイズ、アクセシビリティ、パフォーマンスに重点を置いたシンプルなカラーピッカー
  • vue-color-input – Vue 3 color picker component whose goal is to replace <input type="color">
  • vuetify-color-field - Vuetify Color FieldはVuetifyのVTextFieldカラーピッカーコンポーネント
スイッチ

Switch / on/off toggle / checkbox

  • vue-toggles - 高度にカスタマイズ可能でアクセスしやすいトグルコンポーネント
  • vue-collapsed - Vue 3におけるCSSの高さ遷移(任意からauto、および逆)。アコーディオン対応。
  • vue-enhanced-check - 強化されたチェックボックス/ラジオ入力+トグルコンポーネント(Vue 3用)
マスク入力
  • vue-r-mask - JavaScriptの正規表現に類似したテンプレートを持つディレクティブ。
  • vue-currency-input - Vue.js用の通貨形式の数字入力が容易なコンポーネント。
  • vue-input-facade - Vueに特化した軽量かつ依存関係のない入力マスクライブラリ。元は有名な_vue-text-mask_のフォークだが、その後積極的に維持され、多くの改善が加えられている。
リッチテキスト編集
  • vue-froala-wysiwyg - Froala WYSIWYG HTMLエディタの公式VueJSプラグイン。
  • vue-trix - Vue.js用のシンプルかつ軽量なTrix富テキストエディタ
  • tiptap - Vue.js用のレンダリングなしで拡張可能な富テキストエディタ
  • ckeditor5-vue - Vue.js用の公式CKEditor 5富テキ連エディタコンポーネント。
  • vue-quilly - 🪶 Tiny Vue 3コンポーネント。Quill v2ベースのWYSIWYGエディタを作成するのに役立つ。
画像操作

Edit images

  • vue-cropper - vue2.0用の画像切り抜きプラグイン
  • vue-croppie - もう一つの画像カッター
  • vue-advanced-cropper - 高度なカッターで、ほぼどんなカッターでも作成できるようになります
  • vue-img-cutter - Vueプラグインによる画像切り取りツール。使い勝手が非常に良い。
  • vue-picture-cropper - Vue 3用のシンプルで使いやすい画像切り抜きコンポーネント。
  • vue-polygon-cropper - 多角形形状で画像を切り抜くためのシンプルなコンポーネント。 Demo

Display images

  • TwicPics - imgおよびvideoタグを置き換えるコンポーネント。Lazy Loading、CLS最適化、プログレッシブロードが標準で実装され、メディア最適化および操作を可能にする。
  • hevue-img-preview - Vue 2およびVue 3向けの画像プレビュー。モバイルおよびデスクトップに対応。 (demo)
ファイルアップロード
  • vue-upload-component - Vueアップロードコンポーネント。複数ファイルアップロード、ディレクトリアップロード、ドラッグアップロード、ディレクトリをドラッグ。Vue >= 2.0に対応。
コンテキストメニュー
その他
  • vue-poll - Vue.js用の投票コンポーネント
  • vue-diagrams - vue.js用の図解コンポーネント。React-diagramsを参考にした。
  • vue-simple-password-meter - 依存関係のない軽量パスワード強度メーター
  • v-use-places-autocomplete - 📍 Google Maps Places Autocomplete 用の Vue コンポジブル
  • vuetify-inline-fields - Vuetify インラインフィールドコンポーネントライブラリは、アプリケーション内に洗練された効率的なインラインフォームフィールドを構築するために再利用可能なUIコンポーネントを豊富に提供しています
  • vue-integer-plusminus - vue3用の整数入力コンポーネント。増減ボタン付きでスピンボタンとして利用可能。キーボード操作に対応
ウィザード
  • vue-stepper-component - Vuex対応で完全にカスタマイズ可能なステッパーコンポーネント。ゼロ依存ライブラリ
  • vue3-form-wizard - vue3ベースのコンポーネント。外部依存なしでタブウィザードの管理を簡素化

Canvas

  • vue-konva - VueとCanvasを用いたJavaScriptライブラリ。複雑なキャンバスグラフィックをVueで描画
  • vue3-signature - Vue 3用の電子署名コンポーネント

リンクプレビュー

  • link-prevue - リンクプレビューを生成するための柔軟なコンポーネント。

ツアー

  • vue-stage-play - Vue3向けのステップバイステップガイドツアーコンポーネント。

UIユーティリティ

イベント処理

Handling of user events (scroll, click, key strike, …)

  • vue-global-events – A component to handle global events (like shortcuts) using Vue’s event modifiers
  • vue-tabevents – Easy communication between other opened tabs
  • vue-exit-intent - ✨ ユーザーの退出意図を扱うVueのコマース。

レスポンシブデザイン

  • vue-responsive: Vue.js(2.x) directive to hide/show HTML-elements with the Bootstrap 4, 3 or self defined breakpoints.

フォーム

  • Form Builder - VueおよびLaravelに基づくJSONテンプレートベースのフォームビルダー
  • vue-autofocus-directive - Vueの自動フォーカスディレクティブ
  • FormKit - Vue 3フォーム開発。10倍速。フォーム入力、バリデーション、送信、エラー処理、生成、アクセシビリティ、テーマ設定など
  • vrf - 宣言型かつスケーラブルなUIに依存しないマーカーベースのVueフォーム
  • tracked-instance - 大規模フォームの構築とすべての変更の追跡
  • Vorm - ゼロ依存かつフルスロット制御を備えた、スキーマ駆動型かつ完全にバリデーションされたVue 3フォームエンジン
  • VueFormify - Vue 3で強力で型安全なフォームを構築
  • Enforma - UIに依存せず、スキーマ対応のフォームライブラリ。30以上の内蔵バリデーションルール。Vuetify、PrimeVue、Quasar向けUIプレセット
  • piying-view - フロントエンドフォームソリューション。型安全。Vue 3
  • Formisch - パフォーマンス、型安全、バンドルサイズに注目したフォームライブラリ
バリデーション
  • vee-validate - シンプルなVue.js入力バリデーションプラグイン
  • vuelidate - シンプルで軽量なモデルベースバリデーション。Vue.js用
  • FormVuelar - サーバー側バリデーションを意識したVueフォームコンポーネント
  • vue-final-validate - Vue開発経験から生まれたバリデーションソリューション、ネストや非同期もサポート。
  • @vuito/vue - シンプルで軽量、同質的かつテンプレートベースのバリデーションライブラリ。
  • vest - 🦺 ユニットテストにインスパイアされた、宣言型フォームバリデーションフレームワーク。
  • vorms - Vue Form Validate と Composition API。
  • regle - ✅ Vue.js 用のヘッドレスフォームバリデーションライブラリ。
  • validation-composable - ✅ Vue用の軽量バリデーション — 40行のコードだけ。
  • vue-uform - Vue 3用のコンポーネント中心、未スタイル、柔軟なフォームバリデーションライブラリ。
  • validup - 反応性フォーム、グループ、構造化問題に対するパスベースのバリデーションを提供するVue 3のコマース(@validup/vue
  • NotForm - ヘッドレスでコンポジブルなVue.jsフォームバリデーション。UIとスキーマ(Zod、Valibot、ArkType、またはStandard-Schemaに準拠する任意のバリデータ)を自前で提供。

リサイズ

  • vue-not-visible - VueでDOMから削除するディレクティブ(v-ifのように、画面サイズがブレークポイント以下の場合に要素を非表示)

スクロール

Virtual scrollbar

  • vuescroll - Vue.jsに基づくスクロールプラグインで、PCとモバイルでのスクロールを統一。

Detect when components enter viewport

  • vue-use-active-scroll - PCおよびモバイルでリンクをハイライトするVue 3メニュー/サイドバー対応。

ルーティング

遅延読み込み

  • vue-lazy - Intersection APIに基づく軽量画像/写真のlazyload。
  • vue3-lazyload - vue 3アプリケーションにおける画像のlazyload用Vueモジュール。

ページネーション

  • vue-paginate-al - Vue paginate でデータを返す。
  • vue-tiny-pagination - 小さなページネーションを作成するVueコンポーネント。
  • laravel-vue-pagination - Laravel ページネーションを Bootstrap と連携させる Vue.js ページネーションコンポーネント
  • vue-lpage - 低レベルの Vue ページネーションコンポーネント
  • v-page - Vue2.x をベースにしたシンプルなページネーションバー(長さメニュー、i18n対応)
  • vue-use-paginator - Vue 3 の use-hook を使ってデータを反応的にページネートし、ページネーションボタンを配置。完全にレンダリングなし。
  • vueginate - Vue 3 用のシンプルなページネーションコンポーネント
  • vue-pagination - フレームワークに統合可能なスタイルなしページネーション(コマース可能)
  • @nabaraj/vue-pagination - TypeScript タイプとカスタマイズ可能なスロットを備えた軽量な Vue 3 ページネーションコンポーネント

アニメーション

  • vue-animate - Vue.js 用の Animate.css のポート。Vue の内蔵トランジションと併用可能。
  • v-odometer - 数値のトランジションをスムーズに。このライブラリを使用してアプリケーションにスムーズなアニメーションを実現(数値のみ適用)。
  • vue-slide-up-down Like jQuery’s slideUp / slideDown, but for Vue!
  • vue-kinesis A set of components to create interactive animations
  • vue3-lottie A component for importing and displaying Lottie animations in Vue 3
  • @morev/vue-transitions Transitions library for Vue 2 and 3 with no CSS needed
  • @formkit/auto-animate Add motion to your apps with a single line of code
  • blottie Lottie component for Vue 3
  • @lottiefiles/dotlottie-vue Official LottieFiles Vue component supporting the .lottie format (75% smaller files); convert and preview with IconKing
  • vue-countup-v3 A Vue 3 Component for animation counting.
  • timered-counter A counter web component with smooth animations
  • ssgoi - スプリング物理に基づくネイティブアプリ風のページトランジション、モバイルでは60fps、SSR対応、すべての現代ブラウザで動作

メタタグ

Manage meta information in the document head

ポータル

Move a DOM node to a target DOM node

  • Official: Vue Teleport
  • portal-vue - DOMのどこかにあなたのコンポーネントのテンプレートをレンダリングできるVueプラグイン(仮想DOMレベルで動作し、DOM内のノードを移動しない)

SVG

  • vue-svgicon - SVGアイコンコンポーネントを作成するツール。(Vue 2.x)
  • vue-inline-svg - VueコンポーネントがSVGソースを動的にインラインで読み込み、CSSまたはJSでスタイルを操作可能。 (vue 2.x, vue 3.x) <svg>
  • lucide-motion-vue - Vue 3向けの516のアニメーション付きLucideアイコン。エргonomicなホバーやタップ、ビュー領域トリガーと、コンポジブル<AnimateIcon>ラッパーを備え、Tree-shakableで、1つのチャンクごとに1アイコン。TypeScriptベース。 (vue 3.x)
  • GeoIcons - すべての国、領土、世界地域の地図アイコンを、Tree-shakable Vue 3 コンポーネントとして提供。

その他

  • v-github-icon - Vue コンポーネのデモの右/左隅に「that」の小さな GitHub アイコンを簡単に追加できる 🤙

WebGL

  • VueGL - three.js を使って Vue.js で反応的に3Dグラフィックスを描画するコンポーネント
  • TresJs - Vue コンポーネントを用いた宣言型 ThreeJS

全画面表示

  • vue-fullscreen - フルスクリーンをサポートするシンプルなVueコンポーネント(Vue2およびVue3に対応)

印刷

  • vue-to-print - ブラウザ上でVue3コンポーネントをプリントできる。Chrome、Safari、Firefox、EDGEに対応。

ユーティリティ

Utilities not directly related to the UI

  • vueuse - Vue 2.x および Vue 3.x に適用可能な基本的な Vue コンポジションAPIユーティリティのコレクション
  • vue-concurrency - Vue およびコンポジションAPI用の非同期処理の封じ込みと並列処理の管理用ライブラリ
  • vue-macros - Vue へのマクロやシンタックスシュガーの拡張と探索。
  • unplugin-vue-components - 📲 Vue 用のオンデマンドコンポーネント自動インポート
  • unplugin-auto-import - Vite、Webpack、Rollup でオンデマンドで Vue API を自動インポート
  • vue3-websocket - Zodで入力されたWebSocketデータを検証します

TypeScript

  • vue-facing-decorator - Vue3 TypeScriptクラスコンポーネントのデコレーター。Vue2における vue-property-decorator に類似。

HTTPリクエスト

Retrieve data over HTTP

  • vue-api-query - REST API向けリクエストをシンプルかつ美しく構築する方法
  • vue-request - ⚡️ Vue 3のコマースでデータ取得を実現。SWR、ポーリング、エラー再試行、キャッシュリクエスト、ページネーション、その他便利な機能をサポート
  • swrv - Vue向けのStale-while-revalidateデータ取得
  • vue-vroom - REST API向けプラグイン。最小設定で型安全なストアとモックAPIを迅速に生成します
  • tanstack-query - 強力な非同期状態管理
  • @stitchapi/vue - ストリーミング優先のStitchAPIバインディング:型付き、検証済み useStitch / useStitchStream コンポジブルで、レスポンスのデルタが到着するたびにリレンダリング。

国際化

Internationalization / L10n / localization / translation

  • vscode-vue-i18n-ally - VSCodeでより良いVue-i18n体験を提供する拡張機能
  • v-intl - 素晴らしいVue 3アプリにグローバルなIntlラッパーを提供 🔉
  • v-google-translate - Google翻訳を活用したVue.jsアプリの国際化を行うコンポーネント
  • fluent-vue - Vue.js(2および3)向け国際化プラグイン。Fluent.js(JavaScript実装のProject Fluent)とのVue.js統合
  • vue-next-i18n - Vue 3向け軽量な国際化プラグイン
  • tolgee/vue - Vue 3アプリ開発中にユーザーが直接翻訳できるウェブベースのローカリゼーションツール
  • intlify/vue-i18n-next - Vue 3向けVue I18n
  • vue-intlayer - vue 3向けIntlayer国際化ソリューション
  • vue-tiny-translation - 非常に軽量(0.32KB)なVue3用反応型翻訳プラグイン。Demo
  • Loccy - VS CodeベースのエディタでVue-i18nを簡単に管理。スマートAI翻訳とキー提案を備えています

カスタムイベント

永続化

LocalStorage etc.

状態管理

  • pinia - 🍍 コンポジションAPIを活用したVue向け、直感的で型安全かつ軽量かつ柔軟なストア。DevTools対応
  • effector — Fast and powerful reactive state manager. Effector lets you write simple, fast and type safe code and manage reactive state with ease.
  • v-bucket - 📦 Vue 3.0向け高速・シンプル・軽量な状態管理。コンポジションAPIを活用し、Vuexにインスパイアされたもの
  • vue-datatable-url-sync - データテーブルのオプションとフィルタをURLと同期し、リフレッシュやナビゲーション後もユーザーの好みを維持
  • harlem - シンプルで中立的で軽量かつ拡張可能なVue 3向け状態管理
  • exome - 深層ネストされた状態を扱うシンプルなプロキシベースの状態マネージャー
  • Stan - 最小限の、原子的なステートマネージャー(フレームワークに依存しない、Vueバインディング付き)
MobX
  • mobx-vue-lite - MobXベースのComposition APIに基づいた軽量Vue3バインディング。
Pinia
  • pinia-xstate - あなたのxstateステートマシンをグローバルなPiniaストアに配置してください
  • pinia-orm - Piniaストアへのオブジェクト・リレーションマッピングアクセスを可能にするPiniaプラグイン。 🍍
  • pinia-persistedstate-2 - ページのリロード間でPiniaのステートを保持し、再読み込みします
  • @tauri-store/pinia - Tauri用の持続的なPiniaストア
  • pinia-plugin-unstorage - unjs/unstorageを用いたPiniaの最適な保存プラグイン
  • @erlihs/pinia-plugin-storage - 包括的なステート保存と同期でありながら、シンプルにできるように設計されています
認証/認可
  • vue-auth-href - 保護されたルートスキーマの下にあるファイルをダウンロードできるVueJSディレクティブ
Vuexユーティリティ
  • jsonapi-vuex - JSONAPI APIとVuexストアを組み合わせ、クライアント側でレコードを再構成・正規化します
  • vuex-masked-modules - Vuexプラグインでモジュールのデータ構造をlocalStorageに保存し、データをマスクまたは暗号化することで探索が困難にします。Vue 3およびVuex 4向けに設計されています

GraphQL

  • vue-apollo - VueJSにおけるApollo/GraphQL統合。

コードスタイル

Improve readability of code

CSS

  • fela-vue - 柔軟性とチームワークを両立したVue用CSS-IN-JSミックスイン。

アセット管理

Utilities for building / compiling / bundling / loading assets

  • vue-loader - Vue.jsコンポーネント用のWebpackローダー
  • vue-jsx-hot-loader - JSXレンダリング関数を持つVue.jsコンポーネントにHMRを有効化します
  • vite-svg-loader - SVGファイルをVueコンポーネ及として読み込むViteプラグイン
  • vite-plugin-svg-sfc Vite plugin to load SVG file as vue SFC, supports HMR &

ページナビゲーション <a id="page-navigation"></a>

  • vue-page-stack - Vue SPAのルーティングとナビゲーション。Vue単ページアプリケーションのナビゲーションマネージャー

その他

  • vue-live - React-liveをインスピレーションとして作ったコンポーネントをデモするためのコンポーネント
  • vue-safe-html - Vue.jsディレクティブで動的にクリーンされたHTMLをレンダリングします
  • @skirtle/vue-vnode-utils - Vue 3のレンダリング関数内でスロットVNodeを扱うためのヘルパー関数

WebSocket

決済

Payment utilities.

Stripe
  • vue-stripe-checkout - ストリートのチェックアウトに必要なシンプルなvueプラグイン
  • vue-stripe-js - Stripe.js用のVue 3コンポーネント

統合

Integrate with services or other frameworks

  • vue-recaptcha - Vue.js 用 Google reCAPTCHA コンポーネント
  • vuefire - Vue.js 用公式 Firebase バインディング
  • vue-postgrest - postgREST 用 Vue.js インテグレーション:柔軟で強力で使いやすい
  • vue-tweet - Vue 3 コンポーネントで、ツイート ID を指定するだけでアプリ内にツイートを埋め込む
  • vue-tg - Vue 3 用 Telegram Web Apps インテグレーション
  • @rollgate/sdk-vue - Vue3の機能フラグSDK(コマンド、段階的リリース、A/Bテスト、リアルタイム更新をサポート)。バックエンド:Rollgate
  • @agentskit/vue - Vue 3 の可変コンポーネントおよびヘッドレスチャットコンポーネのAIエージェント構築用、ストリーミング、ツール、記憶、RAGをサポート

Vue CLIプラグイン

Google Analytics
  • vue-gtag - Vue用グローバルサイトタグプラグイン

開発ツール

  • Storybook - UI開発環境。v3.2以降で動作。
  • Font Awesome Finder - Chrome拡張機能で、Font Awesomeのアイコンを検索・プレビュー・選択し、選択したアイコンのHTMLコードおよびUnicodeをクリップボードにコピー
  • Roundtable - ゼロ設定のMCPサーバーで、複数のAIアシスタント(Claude Code、Cursor、GPT-4など)をVue.jsプロジェクトの開発フローに統合
  • Bit - プロジェクト間で vue コンポーネントを管理・再利用。ソースコードを変更せずに、任意のプロジェクトからコンポーネントを分離・共有し、カスタムコレクションを整理し、他のプロジェクトにインストール可能。
  • Vue Mess Detector - Vue.jsおよびNuxt.jsプロジェクトにおけるコードスモールやベストプラクティス違反を検出する静的コード分析ツール
  • Vue Log Arsenal - 軽量なVue 3プラグインで、デバッグを容易にするログディレクティブを提供
  • PocketMocker - フロントエンドアプリ用の視覚的、ブラウザベースのHTTPモックツール。fetch/XHRをインターセプトし、SmartMockルールをサポートし、遅延やエラーのシミュレーションを可能にし、Vueアプリ開発時に特に効果的

検査

Inspecting & debugging

  • vite-plugin-vue-inspector - ブラウザ内の要素をクリックすると、自動的にエディタソースコードにジャンプ
  • vue-flow-vis - コンポーネントレンダリングのリアルタイムモニタリングと反応依存関係の追跡

ドキュメント

Create documentation

  • Vuex CheatSheet - 完全なインタラクティブVuex API
  • vue-styleguidist - Vueコンポーネント向けスタイルガイド生成ツール(ライブスタイルガイド付き)
  • Vue Cheatsheet - あなたが一生使いたい唯一のVue cheatsheet
  • Heroshot - Vueコンポーネント統合とテーマ認識出力により、ドキュメントスクリーンショットを自動化

Browse documentation

  • Dash - macOS用オフラインAPIドキュメントブラウザ。Vue.jsドキュメントおよび200以上のフレームワークへの即時検索アクセスを提供

テスト

  • vue-hubble - VueでのUIテスト用に要素を選択するためのより良い方法
  • Vue Testing Library - DOM Testing Libraryに基づき、公式Vueテストユーティリティを構築した、シンプルで完全なテストツール。良いテスト習慣を促進する。
  • jest-serializer-vue-tjw - Jestスナップショットのフォーマット改善
  • vitest - Viteを基盤とした次世代テストフレームワーク

ソースコード編集

Text editor plugins

Vim
  • Vim Vue - Vue.jsコンポーネントのシンタックスハイライト。
Visual Studio Code
IntelliJ
Emacs

スキャフォールド

Scaffold / boilerplate / seed / starter kits / stack ensemble / Yeoman generator

  • ILUMINATY - Sanity CMSを統合した、Vue 3 + Viteによる編集サイト、ディレクトリ、イベント、ブログ向けテンプレート
  • Vite - 次世代フロントエンドツール。速い!
  • Create Vue
  • vuesion - Vuesionは、エンジニアとデザインの両面で現代的なベストプラクティスを採用し、プロダクトチームがより速く、より少ない悩みで開発できるブレークアウトブレインです。
  • ScaffoldHub.io - SQL、MongoDB、またはFirebase Firestoreデータベースを用いて、フル機能のVueアプリケーションを生成。
  • VuePlay - 数秒で生成される一時的なVueプレーヤー。迅速なテストが可能。
  • Mevn-CLI - MEVNスタックベースのアプリケーション向けの超高速セットアップ。
  • vue-enterprise-boilerplate - Vue CLI 3を使用した新しいVue SPAプロジェクト向け、常に進化し、強い意見を持つアーキテクチャと開発環境。
  • vue-starters-directory - VueJS向けの利用可能なスケルトンプロジェクトとスタートキットを検索。検索機能とGitHub統計が提供されます。
  • Vue3-SPA-starter-template - ルーター、Pinia、i18n、Stripe、イベントバス、SEOメタタグとスキーマタグ処理を含むスタートキット。
  • vue-x-platforms - Web、iOS、Android、Vision ProでVueが実行される。
  • mevn-boilerplate - ⭐️最も包括的なMEVNスタックブレインボード。⭐️ mongodb - express - vue 3 (管理画面) - nodejs - nuxt 3 (クライアント) ブレインボード (pinia, tiptap, slug, vuet及 vuexy など) 🎉
  • monorepo-template - 🗂️ pnpm、Nx、Vite、Tailwind CSS、Storybook、TypeScript、使用可能な共有ライブラリを備えたVue 3のモノリソプロジェクトテンプレート。

ユニバーサル

Render Vue application to HTML on the server and to the DOM in the browser

  • Vue.js/Nuxt.js full-featured boilerplate - vuejs/nuxtjsを用いて、高速かつ堅牢で柔軟なウェブアプリやサイトを構築するためのプロフェッショナルなアグリーチャンクフロントテンプレート。

デスクトップ

  • electron-vite-template - Vue 3、Vite、Electronを用いた現代的なデスクトップアプリケーションプロジェクトテンプレート。速い!
  • Vutron - Vite + Electron + Vue 3 + Vuetify + TypeScript向けのクイックスタートテンプレート。
  • electron-vite-vue - 本当にシンプルなElectron + Vite + Vueブレインボード。
  • MōBrowser - ウェブ技術を使ってデスクトップアプリを構築するためのフレームワーク。Vite + Vue + Quasar向けのテンプレートと基盤コードが含まれています。
  • sketch-to-vue - クラウド・コード・アンド・カーサー向けのAIスキル。Sketch MeaXure/MasterGoの設計ファイルのエクスポートを、ピクセル精度のVue 2/3コンポーネントに変換します。ダッシュボード/コクピット/大画面ページに特化しています:決定論的アセット解決、EChartsの自動検出、シーングラフ分析、および完全な消費確認。

事前レンダリング

  • vue-genesis - 🔥Vue SSRに基づくマイクロフロントエンド、マイクロサービス、軽量ソリューション🔥




CC0