記事概要

この記事では、Vueitfyのインストール手順と使用方法を解説します。
MDI(Material Design Icons)の使用方法も解説しています。

インストール方法

プロジェクトでVuetifyを使用するためには、大きく3つ方法があります。

• プロジェクト作成時にVuetifyを追加する
• 既存プロジェクトにVuetifyを追加する
• CDNでVuetifyを使用する

この記事では既存プロジェクトに追加する方法をご紹介します。
まずは、プロジェクト直下でインストールを行います。

npm install vuetify
npm install @mdi/font -D

これで、package.jsonにvuetifyと@mdi/fontが追加されたことが確認できます。

"dependencies": { 
    "vue": "^3.4.23",
    "vuetify": "^3.5.16"
  },
  //
  "devDependencies": { 
    "@mdi/font": "^7.4.47"
  },
  //

使用手順

既存のVueアプリケーションでVuetifyを使用する準備をご紹介します。
Vueのエントリーポイントにuse(vuetify)で使用できます。

vuetifyの定義にはcreateVuetify()を使用し、使用するコンポーネントやディレクティブを選択することも可能です。ここでは全部を使用する例をご紹介しています。

iconsも一緒に設定しています。iconsも使用するアイコンデザインだけ選択することが可能です。

import { createApp } from 'vue'

// Vuetify //
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css' // おそらくssrを使うとき必要
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Components
import App from './App.vue'

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

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

使用例

アイコンの表示

Home

Account

カウンターボタン

コードサンプル

最後に全体のコードをご紹介します。

template

<template>
  <v-container>
    <h4>アイコンの表示</h4>
    <v-row>
      <v-col>
        <p><v-icon icon="mdi-home" /> Home</p>
        <p><v-icon icon="mdi-account" /> Account</p>
      </v-col>
    </v-row>

    <h4>カウンターボタン</h4>
    <v-row>
      <v-col>
        <v-btn
          variant="outlined"
          @click="count++"
        >count : <v-icon icon="mdi-plus"/>{{ count }}</v-btn>
      </v-col>
    </v-row>    
  </v-container>
</template>

script

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>