Skip Navigation
Inertia
Docs

Get Started

Usage

What is Inertia.js?

Inertia is a new approach to building classic server-driven web apps. It works similar to the backend architecture for Kirby's Panel - but built with an ecosystem around it that works with Vue, React and Svelte.

Raw JSON data is returned from the server and rendered on the client-side. This allows you to build SPAs without having to build a separate API. Utilizing the server-side renderer, this makes perfect for websites that are heavily interactive but shouldn't suffer from SEO or performance issues.

Setup

I recommend using Vite & kirby-laravel-vite for compiling your frontend assets. It's the best way to get started with a powerful build setup without having to worry too much about the configuration.

To get started with Inertia, simply install the plugin using composer (composer require tobimori/kirby-inertia) and setup your default.php template to include the Inertia response:

<!DOCTYPE html>
<html>

<head>
	<?php /* other meta tags */ ?>

	<?php /* kirby-laravel-vite */ ?>
	<?= vite()->reactRefresh() ?>
	<?= vite(['src/index.tsx', 'src/styles/index.css']) ?>

	<?= inertiaHead() ?> <?php /* for server-side-rendered head */ ?>
</head>

<body>
	<?= inertia() ?>  <?php /* renders the application shell or server-side-rendered content */ ?>
</body>

</html>

You can then get started building your Inertia frontend.