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

2021年7月15日Vue.js

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

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だけ注意が必要で、1ずれるので一つ足します。
あとは、formattedDateの部分で自由に表示方法を整えます。

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

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)

英語の場合、月が数字でないので、配列で作成してあげる必要があります。

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と記述することで日付フォーマットを適用することができます。