VuetifyをVue 3に導入する｜なぜ最後に入れるのか・最小セットアップ

※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。

Vuetify は Vue 用の UI コンポーネントフレームワークです。ボタン・入力欄・テーブル・ダイアログなどが最初から用意されていて、自分で CSS を書かなくても整った画面が作れます。ただ、私はこれを最初に入れて失敗しました。見た目が崩れたときに「Vue のせいか、Vuetify のせいか、CSS のせいか」が分からなくなったからです。この記事では、なぜ最後に入れるのかと、最小の導入手順をまとめます。

※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。

なぜ「最後」に入れるのか
インストールと登録（Vite前提）
最初の一画面
もっと体系的に学ぶなら（書籍）
次に読む

なぜ「最後」に入れるのか

UI ライブラリは便利な反面、自分のコードに「もう一つの登場人物」を増やします。トラブルの切り分け対象が増えるので、土台が固まる前に入れると原因究明が一気に難しくなります。

おすすめの順番
1. Vue の状態管理（ref / reactive）を理解する
2. コンポーネントの分け方を理解する
3. REST API とつなぐ
4. APIレスポンスを素のHTMLで表示できる
5. ← ここで初めて Vuetify で見た目を整える

「素の <ul><li> でデータが正しく出る」ところまで作ってから Vuetify を被せると、もし崩れても「見た目だけの問題」と切り分けられます。

インストールと登録（Vite前提）

npm i vuetify @mdi/font

Vuetify を「プラグイン」として登録します。app/plugins/vuetify.ts を作ります。

// src/app/plugins/vuetify.ts
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export const vuetify = createVuetify({
  components,
  directives,
})

main.ts で Vue アプリに use します。

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

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

最初の一画面

Vuetify のコンポーネントは、全体を <v-app> で囲むのが基本です。これを忘れると一部のスタイルが効きません（最初によくハマるポイントです）。

<!-- src/App.vue -->
<template>
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary">追加</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

v-btn や v-container のような v- 始まりのタグが Vuetify のコンポーネントです。これで CSS を一行も書かずに整ったボタンが出ます。次の記事では、これを使って入力フォームとバリデーションを作ります。