Create ghost loading cards in Phoenix LiveView
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..
Improving LiveView UX with Phoenix Channels - Tagging part 3
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..
Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2
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..
Nested model forms with Phoenix LiveView
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 ..
Send events from JS to a LiveView component
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..
Phoenix LiveView and Invalid CSRF token
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..
Pagination with Phoenix LiveView
Let say you have a long table that you want to paginate with Phoenix LiveView. In this tutorial, I have an existing table with 100 entries that I wi..
Typeahead with LiveView and Tailwind
In this tutorial I want to show how easy it is to do an autocomplete or typeahead without any additional javascript!
Form validation with Phoenix LiveView
One thing that has always been problematic is when providing live form validation for a user that interacts with a form. The problem has always bee..