Nuxt.jsで日時文字列またはDate型をフォーマットして表示

日時を好きな形式にフォーマットして表示したいとき、変換とか色々めんどうですよね。
そんな時に便利なライブラリが dateformat です。
今回 Nuxt.js のプロジェクトで使用しました。

dateformat を利用可能にする

まずはインストールします。

npm i -S dateformat

どこからでも dateformat の関数を利用できるようにするため、 plugins ディレクトリ内に dateformat.js というファイルを下記内容で作成します。
injectを利用して、importしなくても利用できるようにしています。

plugins/dateformat.js

const dateformat = (date, format) => {
  const dateformat = require('dateformat');
  return dateformat(date, format);
};

export default ({}, inject) => {
  inject('dateformat', dateformat);
};

続いて、 nuxt.config.js に設定を追加します。

nuxt.config.js

  plugins: [
    '@/plugins/dateformat'
  ],

以上で準備は完了しました。

使用方法

下記のように呼び出しを行います。

index.vue

<script>
export default {
  methods: {

    // 日時文字列から変換（dateStringが日時文字列）
    hoge(dateString) {
      return this.$dateformat(new Date(dateString), 'yyyy年mm月dd日 HH:MM');
    },

    // Date型から変換
    fuga() {
      return this.$dateformat(new Date(), 'yyyy年mm月dd日 HH:MM');
    }
  }
}
</script>

簡単ですね！