loading...
Logo Markus A. Wolf - UX Designer & Product Owner
Suchen
Apline JS logo

Alpine JS – like Tailwind CSS for JavaScript

Use plain JavaScript also known as Vanilla JS to make your server side rendered pages dynamically the way you can do it in Vue JS with only 8,4kb costs. Sounds great? Try Alpine JS.

Alpine JS - Originally developed for Livewire

Alpine JS was originally built for Livewire, a full-stack framework for Laravel. Livewire uses Alpine JS to get the dynamic parts done.

Alpine JS was first released as version 0.1.0 by Caleb Porzio on 29 Nov 2019 and the version 1.0 was released on 19 Dec 2019 - quite fresh for my understanding 😁.

Alpine js is my alternative to jQuery but no alternative to Vue js. I use Alpine JS to make html dynamically the way I love it with Vue JS. Thanks to Vanilla JavaScript you don’t need a special framework anymore but to make frontend development easier and more comfortable you need the perfect piece of a puzzle to glue things together - with a low cost of data.

Latest Tailwind CSS articles

Logo TA-Gallery

Aktualisiert: May 2020

TA-Gallery - responsive and mobile first image and content gallery

An image and content gallery which is 100% customizable and has endless CSS animation options. TA-Gallery is based on Alpine JS and uses Tailwind CSS + BEM methodology.

Alpine JS - Easy to set up and no build prozess

Starting with Alpine JS is extremely easy. Add the link to Alpine JS form a CDN into the head of your HTML file and be sure that you have defer as attribute in your link. 

<script
  src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
  defer
></script>

The attribute “defer” means that the browser will execute the script after the document has been parsed. After loading the 8,4kb from a CDN you can use the magic of Alpine JS in your HTML code. Now you can replace jQuery with declarative rendering - what is that?.

Basic example in Alpine JS

Take a look on my basic example of Alpine JS - no separate javascript file - no script tag - play around on Codepen:

Okay - JavaScript inside HTML? I don’t have to leave HTML for some other stuff? Sounds familiar? Yes indeed! Think of Alpine JS as Tailwind for JavaScript - this is called “HTML-centric”

Think of Alpine JS like Tailwind CSS for JavaScript

Data binding, conditions and loops

Everything starts in Alpine JS with x-data. It tells the framework to initialize the new component with this data object. Similar to the data object in Vue JS. You add the object right there or from a reusable function.

In more complex situations you will love x-init. This gives you the ability to call a function with an object as parameter right after Alpine JS has made its initial updates to the DOM. For interactions Alpine JS provides a lot of predefined events. You can add a click to an element, prevent the default behaviour or do exactly the opposite call a function if you clicked outside of the element. 

<div x-data="{click: false}">
  <a href="#" @click.prevent="click=!click;alert('Hello Alpine JS: ' + (click ? 'true' : 'false'))">
    Don’t click me
  </a>
  <a href="#" @click.away="click:false;alert('Hello Alpine JS')">
    Catch me if you can
  </a>
</div>

Try this more complex example of an accordion with Alpine JS and Tailwind CSS with some random data from JSONPlaceholder.

Plugins for Alpine JS

In some comparisons between jQuery and Alpine JS you will find the question about plugins. Do Alpine JS have plugins? Well yes and no would be the right answer.

To build a component with Alpine JS is relatively simple. You just need to copy and paste some code and that’s it - or should it be. Every Alpine component ist just a function making them relatively uncomplicated to share by including the code on different pages. Because any magic properties are added when Alpine initializes so you can rely on this.

The Alpine JS community is growing fast and you can already find websites with a lot of reusable components and toolboxes. You can find Accordions, Carousels, Forms, Galleries, Modals, Navigation, Paginations or Tables on sites like Alpine Toolbox.

Furthermore you might check out my image gallery - TA-Gallery - and my pagination for articles, content or lists - TA-Pagination. These “plugins” for Alpine JS are used on my website and published on GitHub under the MIT licence - so free even for commercial use.

Dive into Alpine JS

You can find a lot of great introductions of Alpine JS on YouTube.

If you have a Scrimba account you can enjoy Andre’s “Learn Alpine JS” course and if you are a member of laracast you have to check out the the courses Building AlpineJSby Caleb Porzio (Creator of Alpine JS) and Alpine.js Essentials.

If you love Vue JS and if you ever have thought about how I can use this on every page? Here is the answer for that: Alpine JS.

All Alpine JS articles 🤓