#PHOENIX LIVEVIEW EXAMPLES HOW TO#

The markup for the modal is pretty verbose. Ok, now I hope that you can start to see the potential with this and follow the logic. I kan now interact with the components on the same way again. One caveat is that it needs to have its unique DOM id. STEP 1 - Setup a minimal example of a LiveComponentĪ LiveView component can be used to wrap content instead of passing it in as an argument. Modern modals also often comes with a nice transition so its a little tricky to set up, but AlpineJS provides nice helpers to add classes to the transitions.

#PHOENIX LIVEVIEW EXAMPLES HOW TO#

In this tutorial I will go through how to set up reusable modal in Phoenix LiveView with AlpineJS and Tailwind. In LiveView that is called a LiveComponent. At a high level, you can see that an HTTP request-one for the /products route, for example-will be routed to and handled by a LiveView. However, they require a fair amount of markup and since I dont want to repeat markup in all the instances I use it, I would like to put it in a reusable component.

With that in mind, one thing I quite often use in web apps are modals. Each component can have its own state and event handling so all logic doesn’t have to live in the parent LiveView. Like the traditional server rendered example I verify username/password in the event handler. The name of the channel/topic, in our case it is 'notes'. The PubSub instance of our app, in our case it is NoteApp.PubSub. The Phoenix.PubSub module has a subscribe function that takes 2 parameters. It will be a function that will be called by the LiveView module. To work around this limitation I use ETS to accomplish the same end result. Weve understood the concept of the subscriber. To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. The trouble with LiveView in this situation is that event handlers only have access to the web socket and cannot use.

Phoenix liveview examples