VueUseのuseTimeAgoの日本語化 #Vue.js

Vue.jsのComposition-APIを使った便利ライブラリのVueUseというのがあります。
執筆時点で200以上の細々とした関数があり、ラクチンポンで色々使えたりするので最近好んで使ってます。

その中に useTimeAgo という関数があるのですが、xx minutes ago みたいな感じで現在時刻を基準としての経過時間を表示してくれます。

Date操作ライブラリではmomentjsのコレや dayjsのこれとかがあるのでそっち使えば良いのですが、Vueの機能を使ってリアクティブにやってくれるのでこれはこれでアリかなと。

で、これを日本語化したくて軽くググったのですが見当たらなかったので、ソース読んで解決しました。
他に使う人も居るかもしれませんので、記録に残してきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/@vueuse/shared"></script>
    <script src="https://unpkg.com/@vueuse/core"></script>
  </head>

  <body>
    <div id="app">
      <p v-for="date in datetimes">{{date.value}}</p>
    </div>

    <script>
      const { createApp, ref } = Vue;
      const { useTimeAgo } = window.VueUse;

      const App = {
        setup() {
          const messages = {
            justNow: 'いま',
            past: n => n.match(/\d/) ? `${n}前` : n,
            future: n => n.match(/\d/) ? `${n}後` : n,
            year: n => `${n}年`,
            month: n => `${n}ヶ月`,
            week: n => `${n}週間`,
            day: n => `${n}日`,
            hour: n => `${n}時間`,
            minute: n => `${n}分`,
            second: n => `${n}秒`
          };

          const now = new Date();

          const year = now.getFullYear();
          const month = now.getMonth();
          const date = now.getDate();
          const hour = now.getHours();
          const min = now.getMinutes();
          const sec = now.getSeconds();

          const datetimes = ref([
            useTimeAgo(new Date(year+1,month,date,hour,min,sec), {messages}),
            useTimeAgo(new Date(year,month+1,date,hour,min,sec), {messages}),
            useTimeAgo(new Date(year,month,date+1,hour,min,sec), {messages}),
            useTimeAgo(new Date(year,month,date,hour+1,min,sec), {messages}),
            useTimeAgo(new Date(year,month,date,hour,min+1,sec+1), {messages}),
            useTimeAgo(new Date(year,month,date,hour,min,sec+1), {messages}),
            useTimeAgo(new Date(year,month,date,hour,min,sec), {messages}),
            useTimeAgo(new Date(year,month,date,hour,min,sec-1), {messages}),
            useTimeAgo(new Date(year,month,date,hour,min-1,sec-1), {messages}),
            useTimeAgo(new Date(year,month,date,hour-1,min,sec), {messages}),
            useTimeAgo(new Date(year,month,date-1,hour,min,sec), {messages}),
            useTimeAgo(new Date(year,month-1,date,hour,min,sec), {messages}),
            useTimeAgo(new Date(year-1,month,date,hour,min,sec), {messages}),
          ])

          return {
            datetimes
          }
        }
      };

      createApp(App).mount("#app");
    </script>
  </body>
</html>

実行結果

1年後
1ヶ月後
1日後
1時間後
1分後
いま
いま
いま
1分前
1時間前
1日前
1ヶ月前
1年前

秒単位の時間差が上手く表示されていませんが、ソースコード内で60000ms未満は justNow で丸められてます。

現時点ではハードコーディングされちゃってますので、秒単位の差分欲しい方は、別のライブラリを使うなり、自作するなりしてください。