---
title: "Vuetify（ビューティファイ）とは？Vue 3での使い方・インストールを最新v4対応で解説"
url: "https://www.issoh.co.jp/tech/details/4606/"
published: 2024-12-23
updated: 2026-09-27
categories: ["Vue.js"]
publisher: "株式会社一創"
---

# 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   | 対応Vue     | 状態（2026年7月時点）                              |
| --------- | --------- | ------------------------------------------ |
| Vuetify 2 | Vue 2     | Vue 2がEOL（2023-12-31）。新規採用は非推奨             |
| Vuetify 3 | Vue 3.0以上 | 安定版。既存プロジェクトで広く稼働                          |
| Vuetify 4 | Vue 3.5以上 | 最新（4.1.3 / 2026-07-02）。Material Design 3採用 |

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の違いを比較｜どっちを選ぶべきか初心者向けに解説](https://www.issoh.co.jp/tech/details/2348/)
- [Nuxt 4の概要・主要バージョンと特徴 – 4.0から4.2.1までの進化と注目アップデートを紹介](https://www.issoh.co.jp/tech/details/9938/)
- [Viteを使ったReactプロジェクトのセットアップ方法を徹底解説](https://www.issoh.co.jp/tech/details/3587/)

---

出典: [Vuetify（ビューティファイ）とは？Vue 3での使い方・インストールを最新v4対応で解説](<https://www.issoh.co.jp/tech/details/4606/>)（株式会社一創）