Coming Soon! Learn how to build an AirBnB clone in Phoenix LiveView

Tutorial

Updating LiveView Spring 2020 ed

This post was updated 01 May - 2020

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

Tag Cloud

CSV absinthe alpinejs api async atom authentication bamboo belongs_to boilerplate bootstrap bulk cache cachex calendar channels chatgpt component crypto csrf datatable deploy ecto email esbuild fileupload finch floki forms fuzzyseach graphql guardian has_many has_many_through hooks javascript jsonb layouts liveview modal multitenancy oban otp pagination payments phoenix phoenix-1.6 postgresql pow presence pubsub render rss s3 saasstarterkit scrape search sorting stripe swagger swoosh table tagging tailwind teams templates typeahead waffle webhook

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

Go to tutorial

Published 23 Dec - 2020

Getting Started with Phoenix and LiveView

This guide to getting started with Phoenix covers getting up and running with Elixir and Phoenix. This is a direct conversion of the Getting started..