useTimeAgo

リアクティブな「○○前」表記。時間が変わると自動的に「○○前」の文字列を更新します。

使用法

import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))

コンポーネントでの使用

<template>
  <UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
    Time Ago: {{ timeAgo }}
  </UseTimeAgo>
</template>

非リアクティブな使用法

リアクティブ性が必要ない場合は、formatTimeAgo 関数を使用して、Ref の代わりにフォーマットされた文字列を取得できます。

import { formatTimeAgo } from '@vueuse/core'

const timeAgo = formatTimeAgo(new Date(2021, 0, 1)) // string