Vuetify（ビューティファイ）とは？Vue 3での使い方・インストールを最新v4対応で解説

Vuetify（ビューティファイ）は、Vue.jsでマテリアルデザインのUIを短時間で構築できるコンポーネントフレームワークです。ボタンやデータテーブル、フォームといった部品があらかじめ用意され、CSSをほとんど書かずに一貫した見た目を実装できます。この記事では、読み方や料金といった基礎から、最新のVuetify 4（Vue 3.5以上が必須）のインストール、createVuetifyによる初期設定、コンポーネントとテーマ・色のカスタマイズ、Vueとの違いまでを、実際に動くコードで解説します。旧v2（Vue 2）向けのnew Vuetify()やSASSの$material-lightは現行では動かないため、まずバージョンの選び方から押さえます。

まとめ：Vuetifyの要点

• Vuetifyの読み方は「ビューティファイ」。Vue + beautify（美しくする）を組み合わせた名前で、Vue.js専用のマテリアルデザインUIライブラリです。
• 本体はMITライセンスの無料OSS。有料の「Vuetify One」はプレミアムテーマや支援特典を得たい人向けの任意サブスクで、フレームワークの利用に費用はかかりません。
• 新規開発はVuetify 4を選ぶ（2026年7月時点の最新は4.1.3）。Vue 3.5以上とVite環境が前提で、旧v2はVue 2のEOL（2023年12月31日）に伴い新規採用は避けます。
• 導入はnpm create vuetifyが最短。既存プロジェクトにはcreateVuetifyをプラグイン登録します。旧来のVue.use(Vuetify)／new Vuetify()はv3以降で廃止されています。

Vuetify（ビューティファイ）とは何か

Vuetifyは、Vue.jsアプリケーションにGoogleのマテリアルデザインを適用するためのUIコンポーネントフレームワークです。2016年に登場し、v-btn（ボタン）やv-data-table（データテーブル）、v-text-field（入力欄）といった部品を組み合わせるだけで、配色・余白・タイポグラフィが統一されたUIを構築できます。とくに管理画面や業務アプリのように、機能が多く一貫性が求められる画面で採用されています。

読み方と名前の由来

Vuetifyの読み方は「ビューティファイ」です。JavaScriptフレームワークの「Vue」に、beautify（美しくする）の語尾「-tify」を組み合わせた造語で、「Vueを美しくする」という意味合いを持ちます。日本語圏では一般に「ビューティファイ」と表記します（公式に定まった片仮名表記はありません）。

Vue.jsとVuetifyの違い

Vue.jsはUIを構築するためのJavaScriptフレームワーク本体で、データと画面を結び付ける仕組み（リアクティビティ）を提供します。一方Vuetifyは、そのVue.jsの上で動くUIコンポーネントの集合です。Vue単体では自分でHTMLとCSSを書いて作るボタンや表を、Vuetifyは既製部品として提供します。したがってVuetifyはVue.jsなしでは動作せず、Vueプロジェクトに追加して使う「見た目のライブラリ」と捉えると整理しやすくなります。

料金とライセンス

Vuetify本体はMITライセンスで公開された無料のオープンソースソフトウェアで、商用プロジェクトでも無償で利用できます。公式には「Vuetify One」という有料サブスクリプションがありますが、これはプレミアムテーマ、優先サポート、開発支援などの追加特典を得たい場合の任意課金です。フレームワークそのものを使うために費用は発生しません。

バージョンの選び方（v2・v3・v4）と対応Vueバージョン

Vuetifyはメジャーバージョンごとに対応するVueが異なり、これを取り違えるとインストールしても起動しません。Web上には旧v2（Vue 2）向けのコードが多く残っているため、最初にバージョンの対応関係を確認しておきます。

Vuetify 4は2026年初頭にメジャー公開され、その後もパッチ更新が続いています（最新は4.1.3）。ネイティブCSSの活用とMaterial Design 3への全面移行、コンポーネント単位でのスタイル正規化が特徴です。これから始めるなら最新のv4を選びます。既にVue 2でv2を使っている場合は、Vue 3への移行がv3/v4採用の前提となるため、まずVue本体のアップグレードを検討してください。旧v2のVue.use(Vuetify)やnew Vuetify()という初期化はv3以降では使えません。

Vue 3へのインストールと初期設定

Vuetify 4のインストールには、新規プロジェクトをまとめて用意する方法と、既存のVue 3プロジェクトへ追加する方法の2通りがあります。いずれもビルドツールはViteが前提で、Vue CLIは開発が終了しているため使いません。

npm create vuetifyで新規作成する

ゼロから始めるなら、公式のscaffoldingツールが最短です。次のコマンドを実行し、対話式のプロンプトでTypeScriptやルーターの有無を選ぶと、Vuetify入りのVite + Vue 3プロジェクトが生成されます。

npm create vuetify@latest

生成後はnpm installで依存を入れ、npm run devで開発サーバーが立ち上がります。この方法ではVuetifyのプラグイン登録やスタイル読み込みが最初から組み込まれているため、設定を手書きする必要がありません。

既存のVue 3プロジェクトへ追加する

すでにVue 3プロジェクトがある場合は、パッケージを追加してcreateVuetifyをプラグイン登録します。まず本体をインストールします。

npm install vuetify

次に、エントリーポイント（main.jsまたはmain.ts）でVuetifyを登録します。旧v2のVue.use(Vuetify)ではなく、createAppに対してcreateVuetify()の戻り値をuseで渡すのが現行の書き方です。

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import App from './App.vue'

const vuetify = createVuetify({ components, directives })

createApp(App).use(vuetify).mount('#app')

