August 14, 2020

An ode to Alpine.js

A short issue today but let’s start it off with some Alpine love:

.@Alpine_JS is seriously underrated

— Shritesh Bhattarai (@shritesh) August 13, 2020

When paired with Tailwind and a decade and a half of experience, it can be a goto

After 15 years of CSS/Sass, and a couple of years dedicated to Vue/Nuxt, @tailwindcss and @Alpine_JS came along and swept me off my feet. Together, they are my new front end dream team.

— joshua briley (@joshuabriley) August 13, 2020

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

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:

• mightycal.com has some Alpine on static pages along with some React pages & server-rendered views, per @derrickreimer.
• bloody-crime.surge.sh by @Virinchi_cv

Demos:

• A simple single-file countdown component powered by Alpine.js by @devgummibeer
• an Blade component that uses Alpine to initialize cleave.js input formatting by @jeffrey_way
• a “guarded” x-component with Alpine.jsby @JuanDMeGon
• accordion tabs using Alpine JS + Tailwindcss by @nemrut_co

Articles & Tutorials

[Spanish] AlpineJS: El TailwindCSS para JavaScript by @danestves

Intro to Alpine.js for Vue developers by @LogRocket

Shortcuts using Alpine JS by @victoryoalli

[Video] Eleventy, Alpine.js and Tailwind: towards a lightweight Jamstack @jamstackberlin by @Phacks

An accessible Alpine.js menu toggle by @hugo__df

Replicating $.slideToggle with Tailwind CSS & Alpine.js by @ryangjchandler

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/HugoDF/alpine-inline-transpile - a PostHTML plugin to transpile code inside of Alpine.js directives by @hugo__df

github.com/use-preset/laravel-tall by @enzoinnocenzi

github.com/godbout/alpinejs-dash-docset by @slmd_macau

github.com/ellgreen/tailpine-laravel-preset - a frontend preset for Tailwind CSS and Alpine.js by @devellisper

v2.6.0

Features:

• Support for await inside event handlers. eg. <button @click="myVar = await somethingAsync()">run async</button>

Fixes:

• Support .camel modifier for namespaced events: x-on:ns:event-name.camel.window="foo = 'bob'"
• Allow numbers in bound attributes (for SVG properties like x1)