Vuetify（ビューティファイ）とは？読み方・Vue 3での使い方とv4.3の導入・v3からの移行

Vuetify（ビューティファイ）は、Vue 3でマテリアルデザインの画面を組み立てるためのUIコンポーネントフレームワークです。2026年10月19日に4.3.0が公開され、現行の系列はVuetify 4です。この記事では読み方と料金を先に答え、続けて4.3.0のインストール、フォーム検証・データテーブル・テーマの書き方、v3から4へ上げるときに壊れる箇所と自動変換ツールの使い方を、手元で型チェックとビルドを通したコードで説明します。

まとめ：Vuetifyの要点（2026年10月時点）

• 読み方は「ビューティファイ」。Vue.js専用のUIフレームワークです。
• 本体はMITライセンスで無料。商用でも費用はかかりません。有償なのはVuetify Oneや直接サポートなどの任意サービスだけです。
• 新規開発はVuetify 4（最新4.3.0）。Vue 3.5以上が必要です。v3は3.13系が2027年7月27日まで重大なバグとセキュリティの修正を受けます。v2の公式サポートは2025年1月23日に終わっています。
• 導入はnpm create vuetify@latestが最短。既存のVue 3プロジェクトにはvuetifyとvite-plugin-vuetifyを入れ、createVuetify()をプラグイン登録します。
• v3から4への移行で壊れやすいのは見た目。既定テーマがsystem（OSのダーク設定に追従）になり、ブレークポイント、文字サイズのクラス、影、グリッドが変わりました。グリッドや文字クラスの多くはvuetify-codemodsで自動変換できます。

Vuetifyとは：Vue 3向けのマテリアルデザインUIフレームワーク

Vuetifyは、ボタン（v-btn）、入力欄（v-text-field）、データテーブル（v-data-table）、ナビゲーションドロワーといった部品をVueのコンポーネントとして提供するライブラリです。配色・余白・文字サイズはGoogleのMaterial Designに沿ってそろえてあり、v4からはMaterial Design 3（MD3）の文字体系と影の段階に移りました。2016年から開発が続き、GitHubリポジトリのスター数は約4.1万、npmのvuetifyは2026年10月13日〜19日の1週間に約35万回ダウンロードされています。

読み方「ビューティファイ」と名前の由来

読み方は「ビューティファイ」です。名前は「Vue」と英語のbeautify（美しくする）を重ねたものと説明されるのが一般的ですが、公式ドキュメントに由来を明記したページは見当たりません。公式が定めたカタカナ表記はありませんが、日本語圏では「ビューティファイ」と書くのが一般的です。

Vue.jsとVuetifyの役割の違い

Vue.jsは、データの変化を画面に反映する仕組み（リアクティビティ）とコンポーネントの書き方を提供するフレームワーク本体です。Vuetifyはその上で動く部品集で、Vue単体なら自分でHTMLとCSSを書いて作るボタンや表を、完成した部品として渡してくれます。そのためVuetifyだけでは動かず、必ずVue 3のプロジェクトに追加して使います。状態管理のPiniaやルーターと同じく「Vueに足すライブラリ」の1つです。コンポーネントの中のロジックは通常のVueと同じくComposition APIで書けます。

料金とライセンス：本体はMITで無料

Vuetify本体はMITライセンスで公開されており、社内システムでも受託開発でも無償で使えます。お金がかかるのは任意のサービスだけです。公式サイトには支援者向けサブスクリプションの「Vuetify One」と、Discordで開発チームに直接質問できる月額の直接サポートがあり、Vuetify 2を使い続ける組織向けにはHeroDevsの延長サポートも案内されています。フレームワークを使うだけなら、どれも契約は不要です。

バージョンの選び方：v4.3・v3.13・v2の現状

2026年10月21日時点のnpmと公式の長期サポート（LTS）方針をまとめると次のとおりです。Vuetifyは、1つ前のメジャー版の最新マイナーに少なくとも6か月、重大なバグとセキュリティの修正を出すと約束しています。

v4は2026年2月23日の4.0.0から、4.1.0（6月2日）、4.2.0（9月2日）、4.3.0（10月19日）とマイナー版を公開しています。公式ロードマップでは次の4.4を2026年第4四半期に予定しています。v3の最新版もpeerDependenciesはvue: ^3.5.0なので、Vue 3.4以前のプロジェクトはv3を使い続ける場合でもVueの更新が先になります。

