Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
June 19, 2020

Alpine.js 2.4.0 with x-spread support

Go check out Caleb at JSNation Live demo-ing Alpine.js

I'll be giving a talk on @Alpine_JS today at @thejsnation at 11:40 AM EST

It'll be a quick 20 minutes. If you care you can watch it on YouTube Live: https://t.co/QR1yf9W9NR

(It's free)

— Caleb Porzio (@calebporzio) June 19, 2020

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

Tips

Finally figured it out. @LaravelLivewire + @Alpine_JS + @vuejs happy together. 🥰

Just load dependencies in this order 💪 pic.twitter.com/O1pHMvqVzD

— Andrés Santibáñez (@asantibanez) June 16, 2020

Made with Alpine.js & Demos

  • baraveli-delivery.netlify.app by @baravelidev
  • Show / Hide Password by @mr_alaraj
  • manyrequests.com by @gabolecointere is now built with by Alpine.js
  • Toggle on mouse enter/leave using Tailwind and Alpine by @CuanJan
  • Alpine.js + Spruce URL Query Params by @chapmanjacobd
  • "As you type" search by @alexjgarrett
  • musicpracticetools.net by @SteveALee is built with Alpine.js & Eleventy
  • Navbar with animation by @Alfianokt
  • A credit card input for Stripe by @afelixdorn
  • AlpineJS modal with data from JSONPlaceholder by @jonwelshdesigns
  • Fetch and seed a select component with Alpine.js by @Tiago_Ferat
  • A countdown timer with Blade UI kit (powered by Alpine.js) by @driesvints
  • Buttons with loading feedback in Alpine.js and Tailwind by @userlastname
  • Toast Notifications - Alpine JS by Kevin Batdorf
  • Slider protoype by Kevin Batdorf

Articles & Tutorials

[Video] Realtime Private Messages with Laravel Livewire (Paid) by @teamcodecourse

Adding Quill Editor to a Livewire-Alpine.js App by @eduarguzher

Tutorial: Responsive Navigation with AlpineJS and TailwindCS by @WillRodRican

Tailwindcss dropdown with the use of Alpine.js by @Larapeakdev

[Video] Alpine.js Essentials - Laracasts by @jeffrey_way

For more posts like these, you can join the Alpine.js Handbook Knowledge Base (Paid), it's a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

ridgecss - A maximalist css framework for making web apps fast by @swlkr

v2.4.0

A big release this week.

Features:

  • x-spread directive (Allows you to bind an element to an object of Alpine directives and they will be "applied" (similar to x-bind="{}" in Vue)), see the x-spread docs
  • if one Alpine component on a page breaks, the others still work
  • access to $el from an x-data expression
  • support for animations in x-transition directives
  • x-model.number is now supported for checkbox arrays

Fixes:

  • $nextTick now waits until a transition is completely started (an extra tick) until being called
  • attributes are only set when needed in Alpine, (this was causing issues like pausing audio elements)
  • when transitions are toggled quickly, overlapping transitions are supported (the previous transition is finished first before the next one is applied)
  • allow nested components to be moved around the DOM and not be re-initialized
  • Checkboxes were being checked by default if a value binding was present
  • Expressions that use a "result" variable were running into a conflict with Alpine's built-in result variable
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.