Alpine.js Weekly #92
Tips
A couple days ago I just found out about this better method to trigger @Alpine_JS component from outside Alpine’s code. This method is very useful for example to make a reusable modal component using @laravelphp Blade component
— Abdurrahman Shofy Adianto (@azophy) August 6, 2022
It wasn’t particularly intuitive for me to load data in an AlpineJS template using fetch. Found some solutions but they were not clean or clear enough. So I adapted a bit of code and this is quite lovely I think.
https://gist.github.com/cdsaenz/394c1dec9610ae6d1567fb50d2baad62
— Charly@CSDevAr (@CSDevAr) August 19, 2022
Combining @code’s web components with @calebporzio’s @Alpine_JS makes for some seriously-simple, beautifully-styled, ARIA-ready UI reactivity with delightfully little code.
— Stephan Casas (@stephancasas) August 24, 2022
How create a tooltip with Alpine.js and Tippy?
Easy 🔥#alpinejs #javascript #laravel
— Jonathan Fontes 🇺🇦🇵🇹🇪🇺 (@gravataLonga) October 7, 2022
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 (more than just 1) week’s Alpine.js adopters:
- alpine-snake.netlify.app/ by @Joey_Farruggio
- louisjr.dev is built with Ghost, Alpine and Tailwind by @louisjrdev
- lechapeau.io, a (french) solution to help musicians to increase revenues via donations and enhance their communication with their audience is built with Bubble, Tailwind and Alpine
- plek.mx/ is built with Alpine and Django
- nickfrank.de/en is built with Statamic and Alpine
- munich-startup.de/ is built with WordPress and Alpine
- buckleysitzman.com/ is built with Eleventy, Alpine and Tailwind.
- carlrobertshaw.com/ is built with Craft CMS, Tailwind and Alpine
- uneeg.com is built with Strapi, Nuxt, Tailwind and Alpine and deployed to Digital Ocean
Demos:
- Simple dropdown with alpine js via @TwComponents
- Just started learning alpinejs. I will be sharing new components made in alpinejs and tailwindcss daily.
Today I tried creating accordion, Have a look.
A smooth accordion with Alpine by @ankitgodarthapa
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
[In Spanish] Modo oscuro en Laravel (Dark mode in Laravel with Alpine and Tailwind) by @javgr
Making a complete file uploader with progressbar using Livewire and Alpinejs by @rsinnbeck
Add a typewriter effect to any HTML element. by @_marcreichel
Using Google Maps with Alpine.js by @raymondcamden
Use Lottie animations with Alpine and Statamic by @studio1902
An Alpine.js wrapper for FormKit AutoAnimate by @_marcreichel
From Vue to Alpine.js: Our journey by @timkley
Code & Tools
Astro has an official integration in @astrojs/alpinejs integration, you can use astro add alpinejs, see the initial PR -> github.com/withastro/astro/pull/4406.
alpinejs-routes brings Laravel-ish routing to Alpine with the $route magic method: github.com/markmead/alpinejs-routes
Adopter Reactions
Used @Alpine_JS for the first time to build a simple status page for a Node.js backend. Felt like the good old jQuery days when everything on the web was so much simpler.
— Felix Gnass (@fgnass) August 6, 2022
Daily reminder that just because something advertise itself as lightweight and looks lightweight doesn’t actually mean that it actually is 😅
You can fit 5~ @solid_js or @preactjs in your app for the price of one @Alpine_JS
— Erika (@_princesseuh) August 26, 2022
