Laravel Sail ＋ Vite環境でjQueryからVue.jsに移行する

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を編集する
[公式](https://readouble.com/laravel/9.x/ja/vite.html)を参考に編集する

https://readouble.com/laravel/9.x/ja/vite.html

```diff_javascript
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.ルーティングを記載
~~~ruby:web.php
Route::get('test', function() {
    return view('test');
});
~~~
### 2.blade作成
~~~ruby:test.blade.php
<head>
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>

<body>
    <div id="app"></div>
</body>
~~~
### 3.App.vueを作成
~~~ruby:components/App.vue
<template>
    <div>テストです</div>
</template>
~~~
### 4.app.jsを編集
~~~ruby: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に移行完了です。