【概要】

Nuxt.jsで日付フォーマットを使用する方法と現在時刻の出力方法についてまとめています。

【詳細】

1. モジュールをインストール

npm install --save-dev @nuxtjs/moment

2. nuxt.config.jsにmomentを使用する為の設定を記述する

buildModulesにmomentを追記し、moment部分をnuxt.config.jsの下部に作成します。

・nuxt.config.jsの設定内容

export default {
  ...省略...
  buildModules: [
    // moment
    '@nuxtjs/moment',
  ],
  ...省略...
  // moment
  moment: {
    locales: ['ja']
  },
  ...省略...
}

3. Vueファイルでの読み出し

・現在時刻の出力

this.$moment().format('YYYY-MM-DD HH:mm:ss');

・特定の時刻をフォーマットに合わせて出力

引数に日時のデータを持たせます。

すると、formatの形に合わせて出力されます。

下記の例では「2020-08-14T11:00:00.000Z」を渡しており、期待される結果は「2020-08-14 20:00:00」になります。

this.$moment('2020-08-14T11:00:00.000Z').format('YYYY-MM-DD HH:mm:ss');

出力結果

2020-08-14 20:00:00