neat trick for @Alpine_JS v3. The official way to access Alpinejs scope from outside code is to use Alpine.store() method. However I found this approach ( window.MyData = this ) easier for small code base where using store() is overkill
The @Alpine_JS Collapse plugin has saved me literal hours of work since it’s release and not enough people are using it. If you’re building accordions, dropdown menus or mobile navigation menus, take it for a spin! https://alpinejs.dev/plugins/collapse
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!
I ♥️ how easy @Alpine_JS makes it to ~Do The Right Thing~:
• got a script only needed for the footer? Lazy load it with x-intersect & muicss/loadjs
• something could benefit from aria-describedby? Use $id
• made a flyout menu? Use Trap
• want to save user state? Use Persist
We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components
Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use
Try it out here:
Another fun use case for x-effect in @Alpine_JS v3 when using the persist plugin: parsing localStorage values (string only) so you can keep using boolean values in directives. This simplified example is for a toolbar that’s either always visible or only when you hover it.
Spend the last few hours deep diving into the source code to figure out the V3 codebase. And I must say it’s extremely readable, easy to follow, and approachable to all levels. Find the lifecycle’s start method and just go step by step.
I really like this use case for x-effect in @Alpine_JS v3. It’s an easy way to disable scrolling on the body when you open a modal or a mobile navigation. Using x-effect you don’t have to worry about enabling scrolling again when a user hits ESC or uses click.outside for example.
It’s a complete internal rewrite with a focus on supporting feature extension and there’s now official Alpine.js docs: , head over there to see all the new features.
More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.
First glance at @Alpine_JS, and I can totally relate on the separation of concern!
An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.
In the past couple of weeks Alpine.js passed 14k stars (now sitting at around 14.1k) and we’ve seen websites big and small adopt Alpine.js.
Tips
🔥 If you need to pass a bound attribute to a Blade component, you can prefix the attribute name with two colons instead of one to tell Blade to not evaluate the attribute as a PHP expression.
Alpine is at 13.4k stars at the time of writing, still a way to go to jQuery but in the same ballpark as Stimulus (which is at 10k stars at the time of writing). GitHub stars aren’t everything but you know, Ember is next on the hitlist (although they’re really not about the JS sprinkles).
Frontend Frameworks/Libraries With Most Stars on GitHub.
Seems like Alpine made some waves in the State of JS 2020, you can see the JS framework results at: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
Frontend framework satisfaction (%) ranking from “State of JS 2020”
If you missed it on Twitter/GitHub, this week’s Alpine.js release (2.8.0) adds better error messages when Alpine.js hits an eval error. It uses console.warn under the hood so you might want to display those when working on an Alpine.js project.
I’ve liked the combo of @rails + @Alpine_JS so far. Feels good not having to rip out the entire rails front end just to get little more ✨ in the UI/UX.
Alpine.js devtools versions 0.0.4-0.0.7 have been released within the last week. They includes fixes to the key issues of the devtools: handling page refresh and open/close properly (who knew those things would take months to fix). We got some help from @stephenoldham on the repo to give the Devtools a fresh UI, and squashed a bunch of issues since then (eg. got the size down to 50kb instead of 4MB) 👇 have a look at 0.0.7 if you haven’t used the devtools yet.
This email is supported by Learnetto. Get the full-stack JS bundle for (sale ending soon).
