Alpine Turbo Drive Adapter

Overview:

The Alpine Turbo Drive Adapter is a tool that allows you to add support for Alpine.js V3 to your Turbolinks/Turbo powered apps. It helps in handling events and cleaning up the DOM from Alpine generated code when navigating between pages.

Features:

• Support for Alpine.js V3: Adds support for Alpine.js V3 to Turbolinks/Turbo powered apps.
• Event Handling: Handles events to properly clean up the DOM from Alpine generated code when navigating between pages.
• Compatibility with Turbolinks/Turbo: Works seamlessly with Turbolinks/Turbo powered apps.

From CDN:

Just include the following script tag before your Alpine script in your page:

<script src="https://cdn.jsdelivr.net/npm/alpine-turbo-drive-adapter@2.0.x/dist/alpine-turbo-drive-adapter.min.js" defer></script>

From NPM:

1. Install the package using npm:

npm install alpine-turbo-drive-adapter

2. Include it in your script along with Alpine JS (make sure Alpine is available on the window object). For example:

import Alpine from 'alpinejs'
import { TurboDriveAdapter } from 'alpine-turbo-drive-adapter'

window.Alpine = Alpine
window.Alpine.plugin(TurboDriveAdapter)

Alpine.start()

Summary:

The Alpine Turbo Drive Adapter is a useful tool for adding support for Alpine.js V3 to Turbolinks/Turbo powered apps. It handles events and cleans up the DOM from Alpine generated code when navigating between pages. The adapter can be easily installed from CDN or NPM and works seamlessly with Turbolinks/Turbo.