Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
September 4, 2020

Why Alpine.js plays nice with server-rendering

In a surprising twist @Alpine_JS appears to work with Twig templates out of the box, I’m sure there may be a few edge case issues to tackle but overall I’m extremely happy and impressed!

— Rory (@roikles) September 1, 2020

My personal observation is that the reason Alpine.js plays nice with a lot of templating engines is that it’s not a templating system itself.

Usually templating engines clash on interpolation syntax, since Alpine.js goes 100% on directives (& no interpolation syntax), it plays well with server-renderered templates out of the box.

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

Tips

@LaravelLivewire + @Alpine_JS + @tailwindcss = extreme DX feels pic.twitter.com/FlzzUWEEcr

— Jantinn Erezo (@CuanJan) August 30, 2020


I want to rebuild every website I’ve ever made and switch it to TALL stack. @tailwindcss @Alpine_JS @laravelphp @LaravelLivewire

— David 👨‍🦯 (@davidZkeefe) September 1, 2020

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:

  • protone.media/en by @pascalbaljet is Laravel, Tailwind (with Tailwind UI) and Alpine
  • merendinhadoarco.pt by @hmmonteiro is built with a Alpine, Tailwind and Symfony
  • codewithhugo.com by @hugo__df has new dashboard pages with Alpine.js.
  • collapsology.info by @jeromecoupe is built with Alpine.js and Eleventy.
  • sr-100daysofcode.netlify.app/day-021-frontmatter-arrays/ by @shanerobinson is built with Alpine and Eleventy

Demos:

  • Image annotation proof-of-concept made with Alpine.js by @pedroborg_es
  • A Laravel Select field with Alpine & Tailwind by @masterix21
  • Vue Reactivity API to mimic Alpine directives by @MrMaximVanhove

Articles & Tutorials

Accessing Data Variables from AlpineJS by @tnylea

Flexible Modal with AlpineJS and TailwindCSS by @WillRodRican

Adding Sound to Your Website with Alpine.js by @jackmcdade

For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

v0.1.x+ of Alpine.js Test Utils now has a `waitFor` utility by @hugo__df

Another important feature for Tailkit is ready! You can now preview components with JS functionality (using Alpine.js) and preview/copy HTML only or HTML with Alpine.js markup! #tailkit #tailwindcss #design #ui #dashboard pic.twitter.com/NdaIpCf9Zb

— John Champ (@pixelcave_john) September 1, 2020

A few components got refactored in kutty.netlify.app by @SathishCodes.

Added a UI for the boolean reactivity in this new take on DevTools (for @Alpine_JS). Will add Number, string, and array support soon! Then themes. Let me know what other features you think this needs. github.com/KevinBatdorf/a… by @kevinbatdorf

ryangjchandler/alpine-toggle by @ryangjchandler is a magic property to toggle variables.

ryangjchandler/alpine-clipboard by @ryangjchandler is a magic property to copy to clipboard.

KevinBatdorf/alpine-inline-devtools by @kevinbatdorf is a minimalist devtools for Alpine.js

v0.2.0 for alpine-turbolinks-adapter was released with better x-cloak support.

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.