📑

今更ながらVuetifyを試してみる

2025/03/20に公開

はじめに

Vueのポートフォリオを作成中です。
Vuetifyをお仕事では使用したことがなかったので、導入してみました。
既存のVueプロジェクトにVuetifyを導入する際の手助けとなれれば幸いです。

作成したリポジトリ

こちらで作成したリポジトリをクローンして作成しました。

Vuetifyインストール

公式ドキュメントに沿ってインストールします。

npm i vuetify

アイコンのインストール

後々分かったことですが、公式ドキュメント通りではアイコンが表示されないコンポーネントがありました。先にインストールしておくことをお勧めします。
こちらを参考にさせていただきました。

npm install --save @mdi/font

記述の追加

下記の記述をmain.tsに追加したら準備完了です。

main.ts

import 'normalize.css'
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

+ import 'vuetify/styles'
+ import { createVuetify } from 'vuetify'
+ import * as components from 'vuetify/components'
+ import * as directives from 'vuetify/directives'
+ import '@mdi/font/css/materialdesignicons.css'

import App from './App.vue'
import router from './router'

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

const app = createApp(App)

app.use(createPinia())
app.use(router)
+ app.use(vuetify)

app.mount('#app')

コンポーネント使用例

公式にワイヤーフレームがあるので、そちらを参考にしました。

ラッパーコンポーネント

ワイヤーフレームの Baseline と Inbox を合わせて作成しております。
こんな感じになります。

TheWrapper.vue

<script setup lang="ts">
import icon from '@/assets/icon.jpg'
import TheNavigation from '@/components/TheNavigation.vue'

const drawer = defineModel<boolean>({ default: true })
</script>

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer">
      <v-sheet class="pa-4">
        <v-avatar size="64">
          <v-img :src="icon"></v-img>
        </v-avatar>
      </v-sheet>

      <v-divider></v-divider>

      <TheNavigation />
    </v-navigation-drawer>

    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>Vue Portfolio</v-app-bar-title>
    </v-app-bar>

    <v-main>
      <slot></slot>
    </v-main>
  </v-app>
</template>

ナビゲーションは分けて作成しました。
この辺りを参考に、今後修正予定です。

TheNavigation.vue

<script setup lang="ts"></script>

<template>
  <v-list>
    <v-list-item></v-list-item>
  </v-list>
</template>

おわりに

UIフレームワーク楽しいですね。デザインに関しては全然学べてないのでそちらも合わせて学べていけたらと思っております。ここまで読んでいただき、ありがとうございました。