判断は単純です。新しく作るならv4を選びます。v3で動いているアプリは、2027年7月27日までに4へ上げる計画を立てます。v2のアプリはVue 2自体のサポートが2023年12月31日に終わっているため、Vue 3への移行とVuetify 4への移行を一緒に進めることになります。対応ブラウザは公式のブラウザ対応表でChromium 119・Firefox 128・Safari 16.4以上で、Internet Explorerは使えません。古い社内端末が残る現場では先に確認してください。

Vuetify 4のインストールと初期設定

npm create vuetifyによる新規プロジェクトの生成

新規なら公式の雛形生成ツールcreate-vuetifyを使います。対話形式で聞かれる項目は、フラグで渡せば質問なしで生成できます。

npm create vuetify@latest

# 質問なしで作る場合（create-vuetify 3.2.1で確認）
npx create-vuetify@latest --name=my-app --platform=vue --router=none --css=none --packageManager=npm --install --typescript
cd my-app
npm run dev

create-vuetify 3.2.1で生成すると、Vite 8・vite-plugin-vuetify 2.1系・Sass（sass-embedded）・Material Design Iconsの@mdi/fontが入り、インストールされた本体は4.3.0でした。src/plugins/vuetify.tsにはdefaultTheme: 'system'が書かれ、AIコーディングエージェント向けのAGENTS.mdも同梱されます。--platform=nuxtでNuxt版、--features=pinia,eslint,i18n,mcpで追加機能も選べます。生成直後のnpm run buildは型チェック込みで成功しました。

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

Viteで作ったVue 3プロジェクトに後から入れる場合は、本体とViteプラグインを追加します。ここではアイコンをSVG版（@mdi/js）にしています。容量の比較は後の「SVGアイコンへの切り替えとCSS容量の比較」で説明します。

npm i vuetify @mdi/js
npm i -D vite-plugin-vuetify sass-embedded

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue({ template: { transformAssetUrls } }),
    vuetify({ autoImport: true }),
  ],
})

// src/plugins/vuetify.ts
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import { ja } from 'vuetify/locale'

export default createVuetify({
  locale: { locale: 'ja', messages: { ja } },
  icons: { defaultSet: 'mdi', aliases, sets: { mdi } },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: { colors: { primary: '#1565C0', secondary: '#00897B' } },
    },
  },
})

// src/main.ts
import { createApp } from 'vue'
import { createRulesPlugin } from 'vuetify'
import App from './App.vue'
import vuetify from './plugins/vuetify'

createApp(App)
  .use(vuetify)
  .use(createRulesPlugin({}, vuetify.locale))
  .mount('#app')

autoImport: trueにすると、テンプレートで使ったコンポーネントだけがバンドルに入ります。createRulesPluginは次の章で使う入力検証の登録です。v2のVue.use(Vuetify)とnew Vuetify()はv3で廃止されているため、古い記事のコードは動きません。

Nuxt 4へのVuetify導入

Nuxtでは、公式の手順どおりvite-plugin-vuetifyをnuxt.config.tsのvite.pluginsに登録し、build.transpileにvuetifyを加え、app/plugins/vuetify.ts（Nuxt 4の標準ディレクトリ構成の場合）でcreateVuetify()をapp.vueApp.use()します。コミュニティ製のvuetify-nuxt-moduleもVuetify 4に対応していますが、2026年9月13日の最新版は1.0.0-rc.6で、まだ正式版ではありません。Nuxt 4そのものの導入はNuxt 4の最新バージョンと導入手順を参照してください。

主要コンポーネントによる画面・フォーム・テーブルの実装

画面の骨組み：v-app・v-app-bar・v-navigation-drawer

Vuetifyの画面はv-appで囲み、上部バー・ドロワー・本文（v-main）を並べると、余白の計算はVuetifyが自動で行います。テーマの切り替えはuseTheme()のcycle()で、登録済みのテーマを順に切り替えます。

<template>
  <v-app>
    <v-app-bar title="在庫管理">
      <template #prepend>
        <v-app-bar-nav-icon @click="drawer = !drawer" />
      </template>
      <v-btn :icon="mdiThemeLightDark" @click="theme.cycle()" />
    </v-app-bar>
    <v-navigation-drawer v-model="drawer">
      <v-list nav :items="menu" />
    </v-navigation-drawer>
    <v-main>
      <v-container>
        <StockTable />
        <EntryForm />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useTheme } from 'vuetify'
import { mdiThemeLightDark } from '@mdi/js'
import StockTable from './components/StockTable.vue'
import EntryForm from './components/EntryForm.vue'

