概要
Vuetifyは、Vue向けのUIコンポーネント、レイアウト、テーマ機能をまとめたコンポーネントフレームワークです。フォーム、ナビゲーション、データ表示などの部品を共通の設計ルールで組み合わせ、レスポンシブな画面を構築できます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
UIコンポーネントとテーマを共通ルールで組み合わせる
多数のVueコンポーネントに加え、テーマ、色、既定値、Blueprintなどを使ってアプリ全体の見た目と振る舞いを揃えられます。
Viteで必要な部品を中心にビルドする
Vite向けの構成と自動Tree Shakingを使い、利用するコンポーネントを中心にバンドルを構成できます。
Vueで業務画面や管理画面を短期間で整えたい場合に
個別にUI部品を設計・実装する量を減らし、フォームや一覧、ナビゲーションを一貫したデザインで作りたいチームに向きます。
出典:[2]
Vuetify 2はEOL。導入時は世代を確認する
READMEはVuetify 2をEOLとしており、通常のセキュリティ修正も提供されません。既存システムの保守では利用中のメジャー版を確認し、新規導入では現行ドキュメントに沿って評価してください。
参考にした公式資料
- [1]vuetifyjs/vuetify repository(2026-09-21)
- [2]Vuetify README(2026-09-21)
- [3]Vuetify documentation(2026-09-21)
- [4]vuetify package(2026-09-21)
- [5]Vuetify MIT license(2026-09-21)
編集部からの補足
GitHub APIのライセンス判定は`NOASSERTION`ですが、リポジトリの`LICENSE.md`と`packages/vuetify/package.json`はMITを明記しています。現在のパッケージは4.2.1です。またREADMEではVuetify 2がEOLで、セキュリティ修正を含む通常サポート対象外と明記されています。
3ステップで試す
- 1
Vuetify 4プロジェクトを作成
公式のcreate-vuetifyを使い、プロジェクト名、TypeScript利用、依存関係のインストール方法を選択します。
npm create vuetify@latest - 2
生成したプロジェクトへ移動
作成時に指定したプロジェクト名へ移動します。ここでは公式ドキュメントの例と同じ名前を使っています。
cd vuetify-project - 3
Vite開発サーバーを起動
ブラウザでアプリを開き、Vuetifyのコンポーネント、テーマ、レスポンシブレイアウトを確認します。
npm run dev
成長
成長の推移 · 直近30日
41,044 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit(直近30日)
- 39
- Open PR
- 108
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Storybook91,112 Stars
共通タグ 4件 · 同じ言語
UIの状態をstoryとして保存し、開発・レビュー・ドキュメント・テストへ再利用するコンポーネント開発ツール。
TypeScript - Expo52,361 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
React Nativeを土台にAndroid・iOS・Webを一つのproject modelで開発し、Router/Modulesをまとめるuniversal app framework。
TypeScript - Vue Flow6,867 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Vue 3でノードとエッジを使ったフローチャートやノードエディタを構築するUIコンポーネント。ズーム、パン、ドラッグ、MiniMapなどを備える。
TypeScript - Vue 2212,485 Stars
共通タグ 3件 · 同じ言語
2023年末にEOLを迎え、Vue 3への移行案内を担う旧Vueリポジトリ。
TypeScript - Angular101,020 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
component・DI・routing・forms・SSR・CLIを一体化し、frontend architectureを統一するTypeScript web application platform。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。