Oct. 17, 2020, 10:30 a.m.

Alpine.js for sorcerers

Alpine.js Weekly

I’m experimenting with @Alpine_JS and @tailwindui and now I feel like a sorcerer. pic.twitter.com/wW2ExmOhoQ

— Mark Praschan (@MarkPraschan) October 13, 2020

This email is supported by my GitHub Sponsors.

I’ve wondered for a long time which use-case Spruce by @ryangjchandler for @Alpine_JS could have.
Today I’ve found one and it works super easy, impressive and like expected! 🎉🚀
I was able to create a global volume slider for several videos with it. 🤩https://t.co/5pGdbGfh4v

— Tom Witkowski (@devgummibeer) October 12, 2020

Tips

Give @Alpine_JS a try! You can sprinkle in tiny amounts of JS in-line with HTML and it’s super approachable.

— Ryan Atkins (@ryatkins) October 12, 2020


As someone who avoids writing JS at any cost, @LaravelLivewire and @Alpine_JS have been a joy to work with and have allowed me to create some pretty interactive apps that I wouldn’t have ever attempted before.

— Brad Kilshaw (@BradKilshaw) October 13, 2020


I described @Alpine_JS like this on a call today: “Imagine if jQuery and Vue had a baby, but they modified the genetics so it was like @tailwindcss but for JavaScript.”

You’re welcome to use that @calebporzio.

— Galen Gidman (@galengidman) October 12, 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.

Here are this week’s Alpine.js adopters:

  • dcblog.dev by @dcblogdev is build with Laravel, Tailwind/Tailwind UI and Alpine.js
  • @fostr_io are revamping their Shopify themes with Alpine.js + Tailwind CSS

Demos:

  • a component to create data charts with Livewire, Alpine.js and Chart.js by @asantibanez
  • a transition for a navigation menu on mobile by @austriker27
  • a demo of an Alpine.js REST API integration by @getJReviews
  • a flashcard component with Alpine, Tailwind and Popmotion.js by @miczed
  • a TALL international phone number input with Livewire, Squire, Alpine and libphonenumber-js by @danjharrin
  • A Livewire, Tailwind and Alpine.js modal by @jtkendall

Articles & Tutorials

Landing Starter Template based on TailwindCSS, AlpineJs and build on esbuild and PostCSS by @witty_prog_blog

[Video] Building a custom select input with Alpine.js and Tailwind CSS by @danjharrin

[Slides + Video] Keeping your head with Magento by @willemwigman on how the future of Magento might leverage Tailwind and Alpine.

The best way to use x-cloak in Alpine JS by @markusantonwolf

Sharing State Between Livewire & Alpine 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

hyva.io are fast Magento themes with TailwindCSS and Alpine.js by @willemwigman

Spruce 2.0.0 by @ryangjchandler has been released, the state managamement library for Alpine.js now has persisted stores.

You just read issue #34 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.