An Elixir/Phoenix adapter for Inertia.js.
The package can be installed by adding inertia to your list of dependencies in mix.exs:
def deps do
[
{:inertia, "~> 0.1.0"}
]
endAdd your desired configuration in your config.exs file:
# config/config.exs
config :inertia,
# The Phoenix Endpoint module for your application. This is used for building
# asset URLs to compute a unique version hash to track when something has
# changed (and a reload is required on the frontend).
endpoint: MyAppWeb.Endpoint,
# An optional list of static file paths to track for changes. You'll generally
# want to include any JavaScript assets that may require a page refresh when
# modified.
static_paths: ["/assets/app.js"],
# The default version string to use (if you decide not to track any static
# assets using the `static_paths` config). Defaults to "1".
default_version: "1"This library includes a few modules to help render Inertia responses:
Inertia.Plug: a plug for detecting Inertia.js requests and preparing the connection accordingly.Inertia.Controller: controller functions for rendering Inertia.js-compatible responses.Inertia.HTML: HTML components for Inertia-powered views.
To get started, import Inertia.Controller in your controller helper and Inertia.HTML in your html helper:
# lib/my_app_web.ex
defmodule MyAppWeb do
def controller do
quote do
use Phoenix.Controller, namespace: MyAppWeb
+ import Inertia.Controller
end
end
def html do
quote do
use Phoenix.Component
+ import Inertia.HTML
end
end
endThen, install the plug in your browser pipeline:
# lib/my_app_web/router.ex
defmodule MyAppWeb.Router do
use MyAppWeb, :router
pipeline :browser do
plug :accepts, ["html"]
+ plug Inertia.Plug
end
endNext, replace the title tag in your layout with the <.inertia_title> component, so that the client-side library will keep the title in sync:
# lib/my_app_web/components/layouts/root.html.heex
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
<head>
- <.live_title><%= assigns[:page_title] %></.live_title>
+ <.inertia_title><%= assigns[:page_title] %></.inertia_title>
</head>You're now ready to start rendering inertia responses!
Rendering an Inertia.js response looks like this:
defmodule MyAppWeb.ProfileController do
use MyAppWeb, :controller
def index(conn, _params) do
conn
|> assign_prop(:text, "Hello world")
|> render_inertia("ProfilePage")
end
endThe assign_prop function allows you defined props that should be passed in to the component. The render_inertia function accepts the conn, the name of the component to render, and an optional map containing more initial props to pass to the page component.
This action will render an HTML page containing a <div> element with the name of the component and the initial props, following Inertia.js conventions. On subsequent requests dispatched by the Inertia.js client library, this action will return a JSON response with the data necessary for rendering the page.
Maintained by the team at SavvyCal