Share LiveView state between tabs
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..
Create a Reusable Calendar in Phoenix LiveView
Updated for Phoenix 1.7. In this tutorial I am creating a simple calendar in Phoenix LiveView. The calendar should be able to switch month, highligh..
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..
Add Tags with Ecto has_many, through in Phoenix - Tagging part 1
I want to add tags to products. And as usual there are a situation where a product can have many tags and a tag can belong to many products. Howeve..
Add an use a JSONB field in Phoenix and Ecto
PostgreSQL has native support for objects stored as JSON as actually binary JSON (or JSONB). With JSONB format, you can add index do the column for ..
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 ..
Setup a has_many / belongs_to in Phoenix
Something I do in EVERY project is to setup some sort of relation between resources. And even though Phoenix comes with generators for migrations an..
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..