Alpine.js Weekly - Alpine.js Weekly #68

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.

— Rob de Kort (@studio1902) July 7, 2021

This newsletter supported by my GitHub Sponsors.

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:

• imranic.com has been rebuilt with a redesign, from Laravel + Vue to Livewire + Alpine by @al_imran_cse
• laravel.io‘s latest iteration includes Alpine and Tailwind by @_joedixon
• FPStoMS.com is build with Alpine by @MichaelAllar

Demos:

• success message with Alpine by @yacobee
• x-barf directive for Alpine v3 by @markjaquith
• Bulma interactive button with Alpine by @kasperkamperman

Articles & Tutorials

Password Input Toggle in Alpine.js by @newaperio

How to Watch Alpine Stores for Changes by @ryangjchandler

[Video] Getting Started with Alpine.js by @chris__sev

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

github.com/lefrancois/alpine-lorem is a Lorem Ipsum generator directive by @lefrancois