Alpine.js Weekly - 2021 in Alpine.js land

Caleb has been dropping teasers about Alpine v3, for example the following thread:

The next version of @LaravelLivewire and @Alpine_JS will (likely) be completely driven by Vue 3’s reactivity core.

This has so many insanely cool implications.

Let me try to explain them.

— Caleb Porzio (@calebporzio) December 18, 2020

This email is supported by my GitHub Sponsors.

Tips

If anyone missed it, you can use x-for over a range (x-for="i in 10")

TIL @Alpine_JS supports iterating over a range. 🔥 https://t.co/DF6P0CAm8S

Thanks @jasonlbeggs for the tip. 🤗

— Andrés Santibáñez (@asantibanez) January 8, 2021

For Laravel users wondering how to set Alpine.js up without a script tag from the JSDeliver CDN:

How to import @Alpine_JS into your @laravelphp project without using a CDN:

1. npm install alpinejs
2. Go to resources/bootstrap.js and add require('alpinejs)
3. Profit!

— Lucas (@0800LUCAS) December 27, 2020

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.

Demos:

• A Laravel/Alpine component to trick email harvester bots by @quarterdeck
• Alpine + IMask for input masking (eg. phone numbers) by @hawleydigital
• Built with @laravelphp , @LaravelLivewire , @tailwindcss , @tailwindui , and of course @Alpine_JS The #TallStack by @marc_hershey
• A Plex request app with Alpine.js by @marc_hershey
• An Alpine pricing widget by @MarkShust
• page/redirect notifications for LaravelLivewire using Alpine.js by @roniestein
• dark mode for a Statamic site with Alpine.js by @MichaelAerni
• A Tailwind page builder with Alpine.js by @tnylea
• A Sign up/in page with sliding buttons by @jeremybrb3D

Articles & Tutorials

Using Alpine.js with the Tableau JavaScript API by @LediHolly

[French] AlpineJS le framework JS entre JQuery et VueJS by @AgenceWebLogin

[Spanish] Hablemos sobre Alpine.js by @abr4xas

Simple Stepper With Alpine.js by @JamesAuble

Developing AlpineJs Apps Similar to Vue’s Composition API by @witty_progr

JavaScript Frameworks, Performance Comparison 2020 by @RyanCarniato

Adding Notifications to Laravel.io with Livewire, Alpine.js and Tailwind UI by @laravelio

Alpine.js by @jonstodle

How to create OTP input using Alpine.js and Tailwind CSS by @rajesh_dewle

[Video] Leveraging 11ty in Healthcare by Dr. Dan Fascia @ Jamstack Toronto by @JAMstackTORONTO

Optimizing User Experience with LiveView by @chris_mccord

AlpineJS for Beginners by @tnylea

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

@nileshtrivedi has been building Tailwind CSS + AlpineJS components at polyglot.network/tailpine/.

github.com/thomasjohnkane/tailwind-alpine-chrome-extension by @thomaskaneATX is a cool Tailwind + Alpine.js Chrome Extension starter kit.

@axiomtheme v0.8.0 with Tailwind CSS and Alpine.js upgrades: axiomtheme.com/v0.8.0-release…

v2.4.0 of Spruce (global state management library for Alpine) by @ryangjchandler with object watching support.

github.com/SimoTod/alpine-turbo-drive-adapter by @simo_tod v1.0.0 now has support for the new Basecamp hotwired/turbo library.

Adopter Reactions

AlpineJS is starting to grow on me. 90% of the time I pull in Vue I only need the reactivity and hooks. “Tailwind for JavaScript” is right.

— Alexandre Olival (@lex_olival) December 28, 2020

The ETA stack is my new fav way of dealing with frontends. Eleventry, Tailwindcss, Alpine.js, and ur golden baby. blazing fast, hella’ convenient, and stupid easy.

technically it’s a jamstack, but that can cover some not so great options.

— ⬡ fasko (@fasko_web) December 20, 2020

@Alpine_JS is honestly so damn good. As a developer, my vanilla JS leave a lot to be desired and even I can use Alpine effectively. Thanks for making me look good @calebporzio

— Jordi (@consolelogjordi) December 19, 2020