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

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

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

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

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

環境

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

  • PHP:7.2
  • Laravel:6.2
  • Vue:2.5.17

導入手順

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

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

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,
});

ビュー側でコンポーネントの定義

上記JavaScript、Vueコンポーネントをビュー側で定義します。
※example-componentはVue導入時に自動生成されるコンポーネント

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

コンパイル

Vueのコンパイルを行います(忘れがち)

npm run dev

確認

サーバーを起動して確認します。

php artisan serve

PHPカテゴリの最新記事