Tutorial

View on Github

How to combine Phoenix LiveView with Alpine.js

alpinejsliveviewphoenixtailwind

Combine Phoenix LiveView with Alpine.js

No matter how great Phoenix LiveView is, there is still some use case for sprinkling some JS in your app to improve UX. For example, tabs, dropdowns, popovers and modals.

There is no need to keep the state of a dropdown on the server so you might just as well do it on the client.

However, there is still no fun to start writing javascript files but there is a library that have recently gained a lot of traction. Its called Alpine.js. Just like Tailwind it just relies in an enriched DOM.

An easy example for tabs would look like:

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

However, to use Alpine with Phoenix LiveView, you might run into some issues. In this tutorial, I will try to show you how to overcome those issues.

STEP 1 - Install Alpine

First step is to install Alpine js.

cd assets && yarn add alpinejs

And the only change required in app.js is to simply require it:

assets/js/app.js
import 'alpinejs'

Out of the box, this solution would not work since everytime LiveView updates the DOM, Alpine will lose track on the elements its attached to. So, there is a way to handle that built into LiveView. Further down when in the app.js file, where LiveSocket is initialized, I can add some code to keep track on the elements Alpine is attached to.

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: {
    onBeforeElUpdated(from, to){
      if(from.__x){ window.Alpine.clone(from.__x, to) }
    }
  }
})

STEP 2 - Add the dropdown component

The first example is a common dropdown. These exists in basically every app and is quite simeple to setup with Alpinejs.

Initially I want the dropdown to have two states. Open true / false. That can be acheived with a x-data directive that baiscally takes a javascript object.

<div x-data="{ open: false }" class="relative text-left">

Next is to set the button itself. The dropdown should be toggleable, meaning it should be possible to both open and close it. Also, it should be closable by clicking on some other element or hitting the ESC key.

<button
        @click="open = !open"
        @keydown.escape.window="open = false"
        @click.away="open = false"
        class="flex items-center h-8 pl-3 pr-2 border border-black focus:outline-none">

So, The entire code are:

<div x-data="{ open: false }" class="relative text-left">
    <button
            @click="open = !open"
            @keydown.escape.window="open = false"
            @click.away="open = false"
            class="flex items-center h-8 pl-3 pr-2 border border-black focus:outline-none">
        <span class="text-sm leading-none">
            Options
        </span>
        <svg class="w-4 h-4 mt-px ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>
    <div
            x-cloak
            x-show="open"
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute flex flex-col w-40 mt-1 border border-black shadow-xs">
        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Settings</a>
        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Support</a>
        <a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Sign Out</a>
    </div>
</div>

Note above that I aslo use the transition directives that alpine priovides to get a smooth animation effect when the dropdown open and closes.

STEP 3 - Add an animated toggle and interact with LiveView

Lets say you have an animated toggle and want it to connect to LiveView. Meaning, when clicking on the toggle, and it animates from on, to off, there should also be an event sent to the LiveView so some backend code can be triggered.

<div
  class="flex items-center justify-start"
  x-data="{ toggle: '0' }">
  <div
    class="relative w-12 h-6 rounded-full transition duration-200 ease-linear"
    :class="[toggle === '1' ? 'bg-green-400' : 'bg-gray-400']">

    <label
      for="toggle"
      class="absolute left-0 w-6 h-6 mb-2 bg-white border-2 rounded-full cursor-pointer transition transform duration-100 ease-linear"
      :class="[toggle === '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"></label>
        <input type="hidden" name="toggle" value="off" />
    <input type="checkbox" id="toggle" name="toggle" class="hidden" @click="toggle === '0' ? toggle = '1' : toggle = '0'">
  </div>
</div>

When this component starts, its starts with the toggle set to off. And when its clicked, it animates to on.

Since this is a checkbox under the hood I can use LiveView to track the changes. For example, I could do that with a form. However, in this case, I want to hook into the javascript event that happens when a change is triggered. I will do that by setting up a LiveView hook and listen for toggle events and then push that to the LiveView.

In the toggle component, I can add Alpines $watch to keep track in of the open-state changes. And if it does, I can use $dispatch to emit a javascripot event.

<div
  class="flex items-center justify-start"
  x-data="{ toggle: '0' }"
  x-init="() => { $watch('toggle', active => $dispatch('toggle-change', { toggle: active })) }"
  id="toggle-example"
  phx-hook="Toggle">
  <!-- REST OF THE TOGGLE CODE -->
</div>

Note that I also add an id-attribute and a LiveView hook with phx-hook="Toggle".

In the JS file, I will need to add the hook like:

let Hooks = {}
Hooks.Toggle = {
  mounted() {
    this.el.addEventListener("toggle-change", event => {
      this.pushEvent('toggle-change', event.detail)
    })
  }
}

This means, when the Apline dispatches the toggle-change-event, the event-listener in the hook will intercept that and use LiveViews pushEvent to communicate with the LiveView backend.

In the LiveView, I need to add a handle_event to receive that. Also, do display that the backend actually changes state, Im adding a toggle-variable that the LiveView can update.

defmodule TutorialWeb.PageLive do
  use TutorialWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    assigns = [
      toggle: "off"
    ]
    {:ok, assign(socket, assigns)}
  end

  @impl true
  def handle_event("toggle-change", %{"toggle" => toggle}, socket) do
    toggle = if toggle == "1", do: "on", else: "off"

    {:noreply, assign(socket, :toggle, toggle)}
  end
end

All I need to do is to output this in the template by adding this next to the toggle button

<span class="inline-block px-4">
  <%= @toggle %>
</span>

And toggling should now inticate that the text changes:

As I mentioned above, there are several ways to achieve the same result. I could have tracked this with a form or add the phx-click to track the changes. What works for you depends on the situation.

Phoenix Boilerplate

Generate a Phoenix Boilerplate and save hours on your next project.

Learn More

Related Tutorials

Published 13 Feb - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

formstypeaheadliveviewphoenixtaggingtailwind

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

Published 11 Jul - 2020

Create a reusable modal with LiveView Component

alpinejsliveviewmodalphoenixtailwind

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..