Vuetify3の導入

Vuetify3でVueのシングルページアプリケーションを構築する話。
ビルドツールは「Vite」、プロジェクトを作成済みの環境にVuetifyを導入する前提です。
OSはWindows

導入前のレイアウト
Vuetifyをインストール
Vuetifyをimport
確認

導入前のレイアウト

Vuetify導入前はこんなレイアウト。

Vuetifyをインストール

まずはVuetifyをインストールしていく所から。カレントディレクトリをプロジェクトのルートディレクトリへ移動し、以下のコマンドを実行。インストールする。

npm install --save vuetify

Vuetifyをimport

main.jsでvuetifyをインポートしていく。Vuetifyの振る舞いは、/src/plugin/vuetify.jsへ定義する。
Vuetifyの効果を分かりやすくするため、テーマを「dark」に設定。

/src/plugin/vuetify.js

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

export const vuetify = createVuetify(
    {
      //テーマの設定
      theme: {
        defaultTheme: "dark",
         themes: {
           dark: {
             colors: {
               primary: '#47845E', // #1E88E5
             },
           },
         },
      },
      // 全てのコンポーネントを利用
      components,
      // 全てのディレクティブを利用
      directives
    }
  )

main.jsでVuetifyをVueへ設定。

main.js

import { createApp } from 'vue'
import './style.css'
import {vuetify} from './plugin/vuetify'
import App from './App.vue'

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

効果を分かりやすくするため、App.vueも変更。

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <v-app style="width: 100%">
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  <HelloWorld msg="Vite + Vue" />
  </v-app>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>