LoginSignup
1
2

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

Posted at

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2