Psst. It would be super cool if you could try the new Phoenix Boilerplate!

Try now

Tutorial

View on Github

Updating LiveView Spring 2020 ed

This post was updated 01 May

liveviewphoenix

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


What are you working on?

If you want, you can send me a link to your Phoenix or Phoenix LiveView project so. Lets connect on Twitter or Linkedin.

- Andreas Eriksson, web developer since 2005

Related Tutorials

Published 31 Mar

Combine Phoenix LiveView with Alpine.js

liveviewphoenixtailwindalpinejs

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,..

Published 11 Jul

Create a reusable modal with LiveView Component

tailwindalpinejsliveviewmodalphoenix

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..