Inertia Phoenix
Inertiajs Adapter for Elixir Phoenix 1.4 and 1.5
Usage
Getting started with Inertia.js in a few steps.
Installation
Add to mix.exs:
{:inertia_phoenix, "~> 0.3.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
endConfiguration
Add 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
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")
endLayout/Templates
- 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>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
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
endHandle 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
- 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
In Progress
Example Apps
- React Example: https://github.com/devato/pingcrm (WIP)