[Laravel7.x]ドキュメントを読みながらVuetifyを導入する

# 今回の題
VuetifyをLaravelに導入する手順を書き残します。
ドキュメントを読みながら出来るだけ忠実に導入していきます。

# 環境
- Laravel 7.
- Vue.js 2.5.17
- Vuetify 2.4.3

# 手順

## 1 Laravelのインストール
[readouble - Laravel 7.x インストール](https://readouble.com/laravel/7.x/ja/installation.html)の通りにインストールします。

- インストーラを使うのであれば

```terminal
$ composer global require laravel/installer
$ laravel new プロジェクト名
```

- Composerのcreate-projectコマンドを使うなら、

```terminal
$ composer create-project --prefer-dist laravel/laravel プロジェクト名
```

その後、プロジェクトに移動して以下を実行。

```terminal
$ php artisan serve
```

[http://localhost:8000](http://localhost:8000)にアクセスしてLaravelの初期画面が確認できればOK。


## 2 Vue.jsのインストール
[readouble - Laravel 7.x JavaScriptとCSSスカフォールド
](https://readouble.com/laravel/7.x/ja/frontend.html)を読みながらインストールします。

まずは、laravel/uiのインストール。

```terminal
$ composer require laravel/ui
```
`laravel/ui`はLaravel6から用いられる、Bootstrap、React、Vueなどのフロントエンドパッケージをインストールする為のライブラリ。

laravel/uiのインストールを終えたら、以下でVue.jsのスカフォールドを作成。

```
$ php artisan ui vue
```

package.jsonはこんな感じ。Vue.jsの項目もちゃんとできてます。

```json:package.json
"devDependencies": {
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
}
```
bootstrapは使用しないので消し、依存関係にあるjquery、poper.jsも消しました。

npm installを実行。

```
$ npm install
```

続いて、ass.scssを編集。
bootstrapを読み込んでいるとバッティングの可能性があるので以下の箇所をコメントアウトします。

```scss:resource/sass/app.scss
// Bootstrap
// @import '~bootstrap/scss/bootstrap';
```

そうしたら、試しにLaravelが用意してくれているコンポーネントを読み込んでみます。
`resources/views/welcome.blade.php`を以下のように変更します。

```php:resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <link rel="stylesheet" href="{{ mix('css/app.css') }}">
      <title>{{ config('app.name', 'Laravel') }}</title>
  </head>
  <body>
    <div id="app">
      <v-app>
        <example-component></example-component>
      </v-app>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>
```

コンパイルを行い、

```terminal
$ npm run hot
```

[http://localhost:8000](http://localhost:8000)にアクセスして確認。
bootstrapを消したのでスタイルが当てられていないと思いますが、後にVuetifyを導入してスタイルを当てるので問題ありません。

## 3 Vuetifyのインストール

Vuetifyの公式ドキュメントを読みながらインストールします。
[vuetifyjs - Webpackでのインストール](https://vuetifyjs.com/ja/getting-started/installation/#webpack-3067306e30a430f330b930c830fc30eb)

Vuetifyのインストール。

```terminal
$ npm install vuetify --save-dev
```

Vuetifyのドキュメントではsassとsass-loaderもインストールしていますが、Laravelにはデフォルトでpackage.jsonにそれらの記述があります。
なので、Vue.jsをインストールした時の`npm install`で既にインストールされていますのでここで行う必要はありません。

ドキュメント通り、pluginsディレクトリを作成し、そこに`vuetify.js`を作成します。

```terminal
$ mkdir resources/js/plugins
$ cd resources/js/plugins
$ touch vuetify.js
```
vuetify.jsを以下のように編集。

```js: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)
```

app.jsで読み込みます。

```js:resource/js/app.js
import './bootstrap'
import Vue from 'vue';
import Vuetify from './plugins/vuetify' // vuetify.jsを読み込み

import ExampleComponent from './components/ExampleComponent.vue'

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

これでVuetifyの導入は完了です。



## 4 マテリアルデザインのインストールとフォントの適応

一度ここまでの設定で、ドキュメントに掲載されているCardsの例を表示してみます。
↓こういうの。
![スクリーンショット 2021-01-25 16.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546124/9bc05afc-81b7-ee65-8c4f-2b4e32792eb3.png)

では、`components/ExampleComponent.vue`を以下のように編集（コピペ）。

```vue:resource/js/components/ExampleComponent.vue
<template>
  <v-card
    :loading="loading"
    class="mx-auto my-12"
    max-width="374"
  >
    <template slot="progress">
      <v-progress-linear
        color="deep-purple"
        height="10"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-img
      height="250"
      src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
    ></v-img>

    <v-card-title>Cafe Badilico</v-card-title>

    <v-card-text>
      <v-row
        align="center"
        class="mx-0"
      >
        <v-rating
          :value="4.5"
          color="amber"
          dense
          half-increments
          readonly
          size="14"
        ></v-rating>

        <div class="grey--text ml-4">
          4.5 (413)
        </div>
      </v-row>

      <div class="my-4 subtitle-1">
        $ • Italian, Cafe
      </div>

      <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-title>Tonight's availability</v-card-title>

    <v-card-text>
      <v-chip-group
        v-model="selection"
        active-class="deep-purple accent-4 white--text"
        column
      >
        <v-chip>5:30PM</v-chip>

        <v-chip>7:30PM</v-chip>

        <v-chip>8:00PM</v-chip>

        <v-chip>9:00PM</v-chip>
      </v-chip-group>
    </v-card-text>

    <v-card-actions>
      <v-btn
        color="deep-purple lighten-2"
        text
        @click="reserve"
      >
        Reserve
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      loading: false,
      selection: 1,
    }),
    methods: {
      reserve () {
        this.loading = true
        setTimeout(() => (this.loading = false), 2000)
      },
    },
  }
</script>
```

これをブラウザで表示してみると……
![スクリーンショット 2021-01-25 19.18.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546124/896def50-6ef0-12bb-9480-2ba6d0fd0c24.png)

赤枠で囲んだ部分に表示されるはずの星マーク(v-rating)が表示されていません。
理由はマテリアルデザインアイコンをインストールしていないから。
ドキュメントによると、

>Vuetify uses Google’s Roboto font and Material Design Icons.


だそうなので、マテリアルデザインアイコンのインストールとグーグルフォントの適応を行います。

方法は二つ。

### 方法その１ - CDNを使う

最もシンプルな方法としてドキュメントで紹介されている方法です。
以下の２つをhead内に付け足すだけ。

```php
<!-- グーグルフォント -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<!-- マテリアルデザインアイコン -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
```

### 方法その2 - インストールする

まずはマテリアルデザインアイコンのインストール。

```terminal
npm install --save  @mdi/font
```

`plugins/vuetify.js`の編集。

```js:resources/js/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css' // 追記

Vue.use(Vuetify)

// opt内にiconfontを追記して適応させる
const opts = {
  icons: {
    iconfont: 'mdi', 
  },
}

export default new Vuetify(opts)
```

続いて、グーグルフォントを適応させる。

```scss:resources/sass/app.scss
// Fonts
// @import url('https://fonts.googleapis.com/css?family=Nunito');
// ↓ 以下に変更
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

// Variables
@import 'variables';
```

これでOK。
コンパイルして再度ブラウザで確認してみると……。

![スクリーンショット 2021-01-25 19.51.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546124/65761fd4-6ec4-67a0-135d-8671fadef12a.png)

完璧👍
わかりづらいですがフォントもしっかりと適応されています。

以上！！！

#参考
[Vuetify - ドキュメント](https://vuetifyjs.com/)
[readouble - Laravel 7.x](https://readouble.com/laravel/7.x/ja/)