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?
Advertisement
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, usingrequestAnimationFrame
would be too costly and would increase the bundle size.
See also: useNow
on VueUse.