LaravelプロジェクトでVuetifyを「もっと」使いこなしたい(vuetify-loader&SASS変数)

はじめに

laravelで作成したプロジェクトで、認証を実装する際などで行う以下のフロントエンドscaffoldのコマンドではbootstrapが標準で付いてきます。

composer require laravel/ui

php artisan ui vue --auth

bootstrapってダサいのでbootstrapの代わりにVueと相性の良いVuetifyを使おうとする場合、他の方がまとめてくださっている記事のように、以下のようにすれば一応使うことはできます。

npm install vuetify

/resources/js/app.js

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

Vue.use(Vuetify);

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

しかし、この方法では以下のような欠点があります。

• vuetify-loaderが扱えない(コンパイル後のjsファイルサイズが大きくなってしまい、処理が重くなってしまう)
• vuetifyのSASS変数が変更できないので、デフォルトで設定されているフォントなどを変えたい場合、別CSSで上書きするなどの対応になってしまう

多分これらはwebpack.mix.jsでwebpackConfigをうまいこと扱えれば解決すると思うのですが、あまり情報がなかったり、自分の技術力不足で上手くいかず、半ば諦めていました...が！

laravel-mixにvuetify用のextensionが追加されていた件

ちょうど良さそうなのがありました。
Vuetify Laravel Mix Extension

最近追加されたようで、v0.0.8(執筆現在)となっており少々不安な部分もありますが、今回はこれにお世話になろうかなと思います。

実際にやってみた

ほとんど上記リンクに書いてあるとおりですが、一応まとめます。

1.vuetifyjs-mix-extensionをインストール

npm i vuetifyjs-mix-extension -D

2.vuetify-loader

vuetify-loaderを使用すればvueコンポーネント内でのみ使用しているvuetifyコンポーネントを自動で取り込んでくれます。
必要なものだけインポートすることでファイルサイズの削減や処理の高速化に繋がります。
アラカルト (treeshaking) — Vuetify.js

webpack.mix.js

const mix = require('laravel-mix');

require('vuetifyjs-mix-extension')

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .vuetify('vuetify-loader');

/resources/js/app.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import SampleComponent from './components/SampleComponent.vue'

Vue.use(Vuetify);

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

これでSampleComponentで使用しているvuetifyのコンポーネントのみ、これで呼び出すことができます。

あとは以下のコマンドでコンパイルすればOKです。
(productionでコンパイルしないとファイルサイズ削減は適用されないようです)

npm run prod

vueコンポーネントじゃなくてbladeに直接vuetify書きたいんだけど...

bladeファイルに直接書きたいコンポーネント(v-appなど)は以下のように追加分を個別に指定して取り込みましょう。

例：v-appをvueのコンポーネントで使わないが、bladeファイルに直接書きたい場合

/resources/js/app.js

import Vue from 'vue'
import Vuetify, { VApp } from 'vuetify/lib'

import SampleComponent from './components/SampleComponent.vue'

Vue.use(Vuetify);

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

3.SASS変数

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .vuetify(
      'vuetify-loader',
      'resources/sass/vuetify/variables.scss'
   );

vuetify()の第2引数に指定したパスにscssファイルを作成して、そこで変数を上書きすれば適用されます。
SASS variables — Vuetify.js

/resources/sass/vuetify/variables.scss

// default
// $body-font-family: 'Roboto', sans-serif !default;

$body-font-family: '游ゴシック Medium',
'游ゴシック体',
'Yu Gothic Medium',
YuGothic,
'ヒラギノ角ゴ ProN',
'Hiragino Kaku Gothic ProN',
'メイリオ',
Meiryo,
'ＭＳ Ｐゴシック',
'MS PGothic',
sans-serif;

おわりに

ずっと困っていた件がこのextensionで解決できたので、とても助かりました。
同じ内容で詰まっている方がいらっしゃいましたら、ぜひお試しください。

参考URL

認証 7.x Laravel
JavaScriptとCSSスカフォールド 7.x Laravel
Nothing-Works/vuetifyjs-mix-extension
Compatibility With Laravel Mix? · Issue #49 · vuetifyjs/vuetify-loader