既存のVueプロジェクトにVuetifyを導入してみる

はじめに

前回Vue-Routerを導入したVueプロジェクトにVuetifyを導入します。

既存のVueプロジェクトにVue-routerを導入してみる

はじめに 前回Dockerコンテナの中で起動できるようにしたVueプロジェクトにVue-routerを導入して、ルーティングを行います。 Vue-routerのインストール Dockerfileを修正してVue-routerをインストールし

kemushitech29.com

Dockerfileの変更

以下の内容を追加します。

RUN npm i vuetify

RUN npm install @mdi/font -D

main.tsの変更

以下の内容を追加します。

// Vuetify
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 { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

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

const app = createApp(App);
app.use(router);
app.use(vuetify); // 追加
app.mount('#app');

App.vueの変更

以下の内容を変更します。

これを

<button @click="signOut">Sign Out</button>

これに変更

<v-btn prepend-icon="$vuetify" @click="signOut">Sign Out</v-btn>

変更の確認

ボタンがVuetifyのボタンに変わっていることを確認します。