概要
Laravel8系にvuetifyのインストールを試みたところ、vueのバージョンとvuetifyの依存関係によってインストールすることができず、かなり苦労しました。
今回は、その解決方法を備忘録として残します。
環境(version)
Ucanさんの「最強のLaravel開発環境をDockerを使って構築する」をお借りします
Docker環境の構築について、わからない方は上記の記事を参考にしていただけると有り難く思います。
docker-laravel/backend/package.json
"@inertiajs/inertia": "^0.8.4",
"@inertiajs/inertia-vue3": "^0.3.5",
"@inertiajs/progress": "^0.2.4",
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
docker-laravel/backend/composer.json
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.3.5",
"laravel/framework": "^8.40",
"laravel/jetstream": "^2.3",
"laravel/sanctum": "^2.11",
"laravel/tinker": "^2.5",
"tightenco/ziggy": "^1.0"
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.2",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3.3"
vuetifyのインストールを試みる
エラーが発生
$ npm i vuetify
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.1.1
npm ERR! node_modules/vue
npm ERR! dev vue@"^3.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.4" from vuetify@2.5.3
npm ERR! node_modules/vuetify
npm ERR! vuetify@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/nakada/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/nakada/.npm/_logs/2021-06-12T05_00_16_070Z-debug.log
原因
jetstream2.3バージョンではVue 3（2021月6月13日時点)を利用しており、 Vue 3はvuetifyに対応していません。
細く言えば、現在のVue 2とVue 3はView部分の(template)の実装が異なり、ビルドする方法が異なります。
Vue 2がvue-template-cmplilerを利用するのに対して、Vue3 は@vue.compiler-sfcを利用しています。
解決方法
今回は、 削除するファイルや不要なファイルがプロジェクトに残らないようにするためLaravelの導入から始めます。
Laravelのプロジェクトを作成
Ucanさんのdocker環境ではmakeコマンドを使用することでプロジェクトを作成することができます
$ make create-project
Jetstreamのバージョンを2.1に下げる
Vue 2を利用するため、Jetstreamのバージョンを指定し再度インストール
$ composer require laravel/jetstream:2.1
inertiaをインストールする
$ php artisan jetstream:install inertia
npmインストール & ビルド
$ npm install && npm run dev
Vuetifyのインストール
$ npm i vuetify
Vuetifyがインストールされていることを確認
$ npm list vue
backend@ /Users/ユーザー名/workspace/docker-laravel/backend
├─┬ @inertiajs/inertia-vue@0.5.12
│ └── vue@2.6.14 deduped
├─┬ portal-vue@2.1.7
│ └── vue@2.6.14 deduped
├── vue@2.6.14
└─┬ vuetify@2.5.3
└── vue@2.6.14
その他
以上で、vuetifyをインストールすることができます！
この記事が役に立った方は、LGTMのクリックをお願い致します。
最後までご覧いただき、ありがとうございました。