Phoenix_live_view: Lost on how to use `plug :put_root_layout, {MyAppWeb.LayoutView, "app.html"}`

Created on 17 Mar 2020  路  1Comment  路  Source: phoenixframework/phoenix_live_view

Environment

  • Elixir version (elixir -v): 1.9.4
  • Phoenix version (mix deps): 1.4.16
  • Phoenix LiveView version (mix deps): 0.9.0
  • NodeJS version (node -v): v10.17.0
  • NPM version (npm -v): 6.13.1
  • Operating system: macOS Catalina
  • Browsers you attempted to reproduce this bug on (the more the merrier): Firefox
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: probably unrelated

Actual behavior

I followed a fresh install of mix phx.new my_app and a fresh install of LiveView using the install guide on HexDocs, but I can't seem to put it together in a working state.

  • the step of adding plug :put_live_layout, {MyAppWeb.LayoutView, "app.html"} / plug :put_root_layout, {MyAppWeb.LayoutView, "app.html"} is not yet in the Installation Guide, so it took me a while to figure out why my live '/', ThingLive did not render any HTML of layout/app.html.eex.
  • Putting the line in, however, results in the error assign @conn not available in eex template. This seems logical, given that the documentation of LiveView shows examples with @socket instead of @conn, but it's also odd. Does LiveView not support sharing a layout with normal Phoenix templates?
  • Bailing out and removing all the lines with @conn results in the error expected MyAppWeb.LayoutView to return a %Phoenix.LiveView.Rendered{} struct. Here I am totally lost: how set up my LayoutView then, as a LiveView itself? And why does the changelog suggest putting in that plug, which points to a by default incompatible View?

Am I missing something here, or did something break?

Thanks for the good stuff tho, and keep breaking it to make it better plz :)

Most helpful comment

Thanks for the clarification!

To answer my own questions with my new understanding:

  • This step is not in the installation guide, but it is also not required: you do not need it if you only render LiveViews inside of normal views using live_render/2 in the template, which is probably considered the normal use-case. (This could be my solution already, I think: just use <%= live_render(@conn, ThingLive) %>, that might make more sense.)
  • Don't use either @conn or @socket in the root layout. 7fabadca8db1fd58084b93b491d0b44cdeff855b explains the difference between app.html.eex, live.html.leex and root.html.eex, and they seem to be stacking: if I put a :root _and_ a :live layout it (with <%= @inner_content %>) I see them both.
  • This last error is caused by the file extension: the Live Layout should be 'live.html.leex', that L is important. (It actually said this in the next line of the error message, I should read my errors more carefully when using Elixir. <3)

>All comments

Thanks for the clarification!

To answer my own questions with my new understanding:

  • This step is not in the installation guide, but it is also not required: you do not need it if you only render LiveViews inside of normal views using live_render/2 in the template, which is probably considered the normal use-case. (This could be my solution already, I think: just use <%= live_render(@conn, ThingLive) %>, that might make more sense.)
  • Don't use either @conn or @socket in the root layout. 7fabadca8db1fd58084b93b491d0b44cdeff855b explains the difference between app.html.eex, live.html.leex and root.html.eex, and they seem to be stacking: if I put a :root _and_ a :live layout it (with <%= @inner_content %>) I see them both.
  • This last error is caused by the file extension: the Live Layout should be 'live.html.leex', that L is important. (It actually said this in the next line of the error message, I should read my errors more carefully when using Elixir. <3)
Was this page helpful?
0 / 5 - 0 ratings