Listing tutorials

Published 19 Mar - 2020 - Updated 01 May - 2020

Updating LiveView Spring 2020 ed

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

Go to tutorial

Published 09 Mar - 2020 - Updated 01 May - 2020

Setup a supervised background task in Phoenix

liveviewotpphoenixpubsub

There are times when you need to spawn a background process for a longer running task. And especially if you are interacting with an external system..

Go to tutorial

Published 03 Mar - 2020 - Updated 01 May - 2020

Share LiveView state between tabs

javascriptliveviewphoenix

Each LiveView on each tab spawns a separate state. That might or might not be the desired behaviour. In this tutorial, I am going to share state bet..

Go to tutorial

Published 21 Feb - 2020 - Updated 01 May - 2020

Create a Calendar in Phoenix LiveView

calendarliveviewphoenix

In this tutorial I am creating a simple calendar in Phoenix LiveView. The calendar should be able to switch month, highlight current day and select ..

Go to tutorial

Published 15 Feb - 2020 - Updated 01 May - 2020

Create ghost loading cards in Phoenix LiveView

ectoliveviewphoenix

Unless you already didn't know, when a LieView component is mounted on a page, it runs the mount/2 function twice. One when the page is rendered fro..

Go to tutorial

Published 14 Feb - 2020 - Updated 01 May - 2020

Improving LiveView UX with Phoenix Channels - Tagging part 3

channelsformsliveviewphoenixtagging

In the previous tutorial I set up the tagging interface. It had however a small issue. If I added a tag, it didnt really refocus on the input so I n..

Go to tutorial

Published 13 Feb - 2020 - Updated 01 May - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

formsliveviewphoenixtaggingtailwindtypeahead

In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..

Go to tutorial

Published 05 Feb - 2020 - Updated 01 May - 2020

Nested model forms with Phoenix LiveView

formsliveviewphoenix

I my last article, I set up a relationship between products and variants. But what I didn't go through was to setup a form where you can manage the ..

Go to tutorial

Published 29 Jan - 2020 - Updated 01 May - 2020

Send events from JS to a LiveView component

csrfjavascriptliveviewphoenix

Let say you app uses a javascript library that needs to interact with your app. For example a LiveView component. That is possible with the built in..

Go to tutorial

Published 28 Jan - 2020 - Updated 01 May - 2020

Phoenix LiveView and Invalid CSRF token

csrfformsliveviewphoenix

One issue that is common to run into is a CSRF error when posting some sort of form rendered with LiveView. The issue is that a LiveView component i..

Go to tutorial