Alpine TimeAgo

Display the human-readable distance between a date and now with Alpine.js.

· 1 min read

My newest Alpine.js plugin alpine-timeago lets you display the human-readable distance between a date and now (like "3 months ago", "about 2 hours ago" or "in 4 hours").

The output gets updated every 30 seconds, so it is always up-to-date.

After installing the package you can simply add the x-timeago directive to any HTML element, provide the desired date inside the directive and the content of that element gets populated with the human-readable distance.

1<span x-data="{ date: new Date() }" x-timeago="date">
2 <!-- will be something like "about 3 hours ago" for example -->
3</span>

You can read the full documentation on GitHub.

This page may contain affiliate links. If you go through one of them to make a purchase I will earn a commission. Keep in mind that I link this product because of its quality and not because of the commission I receive from your purchases. The decision is yours, and whether or not you decide to buy something is completely up to you.