LiveView: set nonlive layout

LiveView can use “live” layouts now, via providing option :layout to the module.
By default it does use regular, non-live layout like app.html.

The question is, is there a way to make LiveView use other, non-live layout? like “admin.html”

live version do not support @conn and such and rewriting (for existing project) it to remove @conn calls somehow would be time consuming

1 Like

Hey @thousandsofthem,

This is possible but it isn’t exactly intuitive. Basically, you need to change the root layout at the plug level, and not the live view level. eg:

pipeline :admin do
  plug :set_layout, template: "admin.html"

defp set_layout(conn, opts) do
  conn |> put_layout(opts[:template])

scope "/admin" do
  pipe_through [:browser, :admin]
  live "/users", SomeliveView

scope "/" do

  # other things here

Basically, when you set the layout within the world of live view, you’re really setting a sort of “sub” layout that runs inside and after the root one set in plug. If you want to change the root entirely because you need to use the @conn then you need to swap that out at the plug level.


It worked! Thank you!
Never knew this trick.

P.S. Small correction for other readers:

plug :set_layout, template: {AppWeb.LayoutView, "admin.html"}

(where name AppWeb is the project’s web name)


With the developing version 0.8.2-dev, we can use put_live_layout, the Liveview use the “separated static” layout and not inherited from app.html.