既存のLaravel/VueCLIプロジェクトにVuetifyを導入する

環境

• Laravel 7.25
• PostgreSQL 12.3
• vueCLI 4.4.1

やりたいこと

• 既存のLaravel+VueCLIプロジェクトに、後からVuetifyを導入する
• 公式サイトのインストール方法（https://vuetifyjs.com/ja/getting-started/quick-start/) がわかりにくい

手順

コマンド

• 公式サイトにはいろいろあるけど、この場合はこの２つでOK

npm install vuetify
npm install sass sass-loader fibers deepmerge -D

• mdiアイコンを使うとき

npm install @mdi/font -D

resources/js/app.js

• ★がついた部分が加筆部分

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))



import Vue from 'vue';
import Vuetify from 'vuetify'; //★
import 'vuetify/dist/vuetify.min.css'; //★
import '@mdi/font/css/materialdesignicons.css'; //★

Vue.use(Vuetify); //★

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

// ★
export default new Vuetify({
    icons: {
        iconfont: 'mdi'
    },
    theme: {
        dark: true,
    }
})

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(), //★
});