【Nuxt.js】dayjs導入編：リアルタイムな日時を表示してみよう

前置き

dayjsについて🗓🕰
日付と時刻を表示・操作できるライブラリ🎈🧸

今回は簡単に表示のみ。
時間の足し引きなどは
TypeScriptで設定が必要なため、
TypeScriptの応用編をやってからですね！

公式
https://www.npmjs.com/package/dayjs
日本語
https://github.com/iamkun/dayjs/blob/master/docs/ja/README-ja.md

使用ファイル

Step1: インストール

terminal

npm install dayjs --save

Step2: /pluginsにjsファイルを追加

plugins/day.jsを作成
Nuxt.jsにおけるプラグインの書き方
https://ja.nuxtjs.org/guide/plugins/

) file

import dayjs from 'dayjs'

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

import dayjs from 'dayjs'

export default ({ app }, inject) => {

inject('dayjs', ((string) => dayjs(string)))

}

Step3: nuxt.config.jsのpluginsに記載

これでグローバル登録

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

plugins: [

'~/plugins/day.js'

step4: 表示

1番シンプルなdayjs().format()で表示🍒

) pages

パターン1

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

<script>
</script>

</div>

</template>

</script>

パターン2

<template>
 <div class="page">
   <p>
     {{ now }}
   </p>
 </div>
</template>
<script>
export default {
 data () {
   return {
     now: '',
   }
 },
 mounted(){
   this.now = this.$dayjs().format('YYYY-MM-DD')
 },
}
</script>

<p>

</p>

</div>

</template>

export default {

data () {

return {

now: '',

}

mounted(){

this.now = this.$dayjs().format('YYYY-MM-DD')

}

</script>

表示パターン色々

曜日、時刻も表示

デフォルトは英語(US)ロケール。
後ほど日本語に変更していきます🌟

<template>
 <div class="page">
   <p v-text="$dayjs().format('dddd, MMMM D, YYYY h:mm A')" />
 </div>
</template>

<script>
</script>

</div>

</template>

</script>

長いのでFormatを使います🍒
plugins/day.jsを編集

) file

import LocalizedFormat from 'dayjs/plugin/localizedFormat'

dayjs.extend(LocalizedFormat)

dayjs().format('L LT')

import LocalizedFormat from 'dayjs/plugin/localizedFormat'

dayjs.extend(LocalizedFormat)

dayjs().format('L LT')

書き換え

) pages

<template>
 <div class="page">
   <p v-text="$dayjs().format('LLLL')" />
 </div>
</template>

<script>
</script>

</div>

</template>

</script>

表示は変わりません🌟

日本語で表示

グローバルver

plugins/day.jsを編集

) file

import dayjs from 'dayjs'

// 日本語表示にするためlocaleを追加
import 'dayjs/locale/ja'
dayjs.locale('ja')

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

import dayjs from 'dayjs'

// 日本語表示にするためlocaleを追加

import 'dayjs/locale/ja'

dayjs.locale('ja')

export default ({ app }, inject) => {

inject('dayjs', ((string) => dayjs(string)))

}

ローカルver

index.vueのtemplateを編集

) pages

<template>
 <div class="page">
   <p v-text="$dayjs().locale('ja').format('LLLL')" />
 </div>
</template>

<script>
</script>

</div>

</template>

</script>

jaを他のロケールに変えれば
簡単に表示が変わります♪