PhxFrontend

Helpers for rendering components from typical single-page-app frameworks from Phoenix LiveView.

Works with adapters for different frameworks, e.g.

• Svelte adapter
• React adapter
• Vue adapter

Installation

This package is on Hex, so you can addphx_frontend to your list of dependencies in mix.exs:

def deps do
  [
    {:phx_frontend, "~> x.x.x"} # check latest with mix hex.search phx_frontend
  ]
end

and run mix deps.get.

Add the javascript library to your assets package.json:

"dependencies": {
  // ...
  "phx-frontend": "file:../deps/phx_frontend/js"
}

and install - npm install --prefix assets.

NOTE: following convention, the hex library phx_frontend has an underscore, whereas the npm library phx-frontend is specified here with a dash.

Setup

Given a Phoenix app MyApp:

1. Import the provided components for use in heex templates

In my_app_web.ex:

defmodule MyAppWeb do

  # ...

  def html_helpers do
    # ...
+    import PhxFrontend.Components
    # ...
  end

  # ...
end

1. Add the provided hook to the LiveSocket

In app.js:

// ...
+ import { createJsApps } from "phx-frontend";

// ...

let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
+    jsApp: createJsApps({
+      // individual JS components will go here
+    })
  }
});

// ...

Rendering a component from LiveView

See documentation for the particular adapter you're using, e.g. one of

• Svelte adapter
• React adapter
• Vue adapter

Custom Adapters

Adapters for each framework are small and easy to write for new libraries. TODO: doc here.