#alpinejs #javascriptAccess Alpine.js component data/state from outside its scopeWarning this uses Alpine.js v2 internals, there isn’t currently a public-facing API to do this. As an active Alpine.js and Alpine.js Devtools contributor, I’ve had the pleasure of explaining how to access Alpine.js component data from outside the component and of usin ...
#alpinejs #javascriptA guide to Alpine.js component communicationLearn how to share information between Alpine.js components with the $dispatch magic property and the window/document as an event bus. This post will show how to trigger and listen to global/window/document events with Alpine.js in order to use it as an event bus to communicate b ...
#alpinejs #javascript #jqueryAlpine.js + jQuery/JavaScript Plugin Integration: a Select2 exampleOne of the jQuery ecosystem’s greatest strength is the wealth of drop-in plugins available. Alpine.js is a great way to phase out jQuery spaghetti code from current and future projects with its declarative nature and small bundle size. What Alpine doesn’t have (yet), ...
#alpinejs #javascriptSynchronize x-data and the URL in Alpine.js with the location/History APIs and $watchAlpine.js doesn’t have a router as yet since it’s designed to deliver simple interactive experiences on top of server or statically rendered sites. For single page applications that make heavy use of the History API or require a router, one would be better served head ...
#alpinejs #eleventy #javascript #laravel #laravel #rails #craftcmsIntegrating Alpine.js + Pre/Server-rendered contentAlpine.js is a great choice for adding some interactive feature to a server rendered, static or pre-rendered site. In the Alpine.js GitHub Issues, we’ve seen a lot of questions around how to deal with content that’s pre-rendered or server-rendered in Alpine.js in orde ...
#alpinejs #eleventy #javascriptIntegrating Alpine.js with Eleventy & YAML files to create Alpine Playground's CollectionsAdding collections to Alpine.js Playground, essentially bringing it in line with projects such as awesome-alpine and alpinetoolbox.com. It came from the fact that I’m curating quite a bit of content for each newsletter and it makes sense that content featured on the newslet ...
#eleventy #alpinejs #javascript #nodeHow to migrate a bunch of HTML pages (Alpine.js Playground) to EleventyAlpine.js Playground was recently migrated from custom build scripts & HTML pages to leverage Eleventy. For context, Alpine.js Playground’s custom build scripts + HTML files had the following pros and cons. Pros: simple very simple, everything is in the scripts folder. ...
#alpinejs #javascriptPractical Alpine.js: x-data data access & data fetching/AJAX examplesAlpine.js “A rugged, minimal framework for composing JavaScript behavior in your markup.” is a great, lightweight replacement for interactive jQuery or Vanilla JS sprinkles due to its small size (~7kb min-gzipped) & the fact it can be included from a CDN with a sc ...
#alpinejs #javascriptRun Alpine.js inside of ReactAlpine.js is well-suited for building widgets and easily creating client-side experiences for websites that are mainly server-side rendered or static. Good news: it is possible (at the time of writing with Alpine.js 2.x) to integrate Alpine.js with React trivially. Alpine.js is & ...
