Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.
Inertia isn’t a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it’s designed to work with them. Think of Inertia as glue that connects the two. Inertia comes with three official client-side adapters (React, Vue, and Svelte).
This is an adapter for ProcessWire. Inertia replaces PHP views altogether by returning JavaScript components from controller actions. Those components can be built with your frontend framework of choice.
-
✓ Render React/Vue/Svelte from controllers
-
✓ Flash data passed to props
-
✓ Assets Versioning: https://inertiajs.com/asset-versioning
-
❏ Lazy Evaluation: https://inertiajs.com/responses#lazy-evaluation
-
✓ Auto put csrf token in props: https://inertiajs.com/csrf-protection
-
✓ Override redirect codes: https://inertiajs.com/redirects#303-response-code
-
❏ Partial reloads: https://inertiajs.com/partial-reloads
-
✓ Shared data interface: https://inertiajs.com/shared-data
You only need to create a file named templates/app.view.php. This file will be rendered when calling $inertia→render().
This view will receive a param named $inertia that you can use to render the app div.
-
$inertia→page: The properties that will render. -
$inertia→json: The inertia page as a json string. -
$inertia→tag: An html div tag with the json string.
Use $inertia→tag to render Inertia’s root element. If you want more custom element
you can use the $inertia→json variable.
<div id='app' data-page='{$inertia->json}'></div>Example templates/app.view.php
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
<title>Hello World</title>
<!-- Your css and js files -->
<link href='/css/app.css' rel='stylesheet'>
<script src='/js/app.js' defer></script>
</head>
<body>
<?php echo $inertia->tag ?>
</body>
</html>This adapter follows the Inertia Protocol.
The very first request to an Inertia app is just a regular full-page browser request, with no special Inertia headers or data. For these requests, the server returns a full HTML document.
Once an Inertia app has been booted, all subsequent requests to the site are made via XHR with a special X-Inertia header set to true. This header indicates that the request is being made by Inertia, and isn’t a standard full-page visit.
When the server detects the X-Inertia header, instead of responding with a full HTML document, it returns a JSON response with an encoded page object.
Using Inertia with ProcessWire is easy. Just call the render function passing the name of your Component and your Properties.
$inertia = $modules->get('Inertia');
echo $inertia->render('MyComponent', ["my" => "props"]);A sample project is provided at https://github.com/joyofpw/inertia-svelte-mix-pw