Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
November 6, 2020

That "no build step" Alpine.js feel

Everyone remember their first time loading Alpine.js?

First experience pulling @alpine_js into a project tonight. Felt good not to pull in a gigantic bundle size just to conditionally show an svg. Just pull alpine in from a cdn, set some html attributes and **chefs kiss** 😙😁

— Hugh Haworth (@elliotclydenz) November 3, 2020

This email is supported by my GitHub Sponsors.

Tips

Here's a tip from a PR I worked on a while back (didn't get merged). You can use it as a base from which to create your own custom Alpine.js build that uses a difference prefix for attributes. For example you could use h-.

@hugo__df Having worked on this PR / issue: https://t.co/CyxgCVreLz. Can I essentially manually just do a search & replace on alpine.js for "x-" and replace it with my preferred prefix?

— Paul Morel (@PaulJMorel) November 2, 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:

  • mmt.cz a website for a European company specialising in industrial automation & robotics by @BohemicaStudio. Built on Apostrophe CMS, Alpine and Tailwind.
  • http://dimvand.com/ by @yacobee is built with Alpine.js

Demos:

  • Animation of element fade-in on page-load with Tailwind and Alpine by @WesWalker2112
  • An @Alpine_JS demo showing one way to always show an element on Desktop, while having a button to show/hide on mobile. Perfect for nav menus and the like. codepen.io/KevinBatdorf/p… by @kevinbatdorf
  • It's even more fantastic when combined with @Alpine_JS. I was able to make a 5-star rating input with just 7 lines of code - HTML/CSS/JS all in one place! 👌🔥 codepen.io/eshnil/pen/GRq… by @nileshtrivedi
  • I love how quickly things can be prototyped in @Alpine_JS & @tailwindcss. Here's an expanding nav/search thingy: jsfiddle.net/philw_/9c4e28hk. Clicking the submit button with the input is hidden expands it, as does keyboard focus. Clicking outside closes it, or there's a close button. by @philw_

Articles & Tutorials

NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS by @surjithctly

[Podcast] #020 LiveView v LiveWire, Alpine.js with Caleb Porzio - Thinking Elixir by @calebporzio

Developing a Netlify Contact Form using Alpine.js by @witty_progr

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

livewire-charts v1.3.0 by @asantibanez is out, now with multi-line chart support.

For anyone struggling to find the PHPStorm Alpine.js plugin by @inxilpro, it's at https://plugins.jetbrains.com/plugin/15251-alpine-js-support.

github.com/agonzalezio/tailpine is a Tailwind + Alpine quickstart.

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