sodapopcan

sodapopcan

Is there a nice way to dynamically render a Surface component? I actually don’t even really figure out a non-nice way atm.

I current have a main Page which contains the layout and I want to dynamically render content which would be components.

defmodule AppWeb do
  use Surface.LiveView

  data section, :string, default: "home"

  def render(assigns) do
    ~H"""
    <div>
      <header><h1>header</h1></header>
      <main>
        <!-- Is it possible to render a component based on the `section` data attribute here? -->
      </main>
    </div>
    """
  end

  def handle_params(%{"section" => section}, _, socket} do
    # Do some validation here to ensure `section` section is valid

    {:noreply, assign(:section, section)}
  end
end

Is there a better way of dong this? My first attempt involved having a Layout component with a slot, then each section is its own LiveView, but that felt a little heavy-handed. Each section is rich enough that I want them to be their own components, but not heavy enough that they warrant loading a new LiveView each time.

I feel like I’m missing something really obvious, but my focus is being pulled in all different directions in the past couple of weeks.

Thanks!

Showing Posts 1 to 3

sodapopcan

sodapopcan OP

So, reading through the source of LiveDashboard I’ve come up with something.

Essentially:

defmodule AppWeb do
  use Surface.LiveView

  data page, :string

  def render(assigns) do
    ~H"""
    <div>
      <header><h1>header</h1></header>
      <main>
        {{ @page.render(assigns) }}
      </main>
    </div>
    """
  end

  def handle_params(%{"page" => page}, _, socket} do
    {:noreply, assign(:page, resolve_page(page))}
  end

  def handle_params(_, _, socket) do
    {:noreply, assign(:page, AppWeb.Pages.Home)}
  end

  defp resolve_page("foo"), do: AppWeb.Pages.Foo
  defp resolve_page("bar"), do: AppWeb.Pages.Bar
end
sodapopcan

sodapopcan OP

Nice. Thanks for the link!

— All posts loaded —

Where Next? Top

Trending in Questions Top

katta
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
achenet
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews