使用環境
| Name | Version |
|---|---|
| PHP | 8.2.14 |
| Laravel | v10.38.2 |
| laravel/jetstream | v4.2.0 |
| inertiajs/inertia-laravel | v0.6.11 |
| Node.js | v20.10.0 |
| Vue.js | 3.3.13 |
| Vite | 5.0.10 |
| Laravel Vite Plugin | 1.0.0 |
Inertia.js
最初に書いておきますが、Inertia.jsは使い慣れていないので、正解かどうか、わかりません。*1
Laravelで、Laravel Modulesを使わず、簡易的にモジュール構造を実現した環境下で、Inertia.js Laravel Adapterを使います。
resources/jsの中身をModules/Admin/Resources/jsに移動して、動作確認をしています。
変更点１
Jetstreamをインストールすると、routes/web.phpに、下記のようなコードがあります。*2
viewを使う時は、admin::Dashboardと書きますが、Inertia.js Laravel Adapterの場合は、パスを書くのが、ポイントです。
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->name('dashboard');
下記に変更します。
Route::get('/dashboard', function () {
return Inertia::render('Modules/Admin/Resources/js/Pages/Dashboard');
})->name('dashboard');
変更点２
resources/js/app.jsを変更します。*3
Modules/<module名>/Resources/js/Pagesにあるvueファイルを読むように設定します。
下記の理由があるからだと、推測しています。
vue-routerを使わないmanifest.jsonの生成に関係がある
createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent(`/${name}.vue`, import.meta.glob('/Modules/*/Resources/js/Pages/**/*.vue')), setup({ el, App, props, plugin }) { return createApp({ render: () => h(App, props) }) .use(plugin) .use(ZiggyVue) .mount(el); }, progress: { color: '#4B5563', }, });
変更点３
resources/views/app.blade.phpを変更します。
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
下記に変更します。
@vite(['resources/js/app.js', "{$page['component']}.vue"])
感想
Modules/<module名>/Resources/js/Pagesに入れておけばいいので、意外に管理しやすいかもしれません。
モジュールを追加したり削除する度に、pnpm run buildが必要になります。
