v-duration

Displays a live-updating duration from a timestamp to now. Updates every second.

Usage

<!-- Duration from timestamp to now -->
<span v-duration="startTimestamp"></span>
<!-- Output: "2h 15m 30s" -->

<!-- With base time reference -->
<span v-duration="startTimestamp" base-time="2024-01-01T00:00:00Z"></span>

<!-- Without seconds -->
<span v-duration="startTimestamp" no-seconds></span>
<!-- Output: "2h 15m" -->

Format: Xd Xh Xm Xs (zero values are omitted except when all are zero).

Modifiers

Attribute	Description
base-time	Custom reference time instead of "now"
no-seconds	Omit seconds from the output

Demo

<template>
    <div>
        <table style="border-collapse: collapse; width: 100%">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 8px; border-bottom: 2px solid var(--vp-c-divider)">Variant</th>
                    <th style="text-align: left; padding: 8px; border-bottom: 2px solid var(--vp-c-divider)">Output</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)">Default (with seconds)</td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-duration="startTime"></span></td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>no-seconds</code></td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-duration="startTime" no-seconds></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
const startTime = new Date(Date.now() - 3723000).toISOString();
</script>