Jan. 21, 2022, 7:30 p.m.

Alpine.js Weekly #82

Alpine.js Weekly

Alpine.js is now available on DefinitelyTyped, you can load them using npm install @types/alpinejs.

Hmm there’s now @types/alpinejs (github.com/DefinitelyTyped/DefinitelyTyped/pull/58130)

— Jesse Dobbelaere (@JesseDobbelaere) January 14, 2022

Tips

A quick gotcha with @Alpine_JS . Make sure to use this.close() in the x-data object. If it’s just close() then that’s window.close() and well…it’ll close the browser lol!

pic.twitter.com/t7PmL810gO

— Kyle Williams (@kylewcode) January 13, 2022


Alpine JS Tip💡
Use $nextTick() and refs to auto focus an input.@Alpine_JS #alpinejs #alpine_js

pic.twitter.com/382Ym3Ak6f

— Sean (@shornuk) January 11, 2022


❗️A quick reminder that arrays are always passed by reference in Javascript, so be careful with passing array data into an @alpinejs component.

If you only assign the array argument instead of cloning it, every component instantiation may overwrite the items of the previous.

pic.twitter.com/oEv5sP16s0

— Lupinity Labs | Freelance Software Development (@LupinityLabs) January 8, 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 week’s Alpine.js adopters:

  • domain.io is built with Laravel, Livewire, and Alpine.js by @aoxborrow
  • stragif.run is built using the TALL stack by @mathieuginod
  • fffuel.co/ssspill is an SVG generator for a stylistic spill/melted effect built with Alpine by @ffffffuel
  • image2dots.glitch.me converts your images to dot pattern and is built with Alpine by @gregwolanski (source is avilable at glitch.com/~image2dots)

  • notioninvoice.com is built with Laravel, Livewire, Alpine and the Notion API by @farez

  • the landing page of belltastic.com has recently been rebuilt with Alpine.js by @arukomp

Demos:

  • VS Code Tabs with Tailwind and Alpine.js by @Mike_Andreuzza
  • Simple pricing table with monthly/annual toggle with Alpine.js by @shornuk
  • Wordle clone with Tailwind and Alpine by @shrutibalasa
  • An Alpine component to filter a list of bands by selected genre by @bugbytesio

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Rotating Sponsor Slots with Alpine, WordPress and ACF by @Joey_Farruggio

Code & Tools

v3.8.0

Features:

  • new focus plugin (supersedes trap which is now deprecated)
  • Alpine.bound to retrieve Alpine bound attribute data
  • Alpine.bind() to allow global element bindings
  • Alpine.$data(el) to get the reactive data scope from any element

You just read issue #82 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.