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
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #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.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
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!"