Vuetify3ことはじめ2（Vite）

はじめに

過去にVue CLIで作成したVueプロジェクトにVuetifyをインストールしたことはあるが、Viteだと少し手順が変わっていて上手く動かなかったのでVite版でやってみる。

本記事のゴール

Viteで作成したVueプロジェクトでVuetify3を使えるようにする

環境

Windows 10 64bit
Node.js：v19.1.0
npm：9.6.5
vue：3.3.2
vuetify：3.2.5

Vue3環境構築

この記事を参考に作成する

Vuetifyインストール手順

公式ページの Manual Step を参考にインストールしていく

Get started with Vuetify 3 — Vuetify

Details for v3 release - faq, changes, and upgrading.

Vuetifyのインストール

npm add vuetify

コード修正（main.ts）

丸っと置き換えでOK。

// import './assets/main.css' ← ★これは必要であれば
import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

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

これで事前準備はできたので後は好きなコンポーネントを次のページで探してコード書いていくだけ。

All Vuetify Components — Vuetify

Browse all of the available Vuetify components or group by category.

アイコンフォントの利用

これまでの設定ですべて問題なく使えるかなーと思ってたけど、アイコンは別途インストールが必要とのこと。

Icon Fonts — Vuetify

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

Vuetifyは次の4つのアイコンをサポートしているが、今回は Material Design Icons を使ってみる

マテリアルデザインアイコンのインストール

npm install @mdi/font -D

コード修正（main.ts）

改めてこっちも修正

// import './assets/main.css' ← ★これは必要であれば
import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
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'

const vuetify = createVuetify({
  components,
  directives,
  icons: {     // ← ★追加
    defaultSet: 'mdi', 
  },
})

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

適当なvueファイルに次のアイコン付きボタンのコードを張ればアイコンが表示されることを確認できた。

<v-btn prepend-icon="mdi-vuetify"> Button </v-btn>

おわりに

これで簡単にある程度おしゃれな画面を作れるようになったはずなので次は簡単なアプリデモ作ってみる