Alpine.js got 400k+ JSDeliver CDN hits last month but I would be interested if everyone could fill out the Alpine.js version poll since it seems there’s a heavy skew to version 2.3.5.
Interesting @Alpine_JS version usage stats (from CDN @jsDelivr) 400k+ CDN hits last month
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
It interesting to see the following Stimulus vs Alpine takes:
Alpine.js is everything I wanted Stimulus.js to be.
by @RichNwan
And the poll from @alec_c4:
Which one is better and why? Alpine.js or Stimulus
Tips
Pro tip from @LukeDowning19, you can make a template an Alpine.js component.
Did you know that you can scope an @Alpine_JS component to a
<template>tag? Makes for a very clean syntax when using loops from data fetched asynchronously
@LukeDowning19‘s epiphany can benefit us all:
The more I extract @Alpine_JS into blade components, the more I avoid placing
x-dataon the outer-most div of the component. You avoid any conflicts of interest and weird behaviour when placing things likex-refon the component tag.
Made with Alpine.js
harmonograph.art - a micro progressive web application (<30kb) to draw, download and share a randomised harmonograph by @alexpage_ is built with Alpine.js (and Eleventy).
- “super slick range slider” by @ShaneDRosenthal, let’s see if we can get him to share his source
- A Pocket client with Alpine.js and TailwindCSS by @hossammourrad
- Drupal Single File Component being re-rendered server-side using Alpine.js and morphdom by @mortensonsam
- alpine-auto-interval demo with TailwindCSS by @kevinbatdorf
- tiny “devtools” module by @kevinbatdorf as seen in his many demos at codepen.io/collection/nRxrPk
- Alpine.js Handbook Examples a storybook with a few Alpine.js components (more to come) from @hugo__df.
@Marvinified is an Alpine.js convert:
@Alpine_JS @Alpine_JS @Alpine_JS That’s what I used for my personal website and it was quite smooth. You get to keep your DOM, but this time with some upgrades.
You can check it out here github.com/alpinejs/alpine
Articles & Tutorials
Basic Modal with Alpine JS by @FullstackPhoen1
How to use AlpineJS with Laravel Mix by @Martin_Betz, shared by @laravel_101
Alpine.js In-Depth: x-data “state” & x-text “echo” by @hugo__df
Focusing Down: Implementing Laravel Livewire Infinitely Reduced Page Load by @WillRodRican
If you enjoy the newsletter and posts like these you can join my GitHub Sponsors, github.com/sponsors/HugoDF/, you support the newsletter & get early access to Alpine.js content.
Code & Tools
The v0.6.9 version of @axiomtheme dropped, it uses Alpine.js under the hood see the release notes at axiomtheme.com/v0.6.9-release-notes.
github.com/KevinBatdorf/alpine-auto-interval - a plugin to auto run a function every n milliseconds by @kevinbatdorf