October 2, 2020

Using Alpine.js & data attributes to pass data from x-for scope

Wondering how to pass data from x-for to a nested components using Alpine.js?

Stick them into the top-level element inside your x-for using x-bind:data-your-name.

— Hugo (@hugo__df) Sep 28, 2020

This email is supported by my GitHub Sponsors.

Is it just me or does the formatting for these @Alpine_JS release notes actually make you want to read them. #webdevelopment #javascript https://t.co/nAlfIPfNV7

— Walter Kimaro (@jestrux) Sep 29, 2020

Tips

I feel like using Alpine JS is making me research vanilla javascript options more closely. I like that.

Thanks, @calebporzio!

— Jose Soto (@JoseCanHelp) September 30, 2020

---

My favourite stack for rapid prototyping / side projects rn: @Alpine_JS @shoelace_style and just plain old Rails.

— Alasdair Monk (@almonk) September 28, 2020

---

There’s no putting this genie back in the bottle@Alpine_JS

— Tahir Iqbal Najam (@tahiriqbalnajam) September 26, 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:

• msrc.mdek12.org by @dbenkay is built with Alpine.js and TailwindCSS.
• zellemarketing.com by @javiereglz1 is being rebuilt in WordPress + Alpine.js
• glitch.com/~availability-calendar by @josefrousek is built with Alpine.js, TailwindCSS & reads data from Google Calendar Widget API.
• the new @gregghoushshow by @GreggHoush will be built with Alpine.js and Tailwind

Demos:

• add a header background when scrolling the page by @pacovitiello
• a datetime-local field with a placeholder attribute by @martijnvann
• Decorate server-rendered HTML to pop a modal open by @kieran_hunt

Articles & Tutorials

AlpineJS Hidden Gems by @austencam

Building a real-time chat room with Larasocket, Tailwind, Alpine, Livewire, and Laravel by @mankms

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

tall-forms now with Liwewire v2 and Laravel 8 by @TinaHammar

neat-starter A starter template for the N.E.A.T Stack (Netlify CMS, Eleventy, Alpine.js and TailwindCSS) by @surjithctly

New MyLists custom button placement with HTMX and Alpine.js by @getJReviews.