April 24, 2020

Tales of Alpine.js adoption

Alpine.js was one of Daily.dev’s picks of the week.

Tales of Alpine.js adoption:

• @baselinehq is made with Alpine.js as per @nonken
• ourbible.study by @jchristopher leverages Alpine.js
• Tailwind UI has kept Alpine examples but it’s not the default any more
• @jtwesmann is loving Livewire + Alpine
• Tailwind UI + Laravel + Alpine.js is @slovenianGooner‘s combo

Components, Demos & more:

• Add dynamic form fields using AlpineJS by @sanjayojha, see the demo tweet
• Table UI with TailwindCSS & AlpineJS by @mithicher
• Tabs on Food - an Alpine.js demo by @j_greig
• Everything-in-HTML by @simonswiss
• Alpine JS + TailwindCSS Responsive Navigation Bar by @MuzafferDede
• Simple cross-component communication with events in Alpine by @FeldAryeh

Articles & Tutorials

[Podcast] ViewComponent, Alpine.js, and embedding videos in ActionText - Remote Ruby

Building a Likes addon in Statamic 3 by Duncan McClean

Anonymous Alpine Components & An Alternative Approach to Computed Properties in Alpine.js by @ryangjchandler

Integrating Alpine.js + Pre/Server-rendered content by @hugo__df

Laravel Lessons: Views & Layouts by @stephenjudeso

Code & Tools

A little bit of progress on Alpine.js devtools with support for booleans, numbers and alpinetoolbox.com apparently. Check this repo out for how to test an Alpine.js application.

2.3.0

Features:

• .self event modifier: @click.self="foo" (only run if the event originated on the listening target)
• Updates to docs: NPM version badge, “nomodule” pattern for IE11 build
• Refactored structure of x-for system

Fixes:

• All Chromium and WebKit browsers were causing “keydown” listeners to fire on “autocomplete” #389
• Accessing outer loop variables from inner loop variables was broken
• bind :value on an <input type="radio"> with x-model as an attribute
• $nextTick was finishing before certain refreshes were finished updating
• Safari bug that caused x-model inputs to make the cursor jump when the value was updated

See the full release notes