Alpine.js Weekly #71
Tips
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
initTry it out here: https://t.co/e1Rwfec9Wl
— Kevin Batdorf (@kevinbatdorf) August 16, 2021
Remember scrollspy from bootstrap? (Remember bootstrap? 🤣) Today I replicated it using @Alpine_JS‘s new x-intersect plugin (V3).
Docs: https://alpinejs.dev/plugins/intersect
Initially it threw me off because it doesn’t tracking leaving, but then I changed xdata from boolean to a value and💥
— David A. Lindahl (@austriker27) August 6, 2021
This newsletter supported by my GitHub Sponsors.
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:
- bigbadcon.com is live, built with Alpine, Eleventy, Tailwind, hosted on Netlify, by @colinaut
- alpine-simon.vercel.app - a game experiment made with Alpine, Tailwind and Vite, by @niklaspostulart
- sayso.co is built with Alpine, Eleventy and Tailwind, hosted on Netlify by @SAYSOco
Demos:
- v3 upgrade to a datatable component by @IliassSalmi
- polls.adonisjs.dev is an Adonis + Alpine poll demo, source code: github.com/adonisjs-community/polls-app by @AmanVirk1
- interactable heart button in Alpine by @icesofty
- Shoelace + Alpine by @richeklein
- Alpine.js x-teleport by @AmanVirk1
Articles & Tutorials
New Alpine.js Plugins: Intersect, Persist, and Trap by @jasonlbeggs
Fancy a modern alternative to jQuery? Meet AlpineJS
Code & Tools
3.2.4
Features:
x-intersect:enter/x-intersect:leavex-on:[event-name].dotmodifier
Fixes:
x-trapcrawl bugs- Safari autofill bug
- regression in
x-transition
Community
github.com/thetutlage/alpine-teleport by @AmanVirk1 adds an x-teleport directive.
Adopter Reactions
When ideas pop in my head, it’s amazing how easy it is to go from idea to a functional web app using @laravelphp @tailwindcss and depending on need, @LaravelLivewire @Alpine_JS and @vuejs or @reactjs
— Jimmy Aldape (@jimmyaldape) August 10, 2021