Creating LiveView Modals with Tailwind CSS and AlpineJS

Our last article explored how to use LiveView with AlpineJS. In this article, we will use LiveView along with AlpineJS and Tailwind CSS to create a production-ready modal component. That is, a modal that smoothly transitions into and out of view and is able to survive LiveView reconnects.

The final product will look like this:

We will use TailwindUI to get a polished app experience. TailwindUI is a paid-for, but reasonably priced, set of pre-built Tailwind CSS components that can be copied and pasted into your application. You just need to customize the styles for your app and add some AlpineJS code. We will leverage a set of sample TailwindUI components in this article (with permission.)

You can find the code for our sample application on GitHub. We will be taking it one piece at a time, but it might be useful to glance over the code as a whole, so as not to lose the forest for the...

Integrating Phoenix LiveView with JavaScript and AlpineJS

A common pitch for Phoenix LiveView is it allows you to create modern reactive apps without having to write JavaScript. In large part that is true. You can create dynamic server-rendered apps all in Elixir without having to write a large portion of your app in JavaScript frameworks such as React, Angular, or Vue.js. But, even so, you will still need to write a smattering of JavaScript if you want your app to have the fit and finish of a finely crafted web app. And that makes sense, as this is exactly what JavaScript was created to do.

Where JavaScript shines is in providing quick response to client actions that don’t require a server roundtrip to perform and in transitions, such as opening a dropdown with a nice animation from the closed to open state and back.

Where LiveView and JavaScript meet is what this article is about. We will discuss how LiveViews and LiveComponents can...

Dec 17, 2019

Creating a Modal LiveView LiveComponent

In this article, we will create a reusable and configurable modal dialog that we can use throughout our app. We will implement the modal as a LiveComponent and along the way we will touch on several other important LiveView features including push_patch, browser pushState, and JavaScript hooks.

If you aren’t familiar with LiveView LiveComponents, you might want to read [Introduction to Phoenix LiveView LiveComponents][introduction-article] before proceeding with this article.

You can find the code for this article [on GitHub][github-repo].

[Sept. 7, 2020 - Article and [code][github-repo] updated to LiveView v0.14.4]

Our Example

For our example, we will modify Chris McCord’s counter example from his [LiveView Example Repo][liveview-examples]. This is a simple LiveView example with buttons to increment and decrement a counter and another one, called Boom, to crash the counter.

We...

Continue reading →

Introduction to Phoenix LiveView LiveComponents

LiveComponents are a new feature of Phoenix LiveView, bringing lightweight reusable components into the LiveView ecosystem.

[Sept. 7, 2020 - Article and [code][github-repo] updated to LiveView v0.14.4]

Phoenix LiveView

[Phoenix LiveView][liveview-docs] became publicly available in March of 2019 and has been under active development ever since; as such we can expect regular changes and additions until the 1.0 released, likely sometime in 2020.

LiveView enables client-side dynamism using server side processes. Built on top of Elixir’s Phoenix web framework, LiveView allows you to create pages that are dynamically updated when state changes on the server, providing dynamism to web pages. And LiveView reacts to user actions, in a way that until now, only client-side programming could do.

A LiveView is an Elixir process, essentially a GenServer. When a client browser connects to a...

Patrick Thompson

Founder at Inkstone Software.

Read this first