Skip to content
Inertiajs Adapter for Elixir Phoenix
Elixir Other
  1. Elixir 99.5%
  2. Other 0.5%
Branch: develop
Clone or download

Latest commit

dependabot-preview Bump jason from 1.1.2 to 1.2.0 (#34)
Bumps [jason]( from 1.1.2 to 1.2.0.
- [Release notes](
- [Changelog](
- [Commits](michalmuskala/jason@v1.1.2...v1.2.0)

Signed-off-by: dependabot-preview[bot] <>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]>
Latest commit 321b7d3 Mar 18, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Remove cache action Feb 18, 2020
bin Add changelog generator Feb 17, 2020
config Feature/refactor tests (#23) Feb 22, 2020
test Add query params to response (#27) Feb 24, 2020
.credo.exs Added basics and tests Feb 15, 2020
.formatter.exs Initial Feb 14, 2020
.gitignore Fix for flash on 409 Feb 24, 2020 Update changelog Feb 24, 2020 Squashed commit of the following: Feb 18, 2020
LICENSE.txt Squashed commit of the following: Feb 18, 2020 Update readme Feb 24, 2020
mix.exs Bump credo from 1.2.3 to 1.3.1 (#31) Mar 17, 2020
mix.lock Bump jason from 1.1.2 to 1.2.0 (#34) Mar 18, 2020

Inertia Phoenix

GitHub Workflow Status Coveralls

Inertiajs Adapter for Elixir Phoenix


Getting started with Inertia.js in a few steps.


Add to mix.exs:

{:inertia_phoenix, "~> 0.2.7"}

Add Plug to WEB_PATH/router.ex

  pipeline :browser do
    plug InertiaPhoenix.Plug

Import render_inertia lib/active_web.ex

  def controller do
    quote do
      import InertiaPhoenix.Controller


Add to config/config.exs

config :inertia_phoenix,
  assets_version: 1,          # default 1
  inertia_layout: "app.html"  # default app.html

Render from Controller

NOTE: Flash data is automatically passed through to the page props.

def index(conn, _params) do
  render_inertia(conn, "Home", props: %{hello: "world"})

  # OR

  render_inertia(conn, "Home")


  • Doesn't require templates as Inertia Pages are templates.
  • div#app is rendered automatically.

An example layout:

<!DOCTYPE html>
<html lang="en">
    <%= render @view_module, @view_template, assigns %>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

Shared Data / Props

Inertia.js Docs:

To share data:

InertiaPhoenix.share(:hello, fn -> :world end)
InertiaPhoenix.share(:foo, :baz)
InertiaPhoenix.share("user", %{name: "José"})

NOTE: props will overwrite shared data.

Shared Data Custom Plug

For more complex data, you can create a custom plug.

Here's an example from the PingCRM app:

defmodule PingWeb.Plugs.InertiaShare do

  def init(default), do: default

  def call(conn, _) do
    InertiaPhoenix.share(conn, :auth, build_auth_map(conn))

  defp build_auth_map(conn) do
    # build complex auth map

Then add it to any pipeline that makes sense in myapp_web/router.ex:

pipeline :browser do
  plug PingWeb.Plugs.InertiaShare # put before main Plug
  plug InertiaPhoenix.Plug

Handle Form Errors

We can use Shared Data and the Phoenix Session to store server side errors.

See PingCRM for examples.

Configure Axios

XSRF-TOKEN cookie is set automatically.

To configure axios to use it by default, in app.js

import axios from "axios";
axios.defaults.xsrfHeaderName = "x-csrf-token";



In Progress

See Issue Tracker

Example Apps


Contribution guidelines for this project

You can’t perform that action at this time.