Due to the hard work of the Phoenix LiveView team, there has been a lot of work done. However, there have been some breaking changes.
For example, the LiveView component that I mounted in the router as live "/products", ProductListLive stopped working properly. The layout wasn’t properly added. So, if you update from a version prior to 0.8.0 I will show you how to fix this.
I have also seen a lot of questions on this topic so I will write up my findings.
As of this writing, it seems that Phoenix 1.5 will come with new layouts.
As I can see, there is a root.html.leex, live.html.leex, and app.html.leex. It seems the root.html.leex is where the html-shell lives.
However, since Phoenix 1.4.16, the root layout can also be used when mounting the LiveView component in the router.
STEP 1 - Update Phoenix
First, I need to make sure I am on the latest version of Phoenix. It needs to be 1.4.16 or above.
# mix.exs
[
{:phoenix, "~> 1.4.16"},
]
And update the dependencies.
mix deps.get
STEP 2 - Update Router
After plug :fetch_live_flash specify the root layout.
# lib/my_app_web/router.ex
pipeline :browser do
...
plug :fetch_live_flash
plug :put_root_layout, {MyAppWeb.LayoutView, :root}
...
end
STEP 3 - Update Layouts
Next step is to rename app.html.eex to root.html.leex. Also, in root.html.leex change
<%= render @view_module, @view_template, assigns %>
to:
<%= @inner_content %>
Then create a new file called app.html.leex with the content:
<%= render @view_module, @view_template, assigns %>
And now that I start the server, everything seems to work again