Vueは友達
ホーム
>
Laravel
>
Laravel11でVue3を読み込めなかった時の対処法

Laravel11でVue3を読み込めなかった時の対処法

Laravel11でVue3を読み込めなかった時の対処法

6 回閲覧されました

みなさんこんにちは、jonioです。

Laravel11でVue3を読み込みができなかったのですが今回はその時の対処法です。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

原因

恐らくviteだと思います。

vite.config.jsに下記の記述をしていたとします。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

エラーが出ていないのにVueが読み込めない場合は「resources > js > app.js」に下記の記述があるはずです。

import { createApp } from 'vue';

ネットの記事は上記の記述ですがviteを使っている場合はこの記述ではvueを認識できないみたいです。

vueを認識できるようにする為には下記の記述に変更します。

import { createApp } from 'vue/dist/vue.esm-bundler.js';

これをVueの読み込みができるようになります。

vite.config.jsで対応する方法

「import { createApp } from ‘vue’;」をそのまま使う方法もあります。

その場合はvite.config.jsに下記の記述をします。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    
    
    //ここから追加
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
    //ここまで追加
    
    
});

これでVueを認識できます。