How to Use Apline JS with Hotwire and Turbo

There's some new spice in Ruby on Rails... Hotwire ⚡️ which replaces Turbolinks with Turbo.

It's a simple transformation, Turbo works with links and forms but Turbolinks only works with links.

How Does Turbo Break Alpine JS?

In Alpine JS there's the x-show and x-if directives that allow you to show and hide HTML elements and content, this is broken when using Tubo.

Thankfully, SimoTod on GitHub has created the JavaScript package alpine-turbo-drive-adapter that solves the problem.

You can easily install this with a RailsBytes that I created:

rails app:template LOCATION='https://railsbytes.com/script/zPds4M'

Just copy and pase the above into your terminal and everything you need to make Alpine JS work with Turbo will be installed and setup.

AlpineJS with Turbo RailsByte