Archive

Alpine.js is now available on DefinitelyTyped, you can load them using npm install @types/alpinejs.

Hmm there’s now @types/alpinejs (github.com/DefinitelyTyped/DefinitelyTyped/pull/58130)

— Jesse Dobbelaere (@JesseDobbelaere) January 14, 2022

Tips

A quick gotcha with @Alpine_JS . Make sure to use this.close() in the x-data object. If it’s just close() then that’s window.close() and well…it’ll close the browser lol!

— Kyle Williams (@kylewcode) January 13, 2022

Happy 2022 to the Alpine.js Community!

Tips

I ♥️ how easy @Alpine_JS makes it to ~Do The Right Thing~:
• got a script only needed for the footer? Lazy load it with x-intersect & muicss/loadjs
• something could benefit from aria-describedby? Use $id
• made a flyout menu? Use Trap
• want to save user state? Use Persist

— Phil Wolstenholme (@philw_) December 16, 2021

Made with Alpine.js

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:

• spartner.software is built with Laravel, Statamic, Alpine and Tailwind by @patrickbrouwers
• doeken.org is build with Alpine, Jigsaw and Algolia by @doekenorg
• sketchupforwoodworkers.com by @ZTHall is built on the NEAT (Netlify CMS, Eleventy, Alpine, Tailwind) stack

Hey @calebporzio, seems like the new https://t.co/tUm0XDf3Uh is using @Alpine_JS

— Amit Merchant (@amit_merchant) November 17, 2021

I spy @Alpine_JS 👀👀👀

— Caleb Porzio (@calebporzio) November 17, 2021

Made with Alpine.js

Tips

Someone just PR’d a good tip to the @Alpine_JS docs - thought I’d share cuz I liked it

An announcement from the Alpine Components Team

We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components

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.

🚢 New Alpine Plugin: Collapse

Easily animate the height of an element when toggling via x-show.

Check it:

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.

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.

📣 Announcing (officially) Alpine Component Patterns!

📦 UI component source code
📹 Educational screencasts 🫂 3rd-party integrations 🦑 Livewire integration

Tips

Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use Try it out here:

Tips

Create shortcut easily with @Alpine_JS

Alpine plugins are dropping, keep an eye on Caleb Porzio’s announcements.

🥳 New Alpine Plugin: Persist 🍾

Easily persist data across page loads by using a nifty little decorator function: $persist()

Tips

Another fun use case for x-effect in @Alpine_JS v3 when using the persist plugin: parsing localStorage values (string only) so you can keep using boolean values in directives. This simplified example is for a toolbar that’s either always visible or only when you hover it.

Tips

Top tips from Kevin this week.

Spend the last few hours deep diving into the source code to figure out the V3 codebase. And I must say it’s extremely readable, easy to follow, and approachable to all levels. Find the lifecycle’s start method and just go step by step.

Tips

I really like this use case for x-effect in @Alpine_JS v3. It’s an easy way to disable scrolling on the body when you open a modal or a mobile navigation. Using x-effect you don’t have to worry about enabling scrolling again when a user hits ESC or uses click.outside for example.

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:

Alpine v3 code was released as part of Alpine Day (alpineday.com): github.com/alpinejs/alpine-next for everyone’s perusal.

It’s a complete internal rewrite with a focus on supporting feature extension and there’s now official Alpine.js docs: , head over there to see all the new features.

Tips

Thank you Afonso Cerejeira for this great introduction to Htmx, alpine.js and hotwire.
You might not need a frontend framework

Tips

This is how you can create an easy scroll to top button with @Alpine_JS and .

Tips

replace the turbo-frame with @Alpine_JS , no code replaced needed. perfect for django.

Alpine Day is shaping up to be awesome, here’s the announcement tweet for whoever isn’t on Twitter.

🎉 Alpine Day, June 10th 2021 is now a real thing!

🚀 Launching everything new and shiny 🎙️ Hearing from crazy awesome speakers 💰 All profit goes directly to speakers

Tips

The following is in Spanish, the gist is a reminder that there’s a way to access the parent component’s data by selecting it and accessing __x.

Caleb’s setting up an Alpine Day, there’s a mailing list you can join.

🥳 Alpine Day 2021 is now a real thing.

One day packed full of new launches and cool speakers. Gonna be a hoot! 🦉

“Q1 2021 State Of JavaScript Libraries and Tools: Frameworks” report is out 🎉🎉🎉 https://moiva.io/blog/2021-q1-state-of-js-frameworks
Best Q1 2021 Top Performers: Marko ()

