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

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

```console
composer require laravel/ui

php artisan ui vue --auth
```

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

```console
npm install vuetify
```

```javascript:/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](https://laravel-mix.com/extensions/vuetifyjs)

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

# 実際にやってみた

ほとんど[上記リンク](https://laravel-mix.com/extensions/vuetifyjs)に書いてあるとおりですが、一応まとめます。

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

```console
npm i vuetifyjs-mix-extension -D
```

## 2.vuetify-loader

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

```javascript: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');
```

```javascript:/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でコンパイルしないとファイルサイズ削減は適用されないようです)

```console
npm run prod
```

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

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

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

```javascript:/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変数

```javascript: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](https://vuetifyjs.com/ja/customization/sass-variables/)



```scss:/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](https://readouble.com/laravel/7.x/ja/authentication.html)
[JavaScriptとCSSスカフォールド 7.x Laravel](https://readouble.com/laravel/7.x/ja/frontend.html)
[Nothing-Works/vuetifyjs-mix-extension](https://github.com/Nothing-Works/vuetifyjs-mix-extension)
[Compatibility With Laravel Mix? · Issue #49 · vuetifyjs/vuetify-loader](https://github.com/vuetifyjs/vuetify-loader/issues/49)