Inertia Page Loader

The plugin page loader for Inertia.js, that allows the server-side to use Inertia::render('my-package::Page');.

Features

Powered by unplugin
Supports static build with Vite and Laravel Mix
Supports load pages on runtime
Define the namespace mapping for plugins pages directory
Or read namespace from the npm / composer package

Install

First, install the Inertia Plugin to your main Inertia app:

npm i inertia-page-loader -D

Vite

// vite.config.js
import InertiaPageLoader from 'inertia-page-loader/vite'

export default defineConfig({
  plugins: [
    InertiaPageLoader({ /* options */ }),
  ],
})

Webpack

// webpack.config.js
const InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')

module.exports = {
  /* ... */
  plugins: [
    InertiaPageLoaderPlugin({ /* options */ }),
  ],
}

Laravel Mix

// webpack.mix.js
const InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')

mix
  .webpackConfig({
    plugins: [
      InertiaPageLoaderPlugin({ /* options */ }),
    ],
  })

Type

Add to env.d.ts:

/// <reference types="inertia-page-loader/client" />

Usage

This package supports the Static and Runtime to load the pages (can be mixed to use), so you can select the way to build and use your Inertia pages:

Build for Static
Build for Runtime

Build for Static

Then select the source from which you want to load the page:

NPM Package
Composer Package
Modules (in the main app)

If you created or have a package, you can select the build tool to use the package:

Usage with Vite
Usage with Laravel Mix

Load Pages from NPM Package

You must create an npm package that contains the pages folder:

src/pages/
  ├── Some.vue
  └── Dir/
     └── Other.vue

And added the inertia field to define the namespace mapping, for example in node_modules/my-plugin/package.json:

{
  "name": "my-plugin",
  "inertia": {
    "my-package": "src/pages"
  }
}

Publish this package and back to the main Inertia app to install this package:

npm i my-plugin

Next step you can select the build tool to use:

Usage with Vite
Usage with Laravel Mix

Load Pages from Composer Package

You must create a composer package that contains the pages folder:

resources/js/pages/
  ├── Some.vue
  └── Dir/
     └── Other.vue

And added the extra.inertia field to define the namespace mapping, for example in vendor/ycs77/my-php-package/composer.json:

{
    "name": "ycs77/my-php-package",
    "extra": {
        "inertia": {
            "my-php-package": "resources/js/pages"
        }
    }
}

Publish this package and back to the main Inertia app to install this package:

composer require ycs77/my-php-package

Next step you can select the build tool to use:

Usage with Vite
Usage with Laravel Mix

Usage with Vite

Add inertia-page-loader to vite.config.js, and you can use the function npm() or composer() to load the namespace:

import InertiaPageLoader from 'inertia-page-loader/vite'

export default defineConfig({
  plugins: [
    InertiaPageLoader({
      namespaces: ({ npm, composer }) => [
        // load namespace from npm package:
        npm('my-plugin'),

        // load namespace from composer package:
        composer('ycs77/my-php-package'),
      ],
    }),
  ],
})