I’ve got my CSS-in-JS solution for @Alpine_JS sorted 👀🤣

Let Caleb know how you use Alpine.js & what you call it:

• Alpine users, do you use Alpine with a build? (like “npm install alpinejs) Or just the file/CDN.

A few announcements this week.

Alpine Devtools v1.0.0 is out for Chrome and .

More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.

First glance at @Alpine_JS, and I can totally relate on the separation of concern!

An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

Nice thread on setting up TypeScript with Alpine.js (@samuelstancl packaged it up, see the “code” section)

Anyone interested in an article about how to set up TypeScript support for Alpine.js with a few lines of code? 😏

Here are this week’s Alpine.js adopters:

• artmuseumgr.org by is built with Alpine.js

In the past couple of weeks Alpine.js passed 14k stars (now sitting at around 14.1k) and we’ve seen websites big and small adopt Alpine.js.

Tips

🔥 If you need to pass a bound attribute to a Blade component, you can prefix the attribute name with two colons instead of one to tell Blade to not evaluate the attribute as a PHP expression.

Refactored (almost) all JavaScript on https://eurovision.tv/ to @Alpine_JS this week. Thanks !

Alpine.js on the @NativeScript website?

Alpine is at 13.4k stars at the time of writing, still a way to go to jQuery but in the same ballpark as Stimulus (which is at 10k stars at the time of writing). GitHub stars aren’t everything but you know, Ember is next on the hitlist (although they’re really not about the JS sprinkles).

Frontend Frameworks/Libraries With Most Stars on GitHub.

Seems like Alpine made some waves in the State of JS 2020, you can see the JS framework results at: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Frontend framework satisfaction (%) ranking from “State of JS 2020”

1️⃣ Svelte (89%) 2️⃣ React (88%) 3️⃣ Vue.js (85%) 4️⃣ Alpine.js (82%) 5️⃣ Preact (78%) 6️⃣ LitElement (78%) 7️⃣ Stimulus (67%) 8️⃣ Angular (42%) 9️⃣ Ember (42%)

Caleb has been dropping teasers about Alpine v3, for example the following thread:

The next version of @LaravelLivewire and will (likely) be completely driven by Vue 3’s reactivity core.

If you missed it on Twitter/GitHub, this week’s Alpine.js release (2.8.0) adds better error messages when Alpine.js hits an eval error. It uses console.warn under the hood so you might want to display those when working on an Alpine.js project.

Sample error messages:

@Alpine_JS is in this year’s State of JavaScript survey, how cool is that! pic.twitter.com/FmKl8Lu6mE

I’ve liked the combo of @rails + @Alpine_JS so far. Feels good not having to rip out the entire rails front end just to get little more ✨ in the UI/UX.

Alpine.js devtools versions 0.0.4-0.0.7 have been released within the last week. They includes fixes to the key issues of the devtools: handling page refresh and open/close properly (who knew those things would take months to fix). We got some help from @stephenoldham on the repo to give the Devtools a fresh UI, and squashed a bunch of issues since then (eg. got the size down to 50kb instead of 4MB) 👇 have a look at 0.0.7 if you haven’t used the devtools yet.

This email is supported by Learnetto. Get the full-stack JS bundle for (sale ending soon).

Vanilla Alpine.js codepen template that I made for myself https://codepen.io/pen?template=bGdzxBO

— Hugo (@hugo__df)

Decided to tidy up the Spruce docs and create a dedicated website, no more README file mess.

If you fancy reviewing, I’d love to get some feedback <3 https://docs.ryangjchandler.co.uk/spruce/

Everyone remember their first time loading Alpine.js?

First experience pulling @alpine_js into a project tonight. Felt good not to pull in a gigantic bundle size just to conditionally show an svg. Just pull alpine in from a cdn, set some html attributes and **chefs kiss** 😙😁

Request for product? Or is the Laravel TALL preset “good enough”?

Anyone ever created a product configurator with the TALL stack? Or just LiveWire+alpinejs? #tall /cc

Just replaced Vue.js with @LaravelLivewire / Alpine.js in my Twitter bio 😎

— Jason Beggs (@jasonlbeggs)

I’m experimenting with @Alpine_JS and @tailwindui and now I feel like a sorcerer.

This week’s public service announcement that friends don’t let friends not know about Alpine.js.

To illustrate this point, here are a couple of reactions to discovering Alpine.js: