Inertia.js Mithril Adapter

This is the Mithril.js client-side adapter for Inertia.

Inertia.js lets you quickly build modern single-page apps using classic server-side routing and controllers, without building an API.

To use Inertia.js you need both a server-side adapter as well as a client-side adapter.

Server-side setup

Be sure to follow the installation instructions for the server-side framework you use.

Client-side setup

Install dependencies

Install the Inertia client-side adapters using NPM or Yarn.

npm install @inertiajs/inertia @tebe/inertia-mithril
yarn add @inertiajs/inertia @tebe/inertia-mithril

Initialize app

Next, update your main JavaScript file to boot your Inertia app. All we're doing here is initializing the client-side framework with the base Inertia page component.

import m from 'mithril'

import {InertiaApp} from '@tebe/inertia-mithril'

const app = document.getElementById('app')

InertiaApp.initialPage = JSON.parse(app.dataset.page)
InertiaApp.resolveComponent = name => require(`./Pages/${name}`).default

m.mount(app, InertiaApp)

The resolveComponent is a callback that tells Inertia how to load a page component. It receives a page name (string), and must return a component instance.

Visit Client-side setup to learn more.

Links

To create links within an Inertia app you'll need to use the Inertia link component. This is a light wrapper around a standard anchor link that intercepts click events and prevents full page reloads from occurring. This is how Inertia provides a single-page app experience.

Creating links

To create an Inertia link, use the Inertia link component. Note, any attributes you provide will be proxied to the underlying <a> tag.

import {InertiaLink} from '@tebe/inertia-mithril'

m(InertiaLink, {href: '/'}, 'Home')

Method

You can specify the method for an Inertia link request. The default is GET, but you can also use POST, PUT, PATCH, and DELETE.

m(InertiaLink, {href: '/logout', method:'post'}, 'Logout')

Data

You can add data using the data attribute. This can be an object, or a FormData instance.

m(InertiaLink, {href: '/logout', method:'post', data: { foo: bar }}, 'Save')

Replace

You can specify the browser history behaviour. By default page visits push (new) state (window.history.pushState) into the history, however it's also possible to replace state (window.history.replaceState) by setting the replace attribute to true. This will cause the visit to replace the current history state, instead of adding a new history state to the stack.

m(InertiaLink, {href: '/logout', replace:true}, 'Logout')

Preserve state

You can preserve a page component's local state using the preserve-state attribute. This will prevent a page component from fully re-rendering. This is especially helpful with forms, since you can avoid manually repopulating input fields, and can also maintain a focused input.

let query = {foo: bar}
m(InertiaLink, {href: '/search', method:'post', data: query, preserveState: true}, 'Search')

Preserve scroll

By default page visits will automatically reset the scroll position back to the top of the page (and any scroll regions you've defined). You can use the preserve-scroll attribute to disable this behaviour.

m(InertiaLink, {href: '/', preserveScroll: true}, 'Home')

Partial reloads

The only option allows you to request a subset of the props (data) from the server on subsequent visits to the same page. This feature is called partial reloads, and can be a helpful performance optimization if it's acceptable that some page data becomes stale. For partial reloads to be effective, be sure to use lazy evaluation server-side.

m(InertiaLink, {href: '/', only: ['someProps']}, 'Home')

Demo

Here is a working demo using this adapter.

https://pingcrm-mithril.tebe.ch

More about Inertia

Visit inertiajs.com to learn more.