Alpine.js Weekly - Alpine.js Weekly #51

Nice thread on setting up TypeScript with Alpine.js (@samuelstancl packaged it up, see the “code” section)

Anyone interested in an article about how to set up TypeScript support for Alpine.js with a few lines of code? 😏 pic.twitter.com/Wwo0CN34C1

— Samuel Štancl (@samuelstancl) February 25, 2021

This email is supported by my GitHub Sponsors.

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

Here are this week’s Alpine.js adopters:

• utils.zest.dev by @bernheisel is built on Alpine.js and Tailwind -gopoirot.be by @ProofOfThePuddn is built with Alpine
• railsbytes.com/templates/zmnsb4 by @Stephen_Dolan via @maxbertinetti
• rccgglorytabernacle.com.au by @Opest12 is built with Alpine, Inertia, Tailwind and Laravel
• codebase-4 is built with Alpine.js

Demos:

• Alpine.js & Tailwind Image gallery by @andreich1980
• Tailwind and Alpine Slider by @tnylea (coming to devdojo.com/tails next week)
• simple “alert” elements for your Tailwind an Alpine.js projects by @ryangjchandler

Articles & Tutorials

[Video] Alpine.js Auto Textarea Height by @teamcodecourse

Alpine.js: The JavaScript Framework by @web_mavens

Autocomplete Search Component with Phoenix LiveView and AlpineJS by @VelinaPetrova7 via @jeremyday

Kentico Xperience Xplorations: Why We Should Be Using Alpine.js by @seangwright

Simple Alpine.js Component for Multiple Checkbox Selections by @jcarouth

Start with TALL Use Tailwind Alpine Laravel & Livewire by @NguyenL65709731

For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

LeanAdmin/alpine-typescript a package that provides full TypeScript support for Alpine.js. Lets you create class components, plain object components, and call them in x-data using Alpine.component(). And the class components even know about magic properties. By @samuelstancl

ryangjchandler/x-else, some sugar to write x-if="!condition" by @ryangjchandler

2.8.1

Fixes:

• Alpine-livewire interop bug (multiple listeners get registered)
• x-spread not liking undefined expression outputs
• x-for="a in range" allows a 0-range
• click.away debouncing support