アプリ サイト

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

前置き

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

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

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

使用ファイル

directory

pages/
--| index.vue

plugins/
--| vue-scrollto.js

nuxt.config.js

Step1: インストール

terminal

npm i dayjs

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

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

) file

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

これでグローバル登録

step4: 表示

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

) pages

パターン1

パターン2

表示パターン色々

曜日、時刻も表示

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

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

) file

書き換え

) pages

表示は変わりません🌟


日本語で表示

グローバルver

plugins/day.jsを編集

) file

ローカルver

index.vueのtemplateを編集

) pages

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

-アプリ, サイト
-,

© 2020 aLiz Nuxt