Updating LiveView Spring 2020 ed

This post was updated 01 May - 2020

phoenix liveview

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, 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 :fetchliveflash specify the root layout.

# lib/tutorial_web/router.ex

pipeline :browser do
  plug :fetch_live_flash
  plug :put_root_layout, {TutorialWeb.LayoutView, :root}

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 %>


<%= @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

Related Tutorials

Published 04 May - 2021
Updated 05 May - 2022

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

Published 23 Dec - 2020

Getting Started with Phoenix and LiveView