What is the correct way of defining master layouts using Phoenix 1.7?

What is the correct way of defining master layouts using Phoenix 1.7?

I want to define different master layouts that then render the inner_content:

  • For the webpage
  • For the auth level (login, signup)
  • For the dashboard (after login)

So far, I have tried to set up different pipelines in the router to group the pages together there, but for some reason, my app uses then both templates, the specified one and the app.html.heex overlapping.

How do I do this correctly?

There‘s a root_layout, commonly used for shared markup between all/most pages (never updatable by liveview) and there a layout, which is commonly used for different types of pages (updatable by lv). Make sure you change the correct one of these.

So, in that logic, what if I want to create different root layouts for different levels of my application? I am assuming that you are comparing the master layout (root layout) and the layout of the individual page, but that wasn’t really my question.

One particular way that I acheive this in Phoenix LiveView is to use live_session/3 i.e. I group liveviews in a session that use a common layout.

The docs explain much better than I ever could: Phoenix.LiveView.Router — Phoenix LiveView v0.20.14

There is three layers:

  • root layout (static, not LV enabled/updatable)
    • layout (LV enabled/updatable layout)
      • individual page

The important part here is mostly the difference in LV being able to update layouts, but not root layout contents as well as not getting those two mixed up.

2 Likes