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 を参考にインストールしていく

Vuetify — A Vue Component Framework

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')

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

Vuetify — A Vue Component Framework

アイコンフォントの利用

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

Vuetify — A Vue Component Framework

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>

おわりに

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