独学者Fossa

独学していることなど

簡易モジュール構造(5)

使用環境

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が必要になります。

*1:簡易的であってもモジュール構造自体、正解じゃないかもしれない

*2:省いています

*3:Jetstreamをインストールした時に設置されるapp.jsです