Vue3でVuetify3を使えるようにする

はじめに

既存のVueプロジェクトにVuetifyをインストールして使ってみる。

下記記事の続きです。
https://qiita.com/dbd_fish/items/d2502651b3fa146a200b

Vuetify3の公式サイト↓
https://vuetifyjs.com/en/getting-started/installation/#manual-steps

実施内容

インストール

インストール

Vuetifyを使用するために$ npm add vuetify@^3.3.9を実行します。
mdiを使用するために$ npm install @mdi/fontを実行します。

mdiとは下記のようなアイコンのこと。

下記のvuetify.jsを作成します。

vuetify.js

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' 


const vuetify = createVuetify({
  components,
  directives,
  icons: {
    iconfont: 'mdi',
  }
});

export default vuetify;

main.jsでvuetifyを読み込むように修正

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import vuetify from "./vuetify";

const app = createApp(App)
app.use(router)
app.use(vuetify)
app.mount('#app')

起動時の画面にカードが表示されるように修正してみる。
今回は起動時にhome.jsが表示されるため、home.jsを変更する。

home.js

<template>
  <v-card class="mx-auto" width="400" prepend-icon="mdi-home">
    <template v-slot:title>
      This is a title
    </template>

    <v-card-text>
      This is content
    </v-card-text>
  </v-card>
</template>

$ npm run devでサーバ実行すると、下記のような画面表示になる。

ホーム画面を作る

ここまでの操作でVuetify3を使う手順が完了したため、
下記のようなホーム画面を作ってみる。

home.js

<template>
  <v-layout>
    <v-app-bar color="teal-darken-4" image="https://picsum.photos/1920/1080?random">
      <template v-slot:image>
        <v-img gradient="to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"></v-img>
      </template>
      <template v-slot:prepend>

        <v-btn :to="{ path: 'home' }">
          私のブログ
        </v-btn>

      </template>
      <v-app-bar-title>ホーム</v-app-bar-title>
      <v-spacer></v-spacer>
      <template v-slot:extension>
        <v-btns v-model="tab" align-tabs="title">
          <v-btn v-for="tab in tab_list" :key="tab.tab_name" :value="tab.tab_name" :to="{ path: tab.tab_path }">
            {{ tab.tab_name }}
          </v-btn>
        </v-btns>
      </template>
    </v-app-bar>
    <v-main>
      ホーム
    </v-main>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      tab: null,
      tab_list: [
        { tab_name: 'プロフィール', tab_path: 'profile' },
        { tab_name: '経歴', tab_path: 'resume' },
        { tab_name: `事業内容`, tab_path: 'service' },
        { tab_name: '仕事関連の記事', tab_path: 'job_article_list' },
        { tab_name: '趣味の記事', tab_path: 'private_article_list' },
        { tab_name: 'お問い合わせ', tab_path: 'request' },
      ],
    }
  },
}

</script>

表示は下記のようされる。

おわりに

今度はVuexを使ってみようと思います。