Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
April 24, 2020

Tales of Alpine.js adoption

Alpine.js was one of Daily.dev’s picks of the week.

Tales of Alpine.js adoption:

  • @baselinehq is made with Alpine.js as per @nonken
  • ourbible.study by @jchristopher leverages Alpine.js
  • Tailwind UI has kept Alpine examples but it’s not the default any more
  • @jtwesmann is loving Livewire + Alpine
  • Tailwind UI + Laravel + Alpine.js is @slovenianGooner‘s combo

Components, Demos & more:

  • Add dynamic form fields using AlpineJS by @sanjayojha, see the demo tweet
  • Table UI with TailwindCSS & AlpineJS by @mithicher
  • Tabs on Food - an Alpine.js demo by @j_greig
  • Everything-in-HTML by @simonswiss
  • Alpine JS + TailwindCSS Responsive Navigation Bar by @MuzafferDede
  • Simple cross-component communication with events in Alpine by @FeldAryeh

Articles & Tutorials

[Podcast] ViewComponent, Alpine.js, and embedding videos in ActionText - Remote Ruby

Building a Likes addon in Statamic 3 by Duncan McClean

Anonymous Alpine Components & An Alternative Approach to Computed Properties in Alpine.js by @ryangjchandler

Integrating Alpine.js + Pre/Server-rendered content by @hugo__df

Laravel Lessons: Views & Layouts by @stephenjudeso

Code & Tools

A little bit of progress on Alpine.js devtools with support for booleans, numbers and alpinetoolbox.com apparently. Check this repo out for how to test an Alpine.js application.

2.3.0

Features:

  • .self event modifier: @click.self="foo" (only run if the event originated on the listening target)
  • Updates to docs: NPM version badge, “nomodule” pattern for IE11 build
  • Refactored structure of x-for system

Fixes:

  • All Chromium and WebKit browsers were causing “keydown” listeners to fire on “autocomplete” #389
  • Accessing outer loop variables from inner loop variables was broken
  • bind :value on an <input type="radio"> with x-model as an attribute
  • $nextTick was finishing before certain refreshes were finished updating
  • Safari bug that caused x-model inputs to make the cursor jump when the value was updated

See the full release notes

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.