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](https://github.com/michalmuskala/jason) from 1.1.2 to 1.2.0.
- [Release notes](https://github.com/michalmuskala/jason/releases)
- [Changelog](https://github.com/michalmuskala/jason/blob/master/CHANGELOG.md)
- [Commits](michalmuskala/jason@v1.1.2...v1.2.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Latest commit 321b7d3 Mar 18, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot
.github Remove cache action Feb 18, 2020
bin Add changelog generator Feb 17, 2020
config Feature/refactor tests (#23) Feb 22, 2020
lib
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
CHANGELOG.md Update changelog Feb 24, 2020
CODE_OF_CONDUCT.md Squashed commit of the following: Feb 18, 2020
CONTRIBUTING.md
LICENSE.txt Squashed commit of the following: Feb 18, 2020
README.md 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

README.md

Inertia Phoenix

GitHub Workflow Status Coveralls Hex.pm

Inertiajs Adapter for Elixir Phoenix

Usage

Getting started with Inertia.js in a few steps.

Installation

Add to mix.exs:

{:inertia_phoenix, "~> 0.2.7"}

Add Plug to WEB_PATH/router.ex

  pipeline :browser do
    ...
    plug InertiaPhoenix.Plug
  end

Import render_inertia lib/active_web.ex

  def controller do
    quote do
      ...
      import InertiaPhoenix.Controller
    end
  end

Configuration

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")
end

Layout/Templates

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

An example layout:

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

Shared Data / Props

Inertia.js Docs: https://inertiajs.com/shared-data

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))
  end

  defp build_auth_map(conn) do
    # build complex auth map
  end
end

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
end

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";

Features

Complete

In Progress

See Issue Tracker

Example Apps

Contributing

Contribution guidelines for this project

You can’t perform that action at this time.