【Laravel×Vuetify】セットアップ奮闘記

2021/10/16

はじめまして
ヨコイと申します。

今回LaravelにVuetifyを導入しようとしたら見事にハマってしまい、大変な思いをしたため、その件について記事を書きました。

そもそもの背景

とある私的な目的でLaravelを使ったツールの作成に取り掛かろうと思い、サーバサイドはVuetifyをつかって効率的に実装しよう（サボろう）と考えました。
サーバサイドの実装にはQiitaの下記リンクからリポジトリをクローンして環境構築しました。
最強のLaravel開発環境をDockerを使って構築する - Qiita
余談になりますがこちらのテンプレートを作成していただいた@ucan-labさん。素敵なテンプレートをありがとうございます。大変助かっております。
Laravelの環境構築が無事に済み、Vueを使えるようにするためにJetstreamをインストール！こちらも問題ナシ！ヨシ！いけるっ！！　そう確信した矢先に問題が発生しました。

何が起きたのか？

結論から書きますと「VuetifyがVue3に対応していなかった。」※2021年10月16日現在

Vuetifyの現在のバージョンはVue 3をサポートしていません。 Vue3に対応する Vuetify v3 がリリース予定です。 新しいプロジェクトを作成する場合は、Vue CLI プロンプトから Vue 2 を選択したか、既存の Vue 2 プロジェクトにインストールすることを確認してください。

このままではLaravelでVuetifyを使うことはできません。

なんとかならないの？

いろいろと試してはみましたが、うまくいきませんでした。😭（以下試してみた「いろいろ」）

  • package.jsonのvueのバージョンを無理やり2.5.17にしてみる→エラー頻発
  • Jetstreamを使わずにLaravel/uiを使ってみる→エラー頻発
  • Vue単体でインストール→なぜかVue3がインストールされる
  • Laravelのマイナーバージョンを指定する→なぜか最新版がインストールされる

どうして........

ではどうやって解決したのか？

結論から申し上げますと「解決していない」です。
私がやったことといえばLaravelの環境構築を行う時にLaravelのバージョンを6に固定しました。
その後Laravel/uiのインストール、Vuetifyのインストール・セットアップを行ったところ、割と素直に動いてくれました。（私の貴重な時間を返してほしい）
Laravelの最新版を使いながら、VuetifyとコラボレーションさせるというのはVue3に対応するまでは難しそうです.........
このような悩みかたをしているエンジニアもおそらく少ないとは思いますが、注意喚起（と言えるか微妙ですが）させてください。

まとめ

Laravelの最新版（8系）とVuetifyをうまく組み合わせるのは難しそうです。
Laravel6系もしくは7系（自分は試していないですが）でやるのが無難だと思います。
はやくVue3に対応してくれるといいですね✊

© Koyubi Yokoi 2022