October 1, 2021

Alpine.js Weekly #75

🚢 New Alpine Plugin: Collapse

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

Check it:https://alpinejs.dev/plugins/collapse

— Caleb Porzio (@calebporzio) September 29, 2021

This newsletter supported by my GitHub Sponsors.

Tips

Two use cases where I put @Alpine_JS $persist() to work:

1. On local/dev env there's a floating toggle to simulate different account levels to access restricted content

2. Storing the response of Vimeo's API to populate a video library -> saves API calls and loads much faster

— Joseph Farruggio (@Joey_Farruggio) October 1, 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:

• fffuel.co/ssshape/ - an SVG blob/shape generator by @ffffffuel is made with Alpine
• pluckd-html-mockups.herokuapp.com/app/talent-search is made with AlpineJS by @Brauhaus
• tree.microkit.co is an ASCII tree generator built with Alpine and Parcelby @sandro_roth
• clovre.vercel.app is a web app to read downloaded Manga (includes shortcuts and AniList integration) is built with Alpine.js by @rehhouari, the source is available at github.com/rehhouari/clovre

Demos:

• Alpine.js + Tailwind navbar from github.com/josuapsianturi/tac by @castor_land

Articles & Tutorials

[Video - French] Apprendre AlpineJS - Introduction by @NordCoders

Create a MeiliSearch Laravel Blade Component by @mithicher

Code & Tools

v3.4.2

Features

• Add x-collapse plugin
• Allow accessing outer scope from within getters and setters
• Add x-on:.capture modifier