Inertia.js Elm Adapter

The Elm adapter for Inertia.js.

Table of contents

• Installation
• Using the Module
• Using the CLI
  • elm-inertia init
  • elm-inertia add
  • elm-inertia generate
• Additional resources

Installation

npm install -S elm-inertia

Note: This works alongside the companion Elm Package.

Using the Module

Rather than initializing your Elm application the standard way, you'll want to use this package's createInertiaApp function.

This handles wiring up the required ports, reading the data-page attribute, and the other important Inertia things.

Example with Vite

1. Install Vite dependencies

npm i -D vite vite-plugin-elm-watch

2. Ensure Vite is configured to handle *.elm files

// vite.config.js

import { defineConfig } from 'vite'
import elm from 'vite-plugin-elm-watch'

export default defineConfig({
  plugins: [ elm() ]
})

3. Initialize your app using createInertiaApp

// src/main.js

import { createInertiaApp } from 'elm-inertia'
import Main from './src/Main.elm'

let app = createInertiaApp({
  node: document.getElementById('app'),
  init: Main.init,
  flags: {
    window: {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  },
})

// Register ports with `app.ports`...

Using the CLI

This package also comes with a few CLI commands to help you scaffold out new Inertia pages.

Note: The CLI assumes you are following the conventions outlined in our example applications.

elm-inertia init

Creates a new elm-inertia frontend with everything you need.

elm-inertia init

elm-inertia add

Create a new page in the src/Pages folder.

elm-inertia add Organizations/Edit

For convenience, this also runs generate after the page is created.

elm-inertia generate

Regenerate your src/Pages.elm file. This file connects all pages in the src/Pages folder to your application.

elm-inertia generate

How do I delete pages?

To remove a page, simply delete the file, and rerun the elm-inertia generate command!

Additional resources

• PingCRM - Complete application using Elm with Laravel
• Source code - Code for the Elm package and NPM module