vuetifyjs/vuetify

これは何？

主な機能

• 01Vueアプリケーション向けの、事前構築済みMaterial Designコンポーネント。
• 02SASS/SCSS変数、プリセット、ブループリントによるカスタマイズ。
• 03デフォルトでレスポンシブに対応し、幅320px以上の画面向けに設計。
• 04一貫性のあるカラーパレットを実現する組み込みテーマシステム。
• 05Viteと組み合わせた場合の自動Tree-shaking。
• 0642以上の言語に対応した国際化。

ユースケース

• Vueで管理ダッシュボードや社内業務アプリケーションを構築する。
• 統一感のあるMaterial Designのサイトを、レスポンシブ対応で作成する。
• 専用のデザインシステムを用意せずに、インターフェースをすばやく試作する。
• 既存のVue 3プロジェクトに、テーマ対応の多言語UIレイヤーを追加する。

クイックスタート

1. 1

   npmで新しいプロジェクトを作成

   npm create vuetify@latest
2. 2

   または、pnpmで新しいプロジェクトを作成

   pnpm create vuetify
3. 3

   または、yarnで新しいプロジェクトを作成

   yarn create vuetify

使う前に知っておきたいこと

• !ライセンスのメタデータはNOASSERTIONですが、READMEにはMITと記載されています。
• !Vuetify 2はサポート終了となっており、サポートされていません。

トピック

よくある質問

vuetify とは？

Vue向けのMaterial Design UIコンポーネントフレームワーク。Webアプリケーション構築に使える、手作りのレスポンシブなコンポーネントを提供します。 Vuetifyは、Material Designに沿った、手作りの豊富な事前構築済みコンポーネントを提供するVue向けUIコンポーネントライブラリです。デザインの専門知識がなくても開発者がアプリケーションのUI一式を構築できることを目指しており、幅広い用途に合わせてコンポーネントをカスタマイズできる充実したAPIを備えています。

vuetify は無料で使えますか？ライセンスは？

vuetify は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

vuetify は今もメンテナンスされていますか？

活発にメンテナンス中。vuetify の最終コミットは 2026年10月20日 です。

vuetify は何に使えますか？

Vueで管理ダッシュボードや社内業務アプリケーションを構築する。 統一感のあるMaterial Designのサイトを、レスポンシブ対応で作成する。 専用のデザインシステムを用意せずに、インターフェースをすばやく試作する。 既存のVue 3プロジェクトに、テーマ対応の多言語UIレイヤーを追加する。

vuetify のインストール方法は？

npmで新しいプロジェクトを作成: npm create vuetify@latest または、pnpmで新しいプロジェクトを作成: pnpm create vuetify または、yarnで新しいプロジェクトを作成: yarn create vuetify

vuetify はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/vuetifyjs/vuetify