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?

From the docs:

Components are defined by using Phoenix.LiveComponent and are used by calling Phoenix.LiveView.Helpers.live_component/3 in 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?