saleyn
Using LiveView component inside a Phoenix template
How can a liveview component be rendered inside a Phoenix EEX template?
I have a liveview component
defmodule MyApp.Shared.Status do
use Surface.LiveComponent
alias MyApp.Shared.FlashMessage
data online, :boolean, default: false
def render(assigns) do
~F"""
<div id={@id} class="status">
<FlashMessage id="status-flash" />
</div>
"""
end
that I would like to render inside the navigation bar “_navbar.html.eex” that is included in the “root.html.eex”:
$ cat root.html.eex
<html lang="en">
<head>
<%= csrf_meta_tag() %>
</head>
<body>
<%= render("_navbar.html", assigns) %>
<%= @inner_content %>
</body>
</html>
$ cat _navbar.html.eex
<header>
<nav class="nav-bar">
<div>
<!--
<%= live_component MyApp.Shared.Status, id: :main_status %>
<MyApp.Shared.Status id="main_status"/>
-->
</div>
</nav>
</header>
In this last file, “_navbar.html.eex” I tried rendering the Shared.Status component by using either <%= live_component MyApp.Shared.Status, id: :main_status %> or <MyApp.Shared.Status id="main_status"/> to no success. What am I missing?
First Post!
APB9785
From the docs:
Components are defined by using
Phoenix.LiveComponentand are used by callingPhoenix.LiveView.Helpers.live_component/3in a parent LiveView. Components run inside the LiveView process but have their own life-cycle.
It seems like you’re trying to call the LiveComponent outside of a LiveView, which doesn’t work because the LC doesn’t spawn up its own process, but instead requires a parent LV process to run inside.
For this case, perhaps a function component would be an acceptable alternative?
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"