const theme = useTheme()
const drawer = ref(true)
const menu = [
  { title: '在庫一覧', value: 'stock' },
  { title: '入荷登録', value: 'entry' },
]
</script>

4.3.0ではv-navigation-drawerにmodalプロパティとv-model:expandedが加わりました。画面幅の判定に使うブレークポイントはv4で小さくなっています（後述）。v3と同じ幅でドロワーが閉じると思って作ると、タブレットで表示が変わります。

フォームと入力検証：useRulesと$エイリアス

4.2.0で、ラボ機能だった検証ルール（rules）が本体に入りました。useRules()で必須・メール・最大文字数などの組み込みルールを呼べます。'$required'のように$付きの文字列でも指定できます。

<template>
  <v-form ref="form" @submit.prevent="submit">
    <v-text-field v-model="email" label="メールアドレス" :rules="['$required', '$email']" />
    <v-text-field
      v-model="code"
      label="社員コード"
      counter="8"
      :rules="[rules.required(), rules.maxLength(8)]"
    />
    <v-btn type="submit" color="primary">送信</v-btn>
  </v-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRules } from 'vuetify'
import type { VForm } from 'vuetify/components'

const rules = useRules()
const form = ref<VForm>()
const email = ref('')
const code = ref('')

async function submit () {
  const result = await form.value?.validate()
  if (result?.valid) console.log('送信できます')
}
</script>

jsdom上で4.3.0を動かして確かめた挙動は3つあります。1つ目、ロケールをjaにすると、エラー文は「このフィールドは必須です」「有効なメールアドレスを入力してください」と日本語で出ます。2つ目、createRulesPluginを登録し忘れると、'$required'はルールとして解釈されません。エラー文として「$required」がそのまま表示されます。3つ目、rules.capital()の実装は/^[A-Z]*$/で、「大文字だけで書かれているか」を判定します。公式ページの表には「大文字を1文字以上含むか」とありますが、実装はこれと違います。「Abc」は不合格になるので、パスワードの大文字必須チェックには使えません。その用途はpatternか自作ルールで書きます。なお公式ページの登録例にあるimport { createVue } from 'vue'はVueに存在しない関数で、正しくはcreateAppです。

データテーブル：v-data-tableで並べ替えと装飾

業務画面の一覧表示にはv-data-tableを使えます。列定義（headers）と行データ（items）を渡せば、並べ替え・ページ送りは標準で付きます。特定の列だけ見た目を変えるときは#item.列キーのスロットを使います。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    :sort-by="[{ key: 'stock', order: 'asc' }]"
  >
    <template #item.stock="{ value }">
      <v-chip :color="value === 0 ? 'error' : 'success'" size="small">{{ value }}</v-chip>
    </template>
  </v-data-table>
</template>

<script setup lang="ts">
const headers = [
  { title: '商品名', key: 'name' },
  { title: '在庫', key: 'stock', align: 'end' as const },
]
const items = [
  { name: 'ノートPC', stock: 12 },
  { name: 'モニター', stock: 0 },
  { name: 'キーボード', stock: 48 },
]
</script>

ここまでの3ファイルは、create-vuetify 3.2.1の雛形（Vuetify 4.3.0・Vue 3.5.44・Vite 8.3.5）に組み込み、vue-tsc --buildとvite buildがエラーなしで通ることを確認しています。4.3.0ではv-data-tableの行に選択・展開状態のdata属性が付くようになり、select-strategyにfiltered（絞り込み中の行だけを全選択の対象にする）が加わりました。

テーマカラー・アイコン・スタイルの設定

テーマカラーとダークモード：既定はsystem

色はcreateVuetifyのtheme.themesで定義し、部品側ではcolor="primary"のように名前で指定します。v4の既定テーマはsystemです。jsdomでOSのダーク設定（prefers-color-scheme: dark）を真にすると、何も指定しないcreateVuetify()のテーマ名はdark、偽にするとlightになりました。社内の業務画面で利用者ごとに見た目が変わると困る場合は、上の設定例のようにdefaultTheme: 'light'を明示します。v4からはテーマ色に透明色も使えます。その場合、自作CSSでrgba(var(--v-theme-primary), 0.8)と書いていた箇所はcolor-mix()か相対色構文への書き換えが必要です。

SVGアイコンへの切り替えとCSS容量の比較

