Installation

1. Add primer_live dependency

Add PrimerLive as a dependency in your Phoenix application's mix.exs

{:primer_live, "~> 0.8"}

Run mix.deps get.

2. Mark PrimerLive resources as static

In endpoint.ex, create a new Static Plug entry:

# PrimerLive resources
plug(Plug.Static,
  at: "/primer_live",
  from: {:primer_live, "priv/static"}
)

3. Update VerifiedRoutes config (optional)

In <app>_web.ex, change the Phoenix.VerifiedRoutes configuration to include the primer_live directory:

def static_paths, do: ~w(assets fonts images favicon.png robots.txt primer_live)

4. Add the CSS and JavaScript to the base HTML

Add the import link to root.html.heex.

If you are using verified routes:

<link phx-track-static rel="stylesheet" href={~p"/primer_live/primer-live.min.css"}>
<script defer phx-track-static type="text/javascript" src={~p"/primer_live/primer-live.min.js"}></script>

Otherwise:

<link phx-track-static rel="stylesheet" href="/primer_live/primer-live.min.css">
<script defer phx-track-static type="text/javascript" src={"/primer_live/primer-live.min.js"}></script>

5. Add the Prompt hook

In assets/js/app.js, add global Prompt to the hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    Prompt: window.Prompt,
    // existing hooks ...
  },
});