Alpine.js Weekly #66
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. pic.twitter.com/cPPdOPlEhf
— Rob de Kort (@studio1902) June 23, 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:
- my.opalstack.com/signup/, @opalstack 's brand new signin and signup dashboard is now powered by Alpine.jsand Tailwind, by @anjanesh
- ghygen.hi-folks.dev Ghygen is a GitHub Actions configurator for your Laravel/PHP Application. It is open source and is powered by Laravel + Livewire + AlpineJS, by @RmeetsH
- tailwind-layouts.vercel.app now support Alpine, by @lxsmnsyc
Demos:
- Cookie Banner Tailwind CSS & Alpine JS by surjithctly on @TwComponents
- clone of the "search" feature on [tailwindcss.com](https://tailwindcss.com/) with Alpine by @panhe678
- An Alpine plugin that matches Tailwind breakpoints on resize by @kevinbatdorf
- Alpine v3 x-validate sample/demo by @kevinbatdorf
- Alpine + Tailwind custom select box by @zoeyfyi
- Leaflet.js + TALL stack map demo by @GregRobson_UK
- Alpine 3 x-after-in-view plugin by @kevinbatdorf
Articles & Tutorials
[Video][French] Créons un système de compteur avec alpinejs by @emichel_dev
Code & Tools
v3.1.0
Features:
x-htmlis back
v3.1.1
Fixes:
- Safari 12 support syntax fix
- Initialize x-if AFTER being added to the DOM so x-ref works
tinywind.dev by @ryangjchandler is a collection of free-to-use Tailwind (& sometimes Alpine) components.
The Alpine.js Webflow wrapper by @jareklip has been updated to support V3. Demo: webflow.com/website/alpinejs-demo, code:github.com/loomchild/webflow-alpinejs.
Adopter Reactions
Had to add a new feature to an old website which is using an old CSS framework. Just realized again how much quicker it is when I use @tailwindcss and @Alpine_JS
— Andreas Becker (@designoutput) June 25, 2021