Realtime date time with JavaScript

I want to check the time elapsed from now. For example 5 minutes ago like that. I want to make it live without any page refresh. Is date-fns package is suitable for this? and how to do so, Can I watch for the changes with a Watcher in Vue JS. Thanks if anyone can help me with this situation.

formatDistance method in date-fns is suitable for this?

Answer

I’ll assume you are using the composition API.

You can use the useTimeAgo composable from VueUse. It returns a formatted string in the format you described, updating with a specified interval.

Example:

import { useTimeAgo } from '@vueuse/core'

const theEvent = new Date(2022, 0, 1)

// The time can be a Date, string, or number, or a `ref` holding one of those.
// Whatever you give, the value is passed through `Date`.
const timeAgo = useTimeAgo(theEvent, { updateInterval: 30_000 }) // Update every half minute

You cannot specify requestAnimationFrame as the interval, unlike with the underlying useNow composable, but this shouldn’t ever be needed. Antfu’s response when I asked:

useTimeAgo only needs very low accuracy of the time, using requestAnimationFrame would be too costly and would increase the bundle size.

See also: useNow on VueUse.