[ 目次 ]

• はじめに
• dayjsインストール
• dayjs用のpluginを用意する
• nuxt.config.jsに設定を追加
• 利用方法
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はjavascriptの日付管理に、dayjsを導入していきます。
Nuxt.jsで作られている本ブログにdayjsをインストールして利用していきます。

dayjsインストール

■ npmを利用する場合

$ npm install dayjs --save

■ yarnを利用する場合

$ yarn add dayjs

dayjs用のpluginを用意する

~/plugins/day.jsというpluginを用意し、各ページやVuexなどから利用できるようにしましょう。

import dayjs from 'dayjs'

export default ({ app }, inject) => {
    inject('dayjs', ((string) => dayjs(string)))
}

統合された注入 という機能を用いて、dayjsの関数を利用できるようにしています。

関数や値をアプリケーション全体で利用できるようにしたい場合もあるでしょう。 そのような変数を Vue インスタンス(クライアントサイド) やコンテキスト (サーバーサイド) 、さらに Vuex ストアへ注入することが可能です。 それらの関数の前には $ を付けるのが一般的です。

nuxt.config.jsに設定を追加

pluginsに読み込みの設定を追加します。

plugins: [
    '~/plugins/day.js',
],

利用方法

pluginで注入した関数は$dayjsとして利用できます。

□ テンプレート

<div v-text="$dayjs().format('YYYY-MM-DD')"></div>

□ Script

export default {
  mounted(){
      this.$dayjs().format('YYYY-MM-DD')
  },
  asyncData(context){
    context.app.$dayjs().format('YYYY-MM-DD')
  }
}

最後に

今回は、dayjs の利用方法についてまとめました。
基本的な日付の表示しか述べていません。今後利用していき dayjs のAPIについて学んでいきたいと思います。
学んだ情報は改めてブログに追記したいと思います。