How phoenix layouts work in phoenix 1.7?

Phoenix Forum Questions / Help
, ,
1

I haven’t used phoenix for some time and the new layouts confuse me:

/layouts
  app.html.heex
  root.html.heex

From what I remember before, there was the live.html.heex that would be generated for liveview components, however it is not clear on how it works now, because the content from app.html.heex is rendered in dead views too.

Can someone explain how this works currently?

1 Like
2

All the functionality, which previously required a separate live.html and app.html template was updated with functionality, which works for both codepaths (mostly flash message handling). So there’s simply no longer a need for those separte layout files.

4 Likes
3

So basically adding live functionality in root files is out of the question currently, or I am missing something?

4

Yes. Always has been. The root layout doesn’t include live things, the layout can …

2 Likes
5

Good details here: Live layouts — Phoenix LiveView v0.19.5

6

This is exactly what I was looking for, thanks!

1 Like
7

Documentation didn’t have the specific code snippet I needed, so here’s how to set a custom layout for a router.ex live_session.

Imagine you have a dashboard layout that you want all dashboard-y liveviews to use.

Create your custom layout template in:

/lib/myapp_web/components/layouts/dashboard.html.heex

scope "/dashboard", EverlyWeb do
  pipe_through [:browser]

  live_session :dashboard,
    on_mount: [{EverlyWeb.UserAuth, :ensure_authenticated}],
    layout: {EverlyWeb.Layouts, :dashboard} do
    live "/leads", LeadLive.Index, :index
    live "/leads/new", LeadLive.Index, :new
    live "/leads/:id/edit", LeadLive.Index, :edit

    live "/leads/:id", LeadLive.Show, :show
    live "/leads/:id/show/edit", LeadLive.Show, :edit
  end
end
1 Like