Skip to content

Latest commit

 

History

History
102 lines (71 loc) · 2.97 KB

installation.md

File metadata and controls

102 lines (71 loc) · 2.97 KB
Raw

Installation

1. Add primer_live dependency

For Phoenix.LiveView 1.0 and newer

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

{:primer_live, "~> 0.10"}

Run mix.deps get.

For Phoenix.LiveView 0.20

Add PrimerLive as a dependency in your Phoenix application's mix.exs by referencing the LiveView 0.20 branch. This branch will get updated with bug fixes and compatible improvements.

{:primer_live, git: "https://github.com/ArthurClemens/primer_live.git", branch: "live-view-0.20"}

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>

Scoped CSS

The relatively new @scope rule enables localized CSS. In practical terms, it allows multiple CSS libraries to coexist within a single codebase without causing style conflicts. For example, use Tailwind components in one section of the page, and use PrimerLive components in another section.

Browser support for the @scope rule is still limited. For more details, see Can I use: @scope rule. If you're using PrimerLive in a controlled environment where users have access to the latest browsers, you may consider experimenting with this feature.

To use PrimerLive CSS with CSS scope:

  • Change the CSS import to primer-live-scoped.min.css (or primer-live-scoped.css).
  • Create a container with class primer-live where you will be using PrimerLive components. This can be any element, except the html element.
  • To make theming work properly, the container must be a child of the theme component (or equivalent element with attributes created with PrimerLive.Theme.html_attributes/2).

Example:

<html>
  <body>
    <section>
      Some content
    </section>
    <section class="primer-live">
      PrimerLive components
    </section>
  </body>
</html>

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 ...
  },
});