Vue3にVuetify3を導入

この記事は2022/12/4に作成しています。

Vuetify3(Titan)がリリースされました。

公式サイトを参考にVue3にVuetify3を導入してみます。

インストール方法

新しくプロジェクトを作成

Vuetify3で新たにプロジェクトを始めるときは、以下を実行して作成すればよい。

yarn create vuetify

既存のプロジェクトにVuetify3を導入

まず、下記のコマンドを実行

yarn add vuetify@^3.0.3

次にCreateAppをしているファイルを下記のように変更

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,
})

// use(vuetify)を追加
createApp(App).use(vuetify).mount('#app')

参考リンク
https://next.vuetifyjs.com/en/getting-started/installation/