Rendering LiveView components outside Liveview

I see that currently it’s not possible to render LiveView Components outside LiveView render. For example, a LiveView component for Login (display form before login and show the name after login) cannot be displayed in the live.html.eex layout because of the lack of @socket variable in the template.

Because, Login component is a shared component across all pages, I would like to keep it in the layout. Currently this is not possible and I can only put this component inside a LiveView render and use css absolute positioning to place it on the top navbar and I have to repeat rendering this component in all liveview pages where I need the login component.

Any suggestions on how I can keep the common components across all LiveView pages?

@socket is definitely available in live.html.leex. Did you call it .eex instead of .leex by mistake?

3 Likes

My bad. Yes you are right. It’s available. I tried calling the component on a partial without passing it on the assigns from live.html.leex.