Alpine.js Weekly #82

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!

— Kyle Williams (@kylewcode) January 13, 2022

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

— 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.

— 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