How to Use Alpine JS with Hotwire

There are some issues with Alpine JS + Hotwire, let's fix that.

This is an old post that I have updated, I no longer use Ruby on Rails.

Hotwire is awesome, it brings an improved user and developer experience to Ruby on Rails applications. There is one downside, it replaced Turbolinks... A sad day to be sure.

However, don't be too sad because although Turbolinks is gone, Turbo is here.

You can find out more on the Hotwire website.

Turbolinks vs Turbo

| | Works with Links | Works with Forms | | --------- | ---------------- | ---------------- | | Turbo | Yes | Yes | | Turblinks | Yes | No |

That's it. Turbo works with forms and links. Turbolinks works with links.

Breaking Alpine JS

In Alpine JS you have the x-show directive which hides HTML elements until the expression passed is true. However, when using Alpine JS with Turbo it breaks this functionality in Alpine JS and causes HTML elements to always show.

Thankfully, SimoTo has created Alpine Turbo Drive Adapter a small JavaScript package that fixes the issue and makes Turbo and Alpine JS work together.