And use resolvePage() in resources/js/app.js to resolve the app pages and npm / composer pages (don't use one line function):

import { resolvePage } from '~inertia'

createInertiaApp({
  resolve: resolvePage(() => {
    return import.meta.glob('./pages/**/*.vue', { eager: true })
  }),
})

Or you can add the persistent layout:

import Layout from './Layout'

createInertiaApp({
  resolve: resolvePage(name => {
    return import.meta.glob('./pages/**/*.vue', { eager: true })
  }, page => {
    page.layout = Layout
    return page
  }),
})

Now you can use the page in your controller:

Inertia::render('my-package::Some'); // in npm package
Inertia::render('my-php-package::Some'); // in composer package

Usage with Laravel Mix

Add inertia-page-loader to webpack.mix.js, and you can use the function npm() or composer() to load the namespace:

mix
  .webpackConfig({
    plugins: [
      InertiaPageLoaderPlugin({
        namespaces: ({ npm, composer }) => [
          // load namespace from npm package:
          npm('my-plugin'),

          // load namespace from composer package:
          composer('ycs77/my-php-package'),
        ],
      }),
    ],
  })

And use resolvePage() in resources/js/app.js to resolve the app pages and npm / composer pages:

import { resolvePage } from '~inertia'

createInertiaApp({
  resolve: resolvePage(name => require(`./pages/${name}`)),
})

Or you can add the persistent layout:

import Layout from './Layout'

createInertiaApp({
  resolve: resolvePage(name => require(`./pages/${name}`), page => {
    page.layout = Layout
    return page
  }),
})

Now you can use the page in your controller:

Inertia::render('my-package::Some'); // in npm package
Inertia::render('my-php-package::Some'); // in composer package

Load pages from Modules (in the main app)

If you use the modules package to manage your Laravel application, such as Laravel Modules, you can also define namespace mapping:

Note: Of course, can also be load pages from other locations in the main application.

export default defineConfig({
  plugins: [
    InertiaPageLoader({
      namespaces: [
        // define namespace mapping:
        { 'my-module': 'Modules/MyModule/Resources/js/pages' },

        // define more namespace mapping:
        {
          'my-module-2': 'Modules/MyModule2/Resources/js/pages',
          'special-modal': 'resources/js/SpecialModals',
        },
      ],
    }),
  ],
})

Now you can use the page in your controller:

Inertia::render('my-module::Some');
Inertia::render('my-module-2::Some');
Inertia::render('special-modal::VeryCoolModal');

Build for Runtime

[!WARNING] The runtime is not working with Vue Composition, it's recommended to use Build for Static.

Sometimes you may want users to use the pages without compiling them after installing the composer package, at this time you can load them at runtime. This is the package directory structure:

resources/js/
  ├── my-runtime-plugin.js
  └── pages/
     ├── Some.vue
     └── Other.vue

Use the InertiaPages runtime API in resources/js/my-runtime-plugin.js to load pages:

window.InertiaPages.addNamespace('my-runtime', name => require(`./pages/${name}`))

And setting webpack.mix.js to build assets:

const mix = require('laravel-mix')

mix
  .setPublicPath('public')
  .js('resources/js/my-runtime-plugin.js', 'public/js')
  .vue({ runtimeOnly: true })
  .version()
  .disableNotifications()

Now you can publish this package and install it in the Inertia app, publish assets (my-runtime-plugin.js) to public/vendor/inertia-plugins, and open app.blade.php to include scripts to load pages:

<head>
  <script src="https://cdn.jsdelivr.net/npm/inertia-page-loader@0.8.0/dist/runtime.iife.js" defer></script>
  <script src="/vendor/inertia-plugins/my-runtime-plugin.js" defer></script>
  <!-- app.js must be last one -->
  <script src="{{ mix('/js/app.js') }}" defer></script>
</head>

But the app.js must build with inertia-page-loader, you can follow Install chapter to install it (does not need to include any option), like this:

// vite.config.js
import InertiaPageLoader from 'inertia-page-loader/vite'

export default defineConfig({
  plugins: [
    InertiaPageLoader(),
  ],
})

Or using in Laravel Mix:

// webpack.mix.js
const InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')

mix
  .webpackConfig({
    plugins: [
      InertiaPageLoaderPlugin(),
    ],
  })

Now you can use the page in your controller:

Inertia::render('my-runtime::Some');

Migrate from `inertia-plugin`

Update package in package.json:

 {
   "devDependencies": {
-    "inertia-plugin": "*"
+    "inertia-page-loader": "^0.7.0"
   }
 }

Rename vite plugin:

 // vite.config.js
-import Inertia from 'inertia-plugin/vite'
+import InertiaPageLoader from 'inertia-page-loader/vite'

 export default defineConfig({
   plugins: [
-    Inertia({ /* options */ }),
+    InertiaPageLoader({ /* options */ }),
   ],
 })

Rename webpack plugin:

 // webpack.config.js
-const InertiaPlugin = require('inertia-plugin/webpack')
+const InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')

 module.exports = {
   /* ... */
   plugins: [
-    InertiaPlugin({ /* options */ }),
+    InertiaPageLoaderPlugin({ /* options */ }),
   ],
 }

Update CDN link if you used:

-<script src="https://cdn.jsdelivr.net/npm/inertia-plugin@0.6.0/dist/runtime.iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/inertia-page-loader@0.7.0/dist/runtime.iife.js" defer></script>

Configuration

InertiaPageLoader({
  // Current work directory.
  cwd: process.cwd(),

  // Define namespace mapping.
  namespaces: [],

  // Namespace separator.
  separator: '::',

  // Module extensions.
  extensions: '',
  // extensions: '',            // webpack default
  // extensions: 'vue',         // webpack example
  // extensions: 'vue',         // vite default
  // extensions: ['vue', 'js'], // vite example

  // Use `import()` to load pages for webpack, default is using `require()`.
  // Only for webpack.
  import: false,

  // Enable SSR mode.
  ssr: false,
})

Sponsor

If you think this package has helped you, please consider Becoming a sponsor to support my work~ and your avatar will be visible on my major projects.

Credits

License

MIT LICENSE