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 Alpine JS articles

Empire state building

Veröffentlicht: October 2020

How to get access to data from different Alpine JS components

In this article you will find two answers to this question and one of them feels right. So dive into the details and get things done the lean way.

Visibility eyes

Veröffentlicht: October 2020

The best way to use x-cloak in Alpine JS

To give you an easy explanation: x-cloak will be removed after Alpine JS initializes. Understood everything? But if you are still asking yourself why is this important - keep reading.

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.

TA-StyledPlugins

Furthermore you might check out my image gallery and my pagination for articles, content or lists. Most TA StyledPlugins are used on my website and all are published on my GitHub account under the MIT licence - so free for commercial use.

  • TA-Gallery - A light-weight, responsive and mobile first image gallery based on Tailwind CSS and Alpine JS.
  • TA-Pagination - A light-weight, responsive and mobile first pagination for content, based on Alpine JS and Tailwind CSS.
  • TA-YouTube - A YouTube video wrapper with auto playback, aspect ratio and privacy settings.
  • TA-Analytics - An easy and customizable Google Analytics “blocker”.
  • TA-Foodtrucks - An easy way to show the next food truck and street food dates in your area.

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

State management in Alpine JS

Since the beginning I was working with Alpine JS I was asking myself: Is there a good way to exchange data between different components on the page - something like Vuex, or Redux.

Wouldn’t it be amazing if the values could be stored in the local storage so you have access to this data every time someone is switching to this page? Well you can have an object stored in the window object and you can save and fetch data from it. This is fine if you just have to handle basic functionalities but it doesn’t feel smooth and right to solve it this way.

So after some research I found Spruce - A lightweight global state management layer for Alpine.js - and it does exactly what I was looking for. If you are dealing a lot with static websites and want to have a lean and lightweight approach try out Spruce with Alpine JS - you will love it. You can find out more about Spruce and Alpine JS in my article “Lightweight state management for Alpine JS” - come and dive into the details.

Dive into Alpine JS

You can find a lot of great introductions to 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 🤓