【2020年9月 現在】LaravelでVuetifyを使えるようにする全手順

みなさん、こんにちは。どんぶラッコです。

Laravel の UI として vue が使えるということはみなさんご存知だと思います。

私は vue のUIフレームワークである vuetify をよく使っているので、Laravelでも使えるように設定していこうと思います！

早速設定していきましょう！

どんぶラッコ

Laravel 7.X 系を使っている前提で解説を進めます！

Laravel インストール & vue セットアップ

まずはLaravelのプロジェクトを作成します。

laravel new [プロジェクト名]

どんぶラッコ

laravelコマンドが使えない人は公式サイトを参考にセットアップしましょう

https://readouble.com/laravel/7.x/ja/installation.html

次に、vueを使えるようにします。

認証機能を使いたい人は、 --auth オプションをつけておきましょう。

composer require laravel/ui
php artisan ui vue --auth

どんぶラッコ

セットアップの方法や以前のバージョンのセットアップ方法はこちらのQiita記事がわかりやいです！

npm パッケージをインストール

次に、先ほどセットアップしたvue関連のnpmパッケージを引っ張ってきます。NPMを使ってインストールしましょう。

npm i

どんぶラッコ

“npm i” = “npm install” の略ですよ！

次に、laravel mix の機能を使って webpack ビルドする必要があります。

開発中の場合は

npm run watch
# or
npm run hot

を使うといいです！

ホットリロードなしでビルドしたい場合は

npm run dev #開発環境
npm run prod #本番環境

コマンドを叩けばOKです。

Vuetifyをセットアップする

では、ここまでできたらいよいよvuetifyです。早速設定していきましょう！

まずは vuetify パッケージを npm 経由でインストールします。

npm i vuetify

次に、resources/js/app.js を編集します

import Vuetify from 'vuetify';
Vue.use(Vuetify);

// ...中略

const app = new Vue({
  el: ‘#app’,
  vuetify: new Vuetify(),
});

vuetifyのCSSファイルは resources/sass/app.scss に追記しておきましょう。

@import '~vuetify/dist/vuetify.min.css';

これで完了です！

Option: アイコンのインストール

ついでに、mdiアイコンも使えるようにしておきましょう。

npm install @mdi/font -D

先ほど css読み込みを記述した resources/sass/app.scss に追記します。

@import ‘~@mdi/font/css/materialdesignicons.min.css’;

最後に、resources/js/app.js でアイコンフォントを読み込むようにします。

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify({
        iconfont: 'mdi', //追記
    })
});

これでセットアップは完了です！

注意点としては、laravelではデフォルトのCSSフレームワークとしてBootstrapが導入されていますが、Bootstrapを有効にしたままではレイアウトがバッティングしてしまうことがあります。

必要に応じて resources/sass/app.scss の読み込みをオフにしておきましょう。

vuetifyをlaravelでも使い倒しちゃいましょう！！