September 24, 2021

Alpine.js Weekly #74

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:

• previewify.app's template editor is powered by Laravel Livewire and Alpine.js by @LarsKlopstra

Demos:

• Data Table with TailwindCSS & AlpineJS by @IliassSalmi
• AlpineJS / Tailwind Carousel with x-intersect
• Change nav background color on scroll by @Mike_Andreuzza
• Alpine.js + Tailwind navbar by @Josuapsianturi

Articles & Tutorials

[Video] Responsive Sticky Navbar that Shrinks on Scroll with Tailwind CSS & Alpine JS by @shrutibalasa

Using alpine.js' x-data attribute in HEEx templates by @trisager

Tutorial: Making A Dark Mode Toggle In WordPress With Alpine.js And Oxygen by @RealOxygenApp

Code & Tools

v3.4.1

Features

• add Alpine.deferMutations() & Alpine.flushAndStopDeferringMutations()

v3.4.0

Features

• refactor x-trap to use focus-trap plugin
• add aria-expanded to the list of attribute bindings that don't remove when falsy

Fixes

• Fix x-transition regression with x-show

Adopter Reactions

First time using @Alpine_JS today. Impressed. Works nicely with @tailwindcss too.

— Gareth Wright (@garpunkal) September 24, 2021

---

@GoHugoIO + @Alpine_JS = ❤️#buildinpublic @AvogatoHQ

— Thibault Le Ouay 🥑 (@thibaultleouay) September 20, 2021