How to share components between liveviews and normal controllers?

I have a LiveView website (Phoenix 1.6) and I have my header and footer inside:

live/
  components/
    footer_component.ex
    header_component.ex

And it is working ok, but I would like to use the header and footer also in my authentication controllers.

If I try to past them inside the temp templates/layout/app.html.heex like:

<header>
  <%= live_component @socket, BlogWeb.HeaderComponent %>
</header>

then I get this error message:

assign @socket not available in template.

which is to be expected.

How to solve that and use the header and footer in auth related web pages that are using normal components?

Hi,

you cannot call live_component in a dead view. but it looks like your components have no dynamic (live) parts in it. If you have designed them as a (new in 1.6) functional Phoenix.component you can use them in dead and live view heex templates:

<header>
  <.footer/>
</header>

Take a look at Phoenix.Component — Phoenix LiveView v0.16.4

1 Like