date-fnsで日付のフォーマットを行う

microCMSで出力された日付を好きな形式でフォーマットしたいと思い、date-fnsを導入しました。

Contents

環境
インストール
使い方

環境

nuxt 2.14.0

インストール

@nuxtjs/date-fnsというモジュールをインストールします。

$ yarn add --dev @nuxtjs/date-fns

nuxt.config.jsのbuildModules内に追記します。ここらへんはnpmにも書いてあります。

buildModules: [
  '@nuxtjs/date-fns',
],

nuxt.config.jsに追記したら設定を読み込むためにサーバーを再起動します。

使い方

下記はmicroCMSで取得したデータをdataとして、v-forで展開しています。

<ul>
  <li v-for="item in data" :key="item.id">
    <dl>
      <dt>
        <time
          :datetime="item.publishedAt"
          v-text="$dateFns.format(new Date(item.publishedAt), 'yyyy.MM.dd')"
        />
      </dt>
      <dd>
        <nuxt-link :to="`/${item.id}`" v-text="item.title" />
      </dd>
    </dl>
  </li>
</ul>

公開日はpublishedAtで取得できるので、それをyyyy.MM.ddの形式にフォーマットするとします。

publishedAtがString型のためnew Date()で日付として生成し直して、第二引数に変換したい日付のフォーマットを入れます。

$dateFns.format(new Date(item.publishedAt), 'yyyy.MM.dd')

表示したいフォーマット形式はdate-fnsのドキュメントから確認できます。

これでコンパイル後はこんな感じになりました。

<time datetime="2020-12-29T07:41:23.129Z">2020.12.29</time>

簡単ですね！お疲れ様でした！