Maintained by Devato
Inertiajs Adapter for Elixir Phoenix
Getting started with Inertia.js in a few steps.
Add to mix.exs:
{:inertia_phoenix, "~> 0.4.0"}Add Plug to WEB_PATH/router.ex
pipeline :browser do
...
plug InertiaPhoenix.Plug
endImport render_inertia lib/active_web.ex
def controller do
quote do
...
import InertiaPhoenix.Controller
end
endAdd to config/config.exs
config :inertia_phoenix,
assets_version: 1, # default 1
inertia_layout: "app.html" # default app.html- Asset Versioning Docs: https://inertiajs.com/asset-versioning
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- Doesn't require templates as Inertia Pages are templates.
div#appis rendered automatically.
An example layout:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<%= @inner_content %>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>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.
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
endThen 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
endWe can use Shared Data and the Phoenix Session to store server side errors.
See PingCRM for examples.
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";- Render React/Vue/Svelte from controllers
- Flash data passed to props via Plug
- Assets Versioning: https://inertiajs.com/asset-versioning
- Lazy Evaluation: https://inertiajs.com/responses#lazy-evaluation
- Auto put response cookie for crsf token: https://inertiajs.com/security#csrf-protection
- Override redirect codes: https://inertiajs.com/redirects#303-response-code
- Partial reloads: https://inertiajs.com/requests#partial-reloads
- Shared data interface: https://inertiajs.com/shared-data
- N/A