Glowing community endorsements of Alpine.js
Expect a new influx of Alpine.js adopters after Evan You (creator of Vue.js) praised it earlier this week, which took the Alpine.js repo over 8k stars and the 2nd most starred JS library this month per @pacovitiello
FWIW I think @Alpine_JS is great - fills a niche where even Vue is a bit too heavy handed. I am happy to see other people take the good ideas from Vue and find good use cases for them.
— Evan You (@youyuxi) May 17, 2020
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
He's not the only one with praise and interest in Alpine, @SaraSoueidan's followers seemed to sway her to have a go (that thread is a great place for Alpine.js learning resources). While @Adamonsoon, @flaviocopes (blogger/author) and @diervo (from the team behind observable-membrane) reflected and praised the progress being made in the OSS ecosystem as a whole (Vue, Alpine...).
Made with Alpine.js
Alpine.js' flexibility is coming to the fore with it being used with Laravel, in Phoenix and even being floated to be used for a Drupal theme by renebakx
- Sneak peek at a new website being built by @mr_alaraj
- @m1guelpf uses Alpine on sitesauce.app/
Demos
- An Alpine.js example for robo-wizard (a multi-step form library) by @hipsterbrown
- Color picker with Tailwind & Alpine by @mithicher
- TALL Stack ERP software by @mvpopuk
- Bar Chart with TailwindCSS and AlpineJS by @mithicher
- @simonswiss might have more Alpine/Tailwind streaming cooking as might @FluencySoftware
- An Alpine datatable by @JacobHenning
- A confirmation modal attempt with Alpine and LiveWire by @jcergolj
- @Phroggyy is enjoying the straightforward nature of Alpine.js
Tips
- Remember to use x-cloak to avoid jankiness/flash of content before Alpine kicks in
- @jameslkingsley voices his appreciation for
x-on:click.awayin Alpine vs the Vue equivalent - Alfred App Snippets for pulling Alpine and Tailwind from CDN
- @JuanDMeGon reminds us that Alpine.js has a devtools/inspector (maintained by the community)
- prevent a page reload and unwanted hash in the url with x-on:click.prevent by @brbcoding
Articles & Tutorials
A guide to Alpine.js component communication by @hugo__df
Hiding elements until Alpine loads with x-cloak by @ryangjchandler
Directive precedence in Alpine by @ryangjchandler
Computed properties in Alpine.js by @teamcodecourse which is inspired by a post from @ryangjchandler: [An Alternative Approach to Computed Properties in Alpine.js](https://ryangjchandler.co.uk/articles/an-alternative-approach-to-computed-properties-in-alpinejs)
For more posts like this, 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
Alpine.js IntelliSense for VSCode thanks for re-sharing/surfacing @LiamHammett
github.com/wuwx/laravel-admin-alpinejs use Alpine.js in Laravel Admin. Surfaced by @call_user_func
Request for feedback x-bind
Caleb just streamed some work on an x-bind="someValue" directive syntax and has a work in progress PR for anyone who wants to check it out: github.com/alpinejs/alpine/pull/515
v2.3.5
Fixes
- Elements with
x-transition:leave-*and no enter transition were being "shown" one tick after $nextTick, even though there is no transition for them. #492