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?
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:
useTimeAgoonly needs very low accuracy of the time, usingrequestAnimationFramewould be too costly and would increase the bundle size.
See also: useNow on VueUse.