Nuxt.jsで日付をフォーマットする方法

Nuxt.jsで日付をフォーマットする方法を紹介します。

結論から書くと、Nuxt 2(Vue 2)ではpluginsでVue.filterを登録し、テンプレートで{{ date | date }}と書くのが定番です。
Nuxt 3(Vue 3)ではフィルター機能そのものが廃止されているため、日付を整形する関数をutils/かcomposables/に置き、テンプレートから{{ formatDate(date) }}のように関数として呼びます。
どちらの場合も、ライブラリを入れずにブラウザ標準のDateやIntl.DateTimeFormatだけで「2021年7月15日」のような表記にできます。

この記事の手順はNuxt 2向けです。Nuxt 3での書き方は記事の最後にまとめています。

Nuxt.jsで日付をフォーマットする手順

1. pluginsフォルダにdate-filter.jsを作成する
2. nuxt.config.jsのpluguinsで読み込む
3. コンポーネントで使う

pluginsフォルダにdate-filter.jsを作成する

まずは、pluginsフォルダにdate-filter.jsを作成します。
ファイルの名前はなんでも大丈夫です。

日付を日本語表記にしたい場合

import Vue from 'vue'

const dateFilter = value => {
  return formatDate(value);
};

function formatDate(inputDate) {
  const date = new Date(inputDate);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const formattedDate = `${year}年${month}月${day}日`;
  return formattedDate;
}

Vue.filter('date', dateFilter)

monthだけ注意が必要で、getMonth()は0から始まるため1を足します。
あとは、formattedDateの部分で自由に表示方法を整えます。
日や月を「07」のように2桁で揃えたい場合は、String(month).padStart(2, '0')とします。

日付を英語表記にしたい場合

import Vue from 'vue'

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

const dateFilter = value => {
  return formatDate(value);
};

function formatDate(inputDate) {
  const date = new Date(inputDate);
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();
  const formattedDate = `${day}.${months[month]} ${year}`;
  return formattedDate;
}

Vue.filter('date', dateFilter)

英語の場合、月が数字でないので、配列で用意しておく必要があります。
月名の配列を自分で持ちたくなければ、new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(date)で「July 15, 2021」の形式が得られます。

nuxt.config.jsのpluguinsで読み込む

nuxt.config.jsを開き、次のように記述します。

  plugins: [
    '~plugins/date-filter.js'
  ],

これでpluginsのdate-filter.jsをグローバルに読み込むことができます。

コンポーネントで使う

 <div class="post-date">投稿日：{{ updatedDate | date }}</div>

updatedDateがDateに変換できる値なら、そのとなりに|(パイプライン/バーティカルバー) dateと記述するだけで日付フォーマットが適用されます。
表示が「Invalid Date」や「NaN年」になる場合は、渡している値がnew Date()で解釈できない文字列になっています。APIから受け取った値は、2021-07-15T23:14:03ZのようなISO形式か、ミリ秒のタイムスタンプで渡すと確実です。

Nuxt 3(Vue 3)で日付をフォーマットする場合

Vue 3ではフィルターが廃止されたため、Vue.filterと{{ value | date }}の書き方は使えません。
代わりに、整形用の関数をutils/formatDate.jsに置きます。Nuxt 3ではutils/配下の関数が自動importされるので、各コンポーネントで読み込む記述は不要です。

// utils/formatDate.js
export function formatDate(inputDate) {
  const date = new Date(inputDate);
  return new Intl.DateTimeFormat('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
}

<div class="post-date">投稿日：{{ formatDate(updatedDate) }}</div>

Intl.DateTimeFormat('ja-JP', ...)は「2021年7月15日」の形式を返します。英語表記にしたければロケールを'en-US'に変えるだけで、月名の配列は不要です。
サーバー側とブラウザ側で描画結果をそろえるため、タイムゾーンに依存する表示ではtimeZone: 'Asia/Tokyo'をオプションに加えておくと、表示のずれによる警告を避けられます。

pluginsの読み込み方は記事によって扱うものが違うので、Nuxtでライブラリを組み込む別の例としてNuxt.jsでuuid(v4)を使う方法、グローバルな設定をnuxt.config.jsにまとめる例としてNuxt.jsでassetsのcssをグローバルに適用する方法も参考になります。