Laravel Sail ＋ Vite環境でjQueryからVue.jsに移行するのに少しだけ苦戦したので、備忘録として残しておく。
バージョン
- Laravel：9.36.4
- vite：3.0.0
- laravel-vite-plugin：0.6.1
パッケージをインストールする
sail npm install vue@next
sail npm install vue-loader@next -D
sail npm install vuex@next
sail npm install @vitejs/plugin-vue
各パッケージを上から順にインストールする。
今回の場合、SPAにはしないのでvue-routerはインストールしていない。
しかし、ここでエラーが発生
sail npm install vue@next ←OK
sail npm install vue-loader@next -D ←OK
sail npm install vuex@next ←OK
sail npm install @vitejs/plugin-vue ←NG
vue@nextまでは正常にインストールできたが、@vitejs/plugin-vueをインストールする際にエラーが発生した。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@3.2.7
npm ERR! node_modules/vite
npm ERR! dev vite@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR! dev @vitejs/plugin-vue@"*" 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 /home/sail/.npm/eresolve-report.txt for a full report.
翻訳をしてみたら、「3.0.0のviteが見つかったが、@vitejs/plugin-vue@4.2.3をインストールするのに必要なviteの4系バージョンがねーよ」と怒られているっぽかった。
結論としては、@vitejs/plugin-vueのバージョンをviteのバージョンに合わせてあげると解決した。
sail npm info @vitejs/plugin-vue versions
でバージョンを確認し
sail npm install @vitejs/plugin-vue@3.0.0
で3.0.0をインストールしたら解決した。
vite.config.jsを編集する
公式を参考に編集する
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import vue from '@vitejs/plugin-vue';
export default defineConfig({
server: {
hmr: {
host: 'localhost',
},
},
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
+ vue({
+ template: {
+ base: null,
+ includeAbsolute: false,
+ }
+ }),
],
+ resolve: {
+ alias: {
+ '@': 'resources/js',
+ },
+ extensions: ['.vue', '.js'],
+ },
});
aliasを登録しておくとimportする際にパスがわかりやすくなるみたいです。
インストールできたか確認する
Vue.jsを使用するのに必要なパッケージはインストールできたので、実際にインストールできているのか確認する。
1.ルーティングを記載
web.php
Route::get('test', function() {
return view('test');
});
2.blade作成
test.blade.php
<head>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
3.App.vueを作成
components/App.vue
<template>
<div>テストです</div>
</template>
4.app.jsを編集
app.js
import './bootstrap';
import { createApp } from 'vue';
import App from './components/App.vue';
const app = createApp(App);
app.mount('#app');
5.画面から確認
1のルーティングで作成したパスにアクセスして、確認してApp.vueの内容が表示されたらVueが正常に使用できています。
以上でVueに移行完了です。