'vuetify/styles'の読み込みを忘れるとコンポーネントの見た目が崩れるため、スタイルのimportは必須です。アイコンを使う場合は、@mdi/fontなどのアイコンフォントをインストールしてCSSを読み込み、createVuetifyのicons: { defaultSet: 'mdi' }で使用セットを指定します。

主要コンポーネントの使い方

Vuetifyのコンポーネントはv-で始まるタグとしてテンプレートに書くだけで使えます。よく使う部品を押さえておくと、管理画面の大半はコードを組み合わせて構築できます。

ボタンとカード

ボタンはv-btn、カードはv-cardで表現します。color属性にテーマ色の名前を渡すと、配色が自動で適用されます。

<template>
  <v-btn color="primary">送信</v-btn>

  <v-card>
    <v-card-title>カードのタイトル</v-card-title>
    <v-card-text>本文をここに書きます。</v-card-text>
  </v-card>
</template>

フォームとデータテーブル

入力欄はv-text-field、選択肢はv-selectを使い、v-formで囲むと入力値の検証をまとめて管理できます。一覧表示にはv-data-tableが用意されており、headers（列定義）とitems（行データ）を渡すだけで、ソート・フィルタ・ページ送りに対応した表を描画できます。件数の多い業務データを扱う管理画面で特に使われる部品です。

ナビゲーションとレイアウト

画面上部のバーはv-app-bar、サイドメニューはv-navigation-drawerで作ります。全体の骨組みはv-appで囲み、v-container・v-row・v-colのグリッドで配置を組みます。グリッドは画面幅に応じて列の折り返しを自動調整するため、メディアクエリを直接書かなくてもレスポンシブなレイアウトになります。

テーマと色のカスタマイズ

Vuetifyの配色は「テーマ」という仕組みで一元管理します。v3以降ではSASS変数（旧v2の$material-light）ではなく、createVuetifyのオプションで色を定義するのが基本です。

テーマカラーを定義する

ライト／ダークのテーマごとにcolorsで色名と値を指定します。ここで定義したprimaryやsecondaryが、各コンポーネントのcolor属性から参照されます。

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          error: '#B00020',
        },
      },
    },
  },
})

ダークモードに切り替えたいときは、実行時にtheme.global.name.valueを'dark'にするか、上のようにthemesへdarkを定義してユーザー操作で切り替えます。なお、Vuetify 4では未指定時の既定テーマがsystem（OSの設定に追従）へ変わりました。特定のテーマに固定したい場合のみdefaultThemeを明示します。

SASSで細部を調整する

フォントや余白などコンポーネント内部の初期値を変えたい場合は、SASSの設定ファイルで@use 'vuetify/settings'の変数を上書きします。ただし多くのプロジェクトでは、まずcreateVuetifyのテーマ設定とユーティリティクラスで足り、SASSに踏み込むのはデザインシステムを厳密に合わせ込むときに限られます。色や余白の調整は、いきなりカスタムCSSを足すよりテーマ側で吸収するほうが一貫性を保てます。

Vuetifyを選ぶべき場面・避けるべき場面

Vuetifyはマテリアルデザインを土台にした「作り込まれた」部品群です。この性格が向く場面とそうでない場面をはっきり分けておくと、技術選定で迷いません。

向いているのは、管理画面・業務アプリ・社内ツールです。データテーブルやフォーム、ダイアログといった定番部品が揃っており、デザイナーがいなくても一貫した画面を短期間で組めます。Vueで動く前提の設計なので、Vue.jsを既に採用しているチームなら学習コストも抑えられます。

逆に、ブランド固有の独自デザインを細部まで作り込むLPやコーポレートサイトには不向きです。マテリアルデザインの見た目を打ち消すために大量のCSS上書きが必要になり、かえって工数が増えます。こうした「デザイン主導」の案件では、スタイルを持たないTailwind CSSのようなユーティリティ系や、素のCSSで組むほうが自由度が高くなります。また、React前提のチームであれば、VuetifyはVue専用のため選択肢に入りません。

よくある質問（FAQ）

Vuetifyとは何ですか？

Vue.js向けのマテリアルデザインUIフレームワークです。ボタンやデータテーブルなどの部品を提供し、CSSをほとんど書かずに統一感のあるUIを構築できます。

VuetifyとVueの違いは何ですか？

Vue.jsはUIを構築するJavaScriptフレームワーク本体、VuetifyはそのVue上で動くUIコンポーネント集です。VuetifyはVueなしでは動作せず、Vueプロジェクトに追加して見た目を提供する役割を担います。

Vuetifyの料金はいくらですか？

本体はMITライセンスの無料オープンソースで、商用でも無償で使えます。有料の「Vuetify One」はプレミアムテーマや支援特典を得るための任意サブスクで、利用に必須ではありません。

Vuetifyの読み方は？

「ビューティファイ」と読みます。Vueとbeautify（美しくする）を組み合わせた造語です。

Vuetify 2から3・4へは移行が必要ですか？

Vuetify 2はVue 2に依存し、そのVue 2は2023年末にEOLを迎えています。新規開発はVue 3 + Vuetify 4を選び、既存のv2プロジェクトはVue本体の3系移行と併せてアップグレードを検討してください。new Vuetify()からcreateVuetify()への書き換えが主な変更点です。

関連記事

• ReactとVue3の違いを比較｜どっちを選ぶべきか初心者向けに解説
• Nuxt 4の概要・主要バージョンと特徴 – 4.0から4.2.1までの進化と注目アップデートを紹介
• Viteを使ったReactプロジェクトのセットアップ方法を徹底解説