雛形はアイコンにWebフォント版の@mdi/fontを使います。この方式は、使っていないものも含め、7.4.47に収録された7,448個すべてのアイコンのCSSとフォントを読み込みます。入力欄・ボタン・データテーブルだけの同じ検証画面を2方式でビルドして比べました。以下は雛形のRobotoフォント設定を含む検証画面全体の生成物サイズで、アイコン単体の容量や、この記事の掲載コードから生成される容量ではありません。

SVG方式ではJSが412.90kBから422.05kBへ約9kB増えますが、CSSは約4割減り、403kBのフォントも読み込まなくなります。SVG方式ではアイコンを'mdi-content-save'のような文字列でなく、@mdi/jsから読み込んだmdiContentSaveなどの変数で渡します。使うアイコンが数十個までの業務画面なら、SVG方式を選ぶ理由のほうが大きくなります。

SASS変数とCSSレイヤーによるスタイルの上書き

部品ごとの既定値はSASS変数で変えられます。vite-plugin-vuetifyにstyles: { configFile: 'src/styles/settings.scss' }を渡し、そのファイルに変数を書きます。v4ではボタンの文字が大文字に変換されなくなったので、v3と同じ見た目に戻す例を示します。

// src/styles/settings.scss
@use 'vuetify/settings' with (
  $button-text-transform: uppercase,
);

ここに罠があります。公式の移行ガイドの例は'uppercase'と引用符付きです。4.3.0でこのとおりビルドすると、出力はtext-transform:"uppercase"という文字列値になりました。text-transformは文字列を受け付けないので、ブラウザはこの宣言を捨てます。結果としてボタンは大文字になりません。引用符を外すとtext-transform:uppercaseが出力されます。

もう1つの変化として、v4のスタイルは常にCSSカスケードレイヤー（@layer）に入るようになりました。vuetify-core・vuetify-components・vuetify-finalなどに分かれています。同じオリジンの通常宣言同士では、レイヤー外の自作CSSがレイヤー内の宣言より優先されます。ただし、インラインスタイルや!important付きの宣言は別に扱われ、重要宣言同士ではレイヤーの優先順も逆転します。v3で!importantを重ねて上書きしていた箇所は、外しても効くことが多くなります。

Vuetify 3から4への移行：変更点と自動変換

v3とv4の主な違い

4.0.0の変更は、APIの改名より見た目の既定値の変更が中心です。createVuetifyや部品の書き方はv3と同じなので、ビルドは通るのに画面がずれる、という壊れ方をします。公式の移行ガイドから影響の大きいものを抜き出しました。

ブレークポイントの値は、jsdomでcreateVuetify()のdisplay.thresholdsを読んで確かめました。md 840・lg 1145・xl 1545・xxl 2138でした。v3の値に戻したい場合は、createVuetify({ display: { thresholds: { md: 960, lg: 1280, xl: 1920, xxl: 2560 } } })とSASSの$grid-breakpointsの両方を設定します。

vuetify-codemodsによる自動変換と適用範囲

テンプレート側の書き換えはvuetify-codemods（1.0.6）で自動化できます。対象はグリッド・文字クラス・影・v-select系のitemスロット・v-snackbarのmulti-line・SnackbarQueueのスロット・フォームのスロット参照の7ルールです。v3の書き方で作ったサンプルに実行した結果が次です。

npx vuetify-codemods@latest
# 既定の対象は **/src/**/* 。--files <glob> で絞れる

- <v-row dense align="center" justify="space-between">
-   <v-col cols="12" md="6" order="2" order-md="1">
-     <h2 class="text-h4">売上一覧</h2>
-     <v-card class="elevation-8" elevation="12">カード</v-card>
+ <v-row class="align-center justify-space-between" density="compact">
+   <v-col class="order-2 order-md-1" cols="12" md="6">
+     <h2 class="text-headline-large">売上一覧</h2>
+     <v-card class="elevation-3" elevation="4">カード</v-card>

-   <v-list-item v-bind="props" :title="item.raw.name" />
+   <v-list-item v-bind="props" :title="item.name" />

- <v-snackbar v-model="open" multi-line>保存しました</v-snackbar>
+ <v-snackbar v-model="open" min-height="68">保存しました</v-snackbar>

