パッケージをインストールする

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に移行完了です。