使用環境
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
に移動して、動作確認をしています。
変更点1
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');
変更点2
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', }, });
変更点3
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
が必要になります。