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:
npm install alpinejs- Go to
resources/bootstrap.jsand addrequire('alpinejs)- 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
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