Phoenix Multiple Layouts

[jstone]

Hello, Im having issue, having multiple layouts.

1. Layouts for Admin (System Access / Portal / Data Management)
2. Layouts for Login / Register

I create new plug for router just to handle different layouts for login

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {WebApp.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

  pipeline :login_page do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {WebApp.AuthenticationLayouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

And I copy the original layouts and make the layouts components as below :

This will make whenever I visit link /users/log_in (Using Original Phx Auth) it will render root file from folder components auth_layouts.

However when I use code <%= @inner_content %> inside root file auth_layouts/root.html.heex it will render page from file layouts/app.html.heex instead of auth_layouts/app.html.heex. Please suggest/assist where can I change to make it render auth_layouts/app.html.heex. Thanks. Any response is highly appreciated

side note : Sorry if the question kinda noob, this is my first project using Phx Framework. Excited but can’t find the solution.

[sbuttgereit]

I’m not the best person to answer this, but one thing that immediately comes to mind is have you checked your web_app.ex file (making assumptions about your naming based on what I see in your code example) and what it may/may not do with layouts? By default there’s some layout assignment happening there and my recollection was that it could interfere with the plug based stuff.

I use different layouts as well and rather than trying to control layouts via plugs, I created entries in my equivalent to web_app.ex to deal with the layouts and other kinds of setup as appropriate to the type of form.

Again… I could be way off-base and there are others here that can probably be more helpful…

[jstone]

Hello,

Yes I already tried that solution, however this only applicable for 1 layouts, I’m not sure how to register multiple layouts. Here what I do

def live_view do
    quote do
      use Phoenix.LiveView, layout: {WebApp.Layouts, :app}

      unquote(html_helpers())
    end
  end

Change to

def live_view do
    quote do
      use Phoenix.LiveView, layout: {WebApp.AuthenticationLayouts, :app}

      unquote(html_helpers())
    end
  end

This will successfully render auth_layouts/app.html.heex. However what If I wanna use the original layouts?

[sodapopcan]

Ya, this is what I do.

I don’t have multiple directories for layouts since there is only one layout per different section but I have;

my_app_web/layouts/root.html.heex
my_app_web/layouts/public.html.heex
my_app_web/layouts/admin.html.heex

def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {GelaWeb.Layouts, :public}

    unquote(html_helpers())
  end
end

def admin_live_view do
  quote do
    use Phoenix.LiveView,
      layout: {GelaWeb.Layouts, :admin}

    unquote(html_helpers())
  end
end

Then:

defmodule MyAppWeb.SomeAdminPage do
  use MyAppWeb, :admin_live_view
end

You can do the same with the controller helper.

I’m sure you can make this work with directories if you use a string instead of an atom.

[sbuttgereit]

[I had posted my code, but @sodapopcan did so before me and mine had nothing new to offer on that response… can’t delete my comment so… clearing it.]

[sodapopcan]

Ha, sorry, didn’t realize you were replying!!

[LostKobrakai]

You can return a layout from mount/3 like so: {:ok, socket, layout: {module, atom}}. You can also use live_session to change the layout for a bunch of liveviews. No need to drop down to the macros to do that.

[jstone]

Thanks @sodapopcan This give me the idea. I can create a custom function, and on a specific / any live view that I need to be different layouts, I can use that custom function. Thanks.

Below are my solution. Create new custom function on web_app.ex

def live_view_login do
    quote do
      use Phoenix.LiveView, layout: {WebApp.AuthenticationLayouts, :app}

      unquote(html_helpers())
    end
  end

and on LiveView use use WebApp, :live_view_login instead of using use WebApp, :live_view_login (the original)

Thanks guys @sodapopcan @sbuttgereit @LostKobrakai , Really appreciate the help. Resolved my issue.

[sodapopcan]

Ya, I remember I was doing with this then switched to the macro helper version, I can’t remember quite why. I do add some extra helpers in the admin route though those could probably be moved to hooks ← nm, that doesn’t make any sense, lol. Ya, I think it was just because I had additional helpers but that was so long ago now that it is something I just do. I could re-evaluate.

[sodapopcan]

I’d give heed to @LostKobrakai’s answer, though: you can also pass a layout to live_session.

[jstone]

Thanks, This also will allow to override the layouts

[hashtemptable]

In my experience this does not work. It returns something like:

** (ArgumentError) :layout expects a tuple of the form {MyLayoutView, :my_template} or false, got: “pos.html”
(phoenix_live_view 0.19.5) lib/phoenix_live_view/utils.ex:216: Phoenix.LiveView.Utils.normalize_layout/2
(phoenix_live_view 0.19.5) lib/phoenix_live_view/router.ex:276: anonymous fn/3 in Phoenix.LiveView.Router.validate_live_session_opts/3
(elixir 1.15.2) lib/enum.ex:2510: Enum.“-reduce/3-lists^foldl/2-0-”/3
(phoenix_live_view 0.19.5) lib/phoenix_live_view/router.ex:240: Phoenix.LiveView.Router.live_session/3
lib/selfpos_web/router.ex:82: (module)

[LostKobrakai]

The new format requires – as stated – {module, atom} format not {module, string} or just string.

[hashtemptable]

thank you, I am struggling to find where in the docs it defines what should be in the tuple. Sticking to the overrides for now. Maybe if I continue learning the platform I will figure it out someday.

[bo_dev]

Thank you, exactly what I was looking for!

Although I did the opposite of your admin and used a guest layout instead. Guest layout is used for all routes that require a user to be un-authenticated, such as login, register, reset password etc.

Coming from a Laravel background, it made more sense to me in my head

[sodapopcan]

I’m still sporadically getting pinged on this issue so I wanted to note that I regret my answer and I do NOT recommend doing this. @LostKobrakai’s post is the right way and should be the accepted answer. AFAIC it’s objectively better to use what the framework provides over writing custom macros.

I recently inherited a codebase that uses this pattern. As is almost guaranteed to happen when blazing your own trails additional concerns like authn ended up in these macros which should have been in on_mount callbacks. This was not only really confusing to figure out at first but the inclusion of the extra logic within macros caused unnecessary compile time dependencies.

Return {:ok, socket, layout: {MyAppWeb.Layouts, :layout} from mount/3 or use live_session, :my_session, layout: {MyAppWeb.Layouts, :layout} in the router.

---

• mount/3
• live_session/3
• on_mount/1

[sergio]

Here’s how you do it for many live views, by using live_session.

scope "/", MyAppWeb, host: "dietitian." do
  pipe_through [:browser]

  live_session :dietitian_dashboard, layout: {MyAppWeb.Layouts, :dietitian} do
    live "/", Dietitian.DashboardLive
  end
end

Make sure you have the file in:

lib/my_app_web/components/layouts/dietitian.html.heex

[sodapopcan]

This is also totally valid and actually what I do more often.

Also, I’m still getting likes on my initial answer and wish I can delete it