saleyn
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?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
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.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
APB9785
From the docs:
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?