Laravel6.xでVuetifyを導入する手順を解説

以前、Laravel6.xにVueを導入する手順を解説しました。

試行錯誤してみた。

2020.02.17

Laravel6.xでVueを導入する手順を解説

https://trialanderror.jp/laravel-6x-vue/

Laravel 5.xではComposerでインストール時にVueも一緒にインストールされたのですが、Laravel 6.xでは手動でインストールする必要があるようでした。5.x→6.xのアップデートで少し戸惑ったのでメモしておきます。尚、Composerが既に導入されている前提ですので、ご注...

Vueを使うからにはリッチなデザインを簡単に使えるVuetifyも使いたい、ということで、導入してみたので手順をシェアします。

といってもVueが導入できていれば、かなり簡単に使えるようになります。

環境

この記事は以下の環境で動作確認しています。

導入手順

特に記載がない場合は、プロジェクトのルートディレクトリでコマンドを実行します。

LaravelはLaravel Mixというwebpackのラッパーを使用している為、公式のリファレンスもwebpackを使用した導入手順を参考にすることとします。

vuetifyjs.com

クイックスタート — Vuetify.js

https://vuetifyjs.com/ja/getting-started/quick-start/#webpack-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

Vuetifyのインストール

npmを使用してVuetifyをインストールします。

$ npm install vuetify

Vuetify用のプラグインファイルの作成

リファレンスでは、Vuetifyを直接読み込まずにVuetify用のプラグインファイルを作るようなので、それに倣います。
Laravelプロジェクトのresources/js配下に、plugins/vuetify.jsを作成します。

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Vuetifyの読み込み

エントリポイントとなるresources/js/app.jsでVuetifyを読み込みます。

window.Vue = require('vue');
import vuetify from './plugins/vuetify';

// コメントやコンポーネントの定義がある（省略）

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

<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>

npm run dev

php artisan serve