LaravelにVuetifyを導入する

はじめに

本記事は、Vue.js × Laravelを利用したアプリケーションのUIフレームワークとしてVuetifyを使用した際の手順を備忘録として残したものです。
本記事では、App.vueコンポーネントをルートコンポーネントとして、VueRouterを利用しておりますのでそちらを念頭に置いていただけると幸いです。
尚、LaravelにVue、VueRouterを導入する方法に関してはこちらの記事を参考にしております。

www.hypertextcandy.com

Vuetifyとは...

Vuetifyは、マテリアルデザインを採用したVue用UIフレームワークです。（TailwindCSSなども有名です）
マテリアルデザインは、Googleが提唱したデザインシステムです。Vuetifyを使う事で、画面のレイアウトやUI部品の配置などを効率よく統一感のある形で進めることができます。

vuetifyjs.com

環境

・Laravel 7系
・Vue 2系　（Vuetifyは3系は、2021/5の時点でまだサポートされていないようです）

導入手順

今回はnpmを利用してVuetifyを導入していきます。また一緒に

$ npm install vuetify

同時にv-iconタグを利用できるように以下をインストールしておきます。

$ npm install @mdi/font

完了後、app.jsを以下のように変更します。

import Vue from 'vue'
import Vuetify from 'vuetify'　←追加
import 'vuetify/dist/vuetify.min.css';　←追加
import "@mdi/font/css/materialdesignicons.css";  ←追加

import router from './router'

import App from './App.vue'

Vue.use(Vuetify)　←追加

new Vue({
    el: '#app',
    vuetify: new Vuetify(),　←追加
    router,
    components: { App },
    template: '<App />'
})

最後にVuetifyの適応を確認するために表示するコンポーネント内の記載を以下のように編集します。

<template>
  <v-card
    color="grey lighten-4"
    flat
    height="200px"
    tile
  >
    <v-toolbar dense>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-card>
</template>

添付画像のようなツールバーが表示されていれば導入完了です。