{"id":19651565,"url":"https://github.com/ycs77/inertia-page-loader","last_synced_at":"2026-03-05T21:32:53.566Z","repository":{"id":37995527,"uuid":"503939279","full_name":"ycs77/inertia-page-loader","owner":"ycs77","description":"The plugin page loader for Inertia.js","archived":false,"fork":false,"pushed_at":"2025-06-10T11:18:46.000Z","size":364,"stargazers_count":33,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-25T07:31:38.067Z","etag":null,"topics":["inertiajs","laravel","page-loader","unplugin","vite","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ycs77.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"ycs77"}},"created_at":"2022-06-15T22:25:26.000Z","updated_at":"2025-10-16T05:42:11.000Z","dependencies_parsed_at":"2024-01-07T10:28:43.942Z","dependency_job_id":"b98d78b8-0eaf-4662-9e7f-53f040494fea","html_url":"https://github.com/ycs77/inertia-page-loader","commit_stats":null,"previous_names":["ycs77/inertia-page-loader","ycs77/inertia-plugin"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/ycs77/inertia-page-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ycs77%2Finertia-page-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ycs77%2Finertia-page-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ycs77%2Finertia-page-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ycs77%2Finertia-page-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ycs77","download_url":"https://codeload.github.com/ycs77/inertia-page-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ycs77%2Finertia-page-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30057573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inertiajs","laravel","page-loader","unplugin","vite","vue","webpack"],"created_at":"2024-11-11T15:07:03.814Z","updated_at":"2026-03-05T21:32:53.544Z","avatar_url":"https://github.com/ycs77.png","language":"TypeScript","funding_links":["https://patreon.com/ycs77","https://www.patreon.com/ycs77"],"categories":[],"sub_categories":[],"readme":"# Inertia Page Loader\n\n[![NPM version][ico-version]][link-npm]\n[![Software License][ico-license]](LICENSE)\n[![GitHub Tests Action Status][ico-github-action]][link-github-action]\n[![Total Downloads][ico-downloads]][link-downloads]\n\nThe plugin page loader for Inertia.js, that allows the server-side to use `Inertia::render('my-package::Page');`.\n\n## Features\n\n* Powered by [unplugin](https://github.com/unjs/unplugin)\n* Supports **static** build with [Vite](https://vitejs.dev/) and [Laravel Mix](https://laravel-mix.com/)\n* Supports load pages on **runtime**\n* Define the namespace mapping for plugins **pages** directory\n* Or read namespace from the **npm** / **composer** package\n\n## Install\n\nFirst, install the Inertia Plugin to your main Inertia app:\n\n```bash\nnpm i inertia-page-loader -D\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```js\n// vite.config.js\nimport InertiaPageLoader from 'inertia-page-loader/vite'\n\nexport default defineConfig({\n  plugins: [\n    InertiaPageLoader({ /* options */ }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```js\n// webpack.config.js\nconst InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    InertiaPageLoaderPlugin({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLaravel Mix\u003c/summary\u003e\u003cbr\u003e\n\n```js\n// webpack.mix.js\nconst InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')\n\nmix\n  .webpackConfig({\n    plugins: [\n      InertiaPageLoaderPlugin({ /* options */ }),\n    ],\n  })\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n### Type\n\nAdd to `env.d.ts`:\n\n```ts\n/// \u003creference types=\"inertia-page-loader/client\" /\u003e\n```\n\n## Usage\n\nThis 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:\n\n\u003c!-- no toc --\u003e\n* [Build for Static](#build-for-static)\n* [Build for Runtime](#build-for-runtime)\n\n## Build for Static\n\nThen select the source from which you want to load the page:\n\n\u003c!-- no toc --\u003e\n* [NPM Package](#load-pages-from-npm-package)\n* [Composer Package](#load-pages-from-composer-package)\n* [Modules (in the main app)](#load-pages-from-modules-in-main-app)\n\nIf you created or have a package, you can select the build tool to use the package:\n\n\u003c!-- no toc --\u003e\n* [Usage with Vite](#usage-with-vite)\n* [Usage with Laravel Mix](#usage-with-laravel-mix)\n\n### Load Pages from NPM Package\n\nYou must create an npm package that contains the `pages` folder:\n\n```\nsrc/pages/\n  ├── Some.vue\n  └── Dir/\n     └── Other.vue\n```\n\nAnd added the `inertia` field to define the namespace mapping, for example in `node_modules/my-plugin/package.json`:\n\n```json\n{\n  \"name\": \"my-plugin\",\n  \"inertia\": {\n    \"my-package\": \"src/pages\"\n  }\n}\n```\n\nPublish this package and back to the main Inertia app to install this package:\n\n```bash\nnpm i my-plugin\n```\n\nNext step you can select the build tool to use:\n\n\u003c!-- no toc --\u003e\n* [Usage with Vite](#usage-with-vite)\n* [Usage with Laravel Mix](#usage-with-laravel-mix)\n\n### Load Pages from Composer Package\n\nYou must create a composer package that contains the `pages` folder:\n\n```\nresources/js/pages/\n  ├── Some.vue\n  └── Dir/\n     └── Other.vue\n```\n\nAnd added the `extra.inertia` field to define the namespace mapping, for example in `vendor/ycs77/my-php-package/composer.json`:\n\n```json\n{\n    \"name\": \"ycs77/my-php-package\",\n    \"extra\": {\n        \"inertia\": {\n            \"my-php-package\": \"resources/js/pages\"\n        }\n    }\n}\n```\n\nPublish this package and back to the main Inertia app to install this package:\n\n```bash\ncomposer require ycs77/my-php-package\n```\n\nNext step you can select the build tool to use:\n\n\u003c!-- no toc --\u003e\n* [Usage with Vite](#usage-with-vite)\n* [Usage with Laravel Mix](#usage-with-laravel-mix)\n\n### Usage with Vite\n\nAdd `inertia-page-loader` to `vite.config.js`, and you can use the function `npm()` or `composer()` to load the namespace:\n\n```js\nimport InertiaPageLoader from 'inertia-page-loader/vite'\n\nexport default defineConfig({\n  plugins: [\n    InertiaPageLoader({\n      namespaces: ({ npm, composer }) =\u003e [\n        // load namespace from npm package:\n        npm('my-plugin'),\n\n        // load namespace from composer package:\n        composer('ycs77/my-php-package'),\n      ],\n    }),\n  ],\n})\n```\n\nAnd use `resolvePage()` in `resources/js/app.js` to resolve the app pages and npm / composer pages (**don't use one line function**):\n\n```js\nimport { resolvePage } from '~inertia'\n\ncreateInertiaApp({\n  resolve: resolvePage(() =\u003e {\n    return import.meta.glob('./pages/**/*.vue', { eager: true })\n  }),\n})\n```\n\nOr you can add the persistent layout:\n\n```js\nimport Layout from './Layout'\n\ncreateInertiaApp({\n  resolve: resolvePage(name =\u003e {\n    return import.meta.glob('./pages/**/*.vue', { eager: true })\n  }, page =\u003e {\n    page.layout = Layout\n    return page\n  }),\n})\n```\n\nNow you can use the page in your controller:\n\n```php\nInertia::render('my-package::Some'); // in npm package\nInertia::render('my-php-package::Some'); // in composer package\n```\n\n### Usage with Laravel Mix\n\nAdd `inertia-page-loader` to `webpack.mix.js`, and you can use the function `npm()` or `composer()` to load the namespace:\n\n```js\nmix\n  .webpackConfig({\n    plugins: [\n      InertiaPageLoaderPlugin({\n        namespaces: ({ npm, composer }) =\u003e [\n          // load namespace from npm package:\n          npm('my-plugin'),\n\n          // load namespace from composer package:\n          composer('ycs77/my-php-package'),\n        ],\n      }),\n    ],\n  })\n```\n\nAnd use `resolvePage()` in `resources/js/app.js` to resolve the app pages and npm / composer pages:\n\n```js\nimport { resolvePage } from '~inertia'\n\ncreateInertiaApp({\n  resolve: resolvePage(name =\u003e require(`./pages/${name}`)),\n})\n```\n\nOr you can add the persistent layout:\n\n```js\nimport Layout from './Layout'\n\ncreateInertiaApp({\n  resolve: resolvePage(name =\u003e require(`./pages/${name}`), page =\u003e {\n    page.layout = Layout\n    return page\n  }),\n})\n```\n\nNow you can use the page in your controller:\n\n```php\nInertia::render('my-package::Some'); // in npm package\nInertia::render('my-php-package::Some'); // in composer package\n```\n\n### Load pages from Modules (in the main app)\n\nIf you use the modules package to manage your Laravel application, such as [Laravel Modules](https://github.com/nWidart/laravel-modules), you can also define namespace mapping:\n\n\u003e **Note**: Of course, can also be load pages from other locations in the main application.\n\n```js\nexport default defineConfig({\n  plugins: [\n    InertiaPageLoader({\n      namespaces: [\n        // define namespace mapping:\n        { 'my-module': 'Modules/MyModule/Resources/js/pages' },\n\n        // define more namespace mapping:\n        {\n          'my-module-2': 'Modules/MyModule2/Resources/js/pages',\n          'special-modal': 'resources/js/SpecialModals',\n        },\n      ],\n    }),\n  ],\n})\n```\n\nNow you can use the page in your controller:\n\n```php\nInertia::render('my-module::Some');\nInertia::render('my-module-2::Some');\nInertia::render('special-modal::VeryCoolModal');\n```\n\n## Build for Runtime\n\n\u003e [!WARNING]\n\u003e The runtime is not working with Vue Composition, it's recommended to use [Build for Static](#build-for-static).\n\nSometimes 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:\n\n```\nresources/js/\n  ├── my-runtime-plugin.js\n  └── pages/\n     ├── Some.vue\n     └── Other.vue\n```\n\nUse the **InertiaPages** runtime API in `resources/js/my-runtime-plugin.js` to load pages:\n\n```js\nwindow.InertiaPages.addNamespace('my-runtime', name =\u003e require(`./pages/${name}`))\n```\n\nAnd setting `webpack.mix.js` to build assets:\n\n```js\nconst mix = require('laravel-mix')\n\nmix\n  .setPublicPath('public')\n  .js('resources/js/my-runtime-plugin.js', 'public/js')\n  .vue({ runtimeOnly: true })\n  .version()\n  .disableNotifications()\n```\n\nNow 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:\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/inertia-page-loader@0.8.0/dist/runtime.iife.js\" defer\u003e\u003c/script\u003e\n  \u003cscript src=\"/vendor/inertia-plugins/my-runtime-plugin.js\" defer\u003e\u003c/script\u003e\n  \u003c!-- app.js must be last one --\u003e\n  \u003cscript src=\"{{ mix('/js/app.js') }}\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nBut the `app.js` must build with `inertia-page-loader`, you can follow [Install](#install) chapter to install it (does not need to include any option), like this:\n\n```js\n// vite.config.js\nimport InertiaPageLoader from 'inertia-page-loader/vite'\n\nexport default defineConfig({\n  plugins: [\n    InertiaPageLoader(),\n  ],\n})\n```\n\nOr using in Laravel Mix:\n\n```js\n// webpack.mix.js\nconst InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')\n\nmix\n  .webpackConfig({\n    plugins: [\n      InertiaPageLoaderPlugin(),\n    ],\n  })\n```\n\nNow you can use the page in your controller:\n\n```php\nInertia::render('my-runtime::Some');\n```\n\n## Migrate from `inertia-plugin`\n\nUpdate package in `package.json`:\n\n```diff\n {\n   \"devDependencies\": {\n-    \"inertia-plugin\": \"*\"\n+    \"inertia-page-loader\": \"^0.7.0\"\n   }\n }\n```\n\nRename vite plugin:\n\n```diff\n // vite.config.js\n-import Inertia from 'inertia-plugin/vite'\n+import InertiaPageLoader from 'inertia-page-loader/vite'\n\n export default defineConfig({\n   plugins: [\n-    Inertia({ /* options */ }),\n+    InertiaPageLoader({ /* options */ }),\n   ],\n })\n```\n\nRename webpack plugin:\n\n```diff\n // webpack.config.js\n-const InertiaPlugin = require('inertia-plugin/webpack')\n+const InertiaPageLoaderPlugin = require('inertia-page-loader/webpack')\n\n module.exports = {\n   /* ... */\n   plugins: [\n-    InertiaPlugin({ /* options */ }),\n+    InertiaPageLoaderPlugin({ /* options */ }),\n   ],\n }\n```\n\nUpdate CDN link if you used:\n\n```diff\n-\u003cscript src=\"https://cdn.jsdelivr.net/npm/inertia-plugin@0.6.0/dist/runtime.iife.js\"\u003e\u003c/script\u003e\n+\u003cscript src=\"https://cdn.jsdelivr.net/npm/inertia-page-loader@0.7.0/dist/runtime.iife.js\" defer\u003e\u003c/script\u003e\n```\n\n## Configuration\n\n```js\nInertiaPageLoader({\n  // Current work directory.\n  cwd: process.cwd(),\n\n  // Define namespace mapping.\n  namespaces: [],\n\n  // Namespace separator.\n  separator: '::',\n\n  // Module extensions.\n  extensions: '',\n  // extensions: '',            // webpack default\n  // extensions: 'vue',         // webpack example\n  // extensions: 'vue',         // vite default\n  // extensions: ['vue', 'js'], // vite example\n\n  // Use `import()` to load pages for webpack, default is using `require()`.\n  // Only for webpack.\n  import: false,\n\n  // Enable SSR mode.\n  ssr: false,\n})\n```\n\n## Sponsor\n\nIf you think this package has helped you, please consider [Becoming a sponsor](https://www.patreon.com/ycs77) to support my work~ and your avatar will be visible on my major projects.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.patreon.com/ycs77\"\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/ycs77/static/sponsors.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://www.patreon.com/ycs77\"\u003e\n  \u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patron\" /\u003e\n\u003c/a\u003e\n\n## Credits\n\n* [inertia-laravel#92](https://github.com/inertiajs/inertia-laravel/issues/92)\n* [unplugin](https://github.com/unjs/unplugin)\n* [Laravel](https://laravel.com/)\n\n## License\n\n[MIT LICENSE](LICENSE)\n\n[ico-version]: https://img.shields.io/npm/v/inertia-page-loader?style=flat-square\n[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen?style=flat-square\n[ico-github-action]: https://img.shields.io/github/actions/workflow/status/ycs77/inertia-page-loader/ci.yml?branch=main\u0026label=tests\u0026style=flat-square\n[ico-downloads]: https://img.shields.io/npm/dt/inertia-page-loader?style=flat-square\n\n[link-npm]: https://www.npmjs.com/package/inertia-page-loader\n[link-github-action]: https://github.com/ycs77/inertia-page-loader/actions/workflows/ci.yml?query=branch%3Amain\n[link-downloads]: https://www.npmjs.com/package/inertia-page-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fycs77%2Finertia-page-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fycs77%2Finertia-page-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fycs77%2Finertia-page-loader/lists"}