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
Aktualisiert: November 2020
How to get access to data from different Alpine JS componentsIn 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.
Veröffentlicht: October 2020
The best way to use x-cloak in Alpine JSTo 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 the links in a practical list
All Alpine JS articles 🤓
Aktualisiert: November 2020
How to get access to data from different Alpine JS componentsIn 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.
Veröffentlicht: October 2020
The best way to use x-cloak in Alpine JSTo 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.
Aktualisiert: May 2020
TA-Gallery - responsive and mobile first image and content galleryAn 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.