NO IMAGE

Laravel10でVueのtemplateが描画されなかった理由が単純なことだった話

今回の事象

Laravel10のプロジェクトにVueを導入。
認証機能もVueを利用したものを導入して動作している。

Vueファイルを作成し、Laravelのbladeに組み込もうとしたが、テンプレートが展開されない。

解決方法

vite.config.jsに以下を追記

import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
    // 現在のモードに基づいて環境変数をロード
    const env = loadEnv(mode, process.cwd(), 'VITE_');

    return {
<<<------省略------>>>
        resolve: {
            alias: {
                vue: 'vue/dist/vue.esm-bundler.js'
            },
        },
<<<------省略------>>>
    };
});

理由

Laravel10ではデフォルトではランタイムバージョンが参照されるため、テンプレート機能が動作しない。

テンプレートのコンパイルがサポートされている、ESモジュールバージョンをエイリアスに登録してテンプレートを利用できるようにする。

あとがき

全然気づかずに、過去のプロジェクトを参照して解決しました。こんなところが原因だと思わず3時間以上かかりました。。。。

導入の仕方にもよると思いますが、結構な罠だと思います。