こんにばんわ！ @ktoshi です。
今回は私が困ったときに縋りつく Laravel についてお話します。
ちなみに私はインフラエンジニアです。メインは。

目的

Laravel6 に Vuetify を導入したい。
Laravel6 より Vue.js などが標準ライブラリから外れたため、Laravel5 以前の記事ではそのまま導入ができなくなりました。
毎度導入しているときに複数の記事を見ながら、導入しているので備忘録もかねて。

Vuetify とは

公式HP
Vue.js のコンポーネント集です。
ボタンやテーブルなどを描画する際のコンポーネントがあつまっているので、
モダンなデザインを容易に作ることができます。

環境

OS: Windows 10 Pro
PHP: 7.3.10

Composer インストール

Laravel で使用するパッケージ管理に利用します。
みなさんご存じですよね。多くは語りません。
Composerインストール手順(Windows) を参考されたし。

node.js インストール

node.js 自体をサーバとして利用も可能ですが、Laravel では主に Vue.js の
ビルドを目的に利用します。
みなさんご存じですよね。多くは語りません。
Node.js / npmをインストールする（for Windows）を参考されたし。
私の環境ではバージョンは下記でした。

node --version
v12.13.0

npm --version
6.12.0

Laravel インストール

みなさんご存じですよね。多くは語りません。

composer create-project laravel/laravel --prefer-dist <PROJECT NAME>

これでカレントディレクトリ以下に PROJECT_NAME のフォルダが作成され、
その配下に Laravel が導入された状態となっています。

Vue.js のインストール

先でも述べたように Laravel5 以前であれば、この状態で npm install をしてやると
Vue.js が導入できましたが、 Laravel6 以降ではひと手間必要です。
ひと手間が料理をおいしくすると同じくひと手間が Laravel をおいしくします。（知りません

# プロジェクトフォルダへ移動
cd <PROJECT NAME>

# 必要なライブラリをインストール
composer require laravel/ui

# 私は Vue を使うねん！と宣言
php artisan ui vue

# おら！
npm install

これで Vue.js の導入が完了です。
Laravel5 以前で npm install を叩いた状態と同じですね。

Vuetify インストール

Vuetify は npm（Node.js のパッケージ管理ツール）を用いてインストールします。
（いや、そのコマンドさっき使ってたのに今更説明かい。）

# Vuetify の最新パッケージのインストール
npm install vuetify

インストールが終われば、Laravel 側で Vuetify を利用するように設定します。

resoureces/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

これで Laravel にてVuetify を利用できる状態となりました。

実践

では、実際にVuetify を使ったページを作ってみましょう。
元々用意されているサンプルのファイルを書き換えてみます。

resources\js\components\ExampleComponent.vue

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-card class="mx-auto">
            <v-card-text>
              <p class="text--primary">
                Hello Vuetify World!!
              </p>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn>やったね！！</v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

resources\views\welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- CSRF Token -->
      <meta name="csrf-token" content="{{ csrf_token() }}">

      <title>{{ config('app.name', 'Laravel') }}</title>

      <!-- Styles -->
      <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>
  <body>
    <div id="app">
      <v-app>
        <!-- これがさっき修正したファイル -->
        <example-component></example-component>
      </v-app>
    </div>
    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>

次に Vue.js のビルドと Laravel を起動させます。
なお、各コマンドともに実行状態が続くので二つのプロンプトで作業をしてください。

# Laravel の起動
php artisan serve
Laravel development server started: http://127.0.0.1:8000　# これが出ればOK

# ビルドコマンドを発行。watch にしておくと変更を検知して勝手にビルドしてくれるので楽。
npm run watch
DONE  Compiled successfully in XXXms # これが出ればOK

それぞれが起動すれば http://localhost:8000/ へ接続してみましょう。
下記のようなページが表示されていればOKです。

まとめ

Laravel6 から標準でなくなった Vue.js のインストールまで行ってしまえば、
後は Laravel5 と同様の方法で Vuetify を利用することが可能です。

私は今まで element-ui を主に使っていましたが、今回は Vuetify を利用する、という記事を書いてみました。
なんで変えたかって？飽きたからです。
ただ、実際に Vuetify を使ってみて思ったのはデザインなどは非常に好みでした。
テーブルに関しても element-ui より柔軟でよかったです。
ただ、timepicker のデザインが不満だったのと element-ui の datetimepicker がマジ神だなと感じました。

それでは皆様、よい Vuetify ライフをお送りください。

Laravel6系 に Vuetify を入れてみる

目的