Alpine.js Weekly - 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.

pic.twitter.com/ieLkHhKGq4

— 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