集計はグリッド5件・影2件・文字クラス2件・itemスロット1件・Snackbar 1件でした。実行して確認できた注意点が3つあります。まず、ルールを選ぶ画面がチェックボックス式の対話UIなので、CIのような端末のない環境ではそのまま動きません（標準入力を流し込んでも終了コード13で止まりました）。次に、コミットしていない変更があると続行するか確認されるので、作業ブランチでコミットしてから実行します。最後に、v-colのoffset-md="2"はそのまま残りました。これは正しい挙動で、v4でもプロパティのoffsetは使えます。変わったのはCSSクラスを直接書く場合だけです（offset-6がv-col-offset-6になりました）。

自動変換されない箇所と旧挙動に戻す設定

codemodが扱わないのは、テーマ・ブレークポイント・CSSリセット・ボタンの大文字化・v-containerの幅です。これらは上で示したdefaultTheme: 'light'、display.thresholds、ボタンのSASS変数で一時的に旧挙動へ戻せます。公式も、先に旧挙動へ戻してから箇所ごとに直す段階移行を勧めています。CSSリセットが消えた影響は、<h1>〜<h6>や<ul>にブラウザ既定の余白が戻る形で出ます。公式の移行ガイドにある@layer vuetify-core.reset { ... }のCSSを足すと元に近づきます。

移行ガイドは、公式のMCPサーバー（@vuetify/mcp）経由でAIエージェントに読ませることもできます。Claude Codeならclaude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcpで登録でき、get_v4_breaking_changesなどのツールで破壊的変更の一覧を引けます。200コンポーネントを超える規模のアプリでは、公式は先にv-row・elevation・text-h*の使用箇所を数えてから着手するよう勧めています。

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

Vuetifyが向くのは、Vue 3で社内の管理画面や業務システムを作り、デザイナーがいない、または少ないチームです。データテーブル・日付入力・ファイルアップロード・ステッパーまで同じ見た目でそろうため、標準のデザインと機能で要件を満たせる画面では、部品を自作する工程を減らせます。4.1.0では日付入力（v-date-input）やファイルアップロード（v-file-upload）も正式な部品になりました。

避けたほうがよいのは次の3つの場面です。1つ目は、ブランドの独自デザインをピクセル単位で再現する一般向けサイトです。Material Designの癖を消す上書きが増え、部品集を使う利点がなくなります。この場合はHeadless UIのような見た目を持たない部品か、Tailwind CSSで作るほうが素直です。2つ目は、ReactやSvelteでも同じ部品を使い回したいケースです。VuetifyはVue専用で、Reactには同じMaterial Design系のMaterial UIがあります。3つ目は、Safari 16.3以前など古いブラウザが残る環境です。Vue自体の選定から迷っているならReactとVue3の違いを、業務画面の部品選びの全体像は業務システムの画面デザインとライブラリ選定を先に読むと判断しやすくなります。画面設計から外部に任せたい場合は、一想のUI/UXデザインの支援でも相談を受けています。

よくある質問（FAQ）

Vuetifyの読み方は？

「ビューティファイ」です。Vueとbeautify（美しくする）を重ねた名前と説明されることが多く、Vue.js専用のUIフレームワークを指します。

Vuetifyで何ができますか？

ボタン・入力フォーム・データテーブル・ナビゲーション・ダイアログなど、Material Designに沿ったUI部品をVue 3のコンポーネントとして使えます。テーマ切り替えや入力検証のルール（useRules）も付いているので、管理画面や業務アプリの画面をCSSをほとんど書かずに組み立てられます。

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

Vueは画面とデータを結び付けるフレームワーク本体で、VuetifyはそのVueの上で動く部品集です。VuetifyはVueなしでは動かず、Vue 3のプロジェクトに追加して使います。

Vuetify 3と4の違いは？移行は必要ですか？

v4は既定テーマがOS設定に追従するsystemになり、ブレークポイント・文字クラス・影・グリッドがMD3に合わせて変わりました。部品のAPIはほぼ同じですが、見た目が変わります。v3の3.13系は2027年7月27日まで修正が出るので、それまでにvuetify-codemodsと旧挙動に戻す設定を使って段階的に移行してください。

Vuetifyは無料で商用利用できますか？

できます。本体はMITライセンスで、社内システムや受託開発でも費用はかかりません。有償なのはVuetify Oneや直接サポート、Vuetify 2向けの延長サポートといった任意のサービスです。

関連記事

• Nuxt 4とは？最新バージョンは4.5｜確認方法・Nuxt 3との違い・導入手順【2026年9月】
• ReactとVue3の違いを比較｜どっちを選ぶべきか初心者向けに解説
• Composition APIとは？書き方とOptions APIとの違い・移行判断を解説【2026年8月版】
• 業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定
• Material UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説