Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
June 19, 2021

Alpine.js Weekly #65

v3 is picking up some steam, if you’ve missed it, here are the launch tweets:

๐ŸŽ‰ If you didn’t catch it, Alpine Version 3 has been officially released!

You can watch the Alpine Day keynote where I show all the changes and show off the new features here:

โœŒ๏ธโ›ท๏ธhttps://alpinejs.dev/upgrade-guide

โ€” Caleb Porzio (@calebporzio) June 17, 2021


Hey folks, still lots to do so I’ll put something more official out soon, but for now…

Alpine V3 has been released. Install instructions here: https://alpinejs.dev/essentials/installation

Livewire v2.5.1 now has built-in support for Alpine V3 as well!

โ€” Caleb Porzio (@calebporzio) June 15, 2021

And some benchmarks from Ryan Carniato:

So playing around with the latest @Alpine_JS. V3 is 16kb vs V2’s 8.5kb. That’s mostly since it now uses @vuejs‘s reactivity (~6kb). But on the positive in tentative testing performance is way better.

V2(left), V3(right) vs VanillaJS

pic.twitter.com/z0vgqAKrno

โ€” Ryan Carniato (@RyanCarniato) June 14, 2021

This newsletter supported by my GitHub Sponsors.

Tips

Basic support for turbo with Alpine:

At least from mine and Jack’s quick pair, this is all you need to make Alpine V3 and TL work:

https://gist.github.com/calebporzio/20cf74af4a015644c7bef5166cffd86c

โ€” Caleb Porzio (@calebporzio) June 16, 2021


@Alpine_JS pro tip: ๐Ÿš€๐Ÿš€
If you are like me a forgot x-cloak all the time
Am I missing something @calebporzio ๐Ÿค”

pic.twitter.com/dqeFKBRSuo

โ€” Wali Razzaq (@Wali_Razzaq) June 17, 2021


Just learned about click.stop with @Alpine_JS ๐Ÿงก

pic.twitter.com/m6BFpUiXN8

โ€” Tim L. (@timuism) June 15, 2021

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:

  • mam.org.mm Medical Action Myanmar is a non profit organisation aiming to improve healthcare for all people in Myanmar. Built with Statamic, Tailwind and Alpine, designed & built by @studio1902.
  • stop-contrat.com is using Alpine.js as part of the TALL stack, good spot by @HenocKhouilla
  • peshcash.af is a website for sharing best offers and discounts in Afghanistan, built with Laravel and AlpineJS, by @ahangarha
  • alpine-cart.herokuapp.com, Sinatra + Tailwind + Alpine JS by @soulchildpls

Demos:

  • Drag and Drop example using AlpineJS and TailwindCSS by @soulchildpls
  • Windows 11 UI in the browser with Alpine and Tailwind by @pixelcave_john
  • Demoing out the built-in state functionality of Alpine.js with a notes app by @alexjgarrett

Articles & Tutorials

The Magic Behind Reactivity - Proxies by @ryangjchandler

[Video] SeaJUG Front End Java 2021 - easy full stack Java web apps with Spring Boot, Alpine, Tailwind and HTMX by @wiverson

The Benefits of Container Queries by @robmcfadden (code samples use Alpine)

Code & Tools

v3.0.6

Initial v3 release as demo-ed at Alpine Day (or close to it).

Features/breaking changes from v2: https://alpinejs.dev/upgrade-guide

v3.0.7

Features:

  • “alpine:init” event which is an alias of “alpine:initializing”

Fixes:

  • binding the value of a missing nested object value to be empty string
  • x-bind:class directive using object syntax
  • store’s init() function not receiving reactive “this” context

Plugins & extensions

Fern - Persisted global stores for Alpine 3.x. by @ryangjchandler

Tailwind Layouts now supports Alpine, see https://tailwind-layouts.vercel.app/patterns/image?environment=alpinejs, by @lxsmnsyc

@inxilpro has submitted some bugfixes to the IntellijAlpine plugin: github.com/inxilpro/Intelโ€ฆ

[github.com/imacrayon/alpine-ajax]https://github.com/imacrayon/alpine-ajax) adds turbo-frame-like behavior to components by @ima_crayon

Adopter Reactions

Converted some of jQuery code last night over to @Alpine_JS. First time using it. Excellent!

โ€” Latency (@latentuser) June 18, 2021


After some tinkering tonight with some @Alpine_JS and reading the docs I’ve decided that I really like it! Lightweight but so powerful. Top work by @calebporzio and the community. It’s going to be perfect for my side project.๐Ÿ™‚

โ€” Greg Robson (@GregRobson_UK) June 16, 2021


LOL @Alpine_JS “x-html was a seldom used directive in Alpine V2. In an effort to keep the API slimmed down to only valued features, V3 is removing this directive.”https://t.co/KrXVrQ5NqH

They never developed with WordPress, apparently ๐Ÿ˜‚๐Ÿ˜‚

โ€” Alex Standiford (@AlexStandiford) June 14, 2021

Don't miss what's next. Subscribe to Alpine.js Weekly:
This email brought to you by Buttondown, the easiest way to start and grow your newsletter.