Tutorial
Updating LiveView Spring 2020 ed
This post was updated 01 May - 2020
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 did the LiveView component that I mounted in the router as live "/products", ProductListLive
stop 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, the it seems that the 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 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/tutorial_web/router.ex
pipeline :browser do
...
plug :fetch_live_flash
plug :put_root_layout, {TutorialWeb.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
Tag Cloud
Related Tutorials

How to combine Phoenix LiveView with Alpine.js
No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..