Vue.jsベースのフレームワーク！ Nuxt3プラグイン《nuxt-timeで現在日付の表示》

こんにちは、樋口です。
 
今回はNuxt3で画面上に現在日付を表示できる「nuxt-time」についてご紹介します。非常に簡単に現在日付を表現できるので、是非ご覧ください。

使用するライブラリ

今回は下記ライブラリを使用します。

Vue.js

3.4.21

Nuxt.js

3.11.1

nuxt-time

1.0.3

nuxt-timeの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

 
これで対象のプロジェクトに、ライブラリを追加することができました。
 
次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

nuxt.config.tsファイルへの記載追加

ライブラリの追加をしたら、「nuxt.config.ts」ファイルの「modules」にライブラリの記載追加を行います。
 
– nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'nuxt-time'← 記載追加
  ],
})

これでライブラリの利用が可能となります。  

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。
 
– index.vue

<template>
<div>
    <h1>nuxt-time</h1>
    <NuxtTime :datetime="Date.now()" month="long" day="numeric" weekday="short" hour="numeric" minute="numeric" second="numeric"/><br />
    <NuxtTime :datetime="Date.now()" relative />
</div>
</template>

<script setup>
</script>
<style>
</style>

４行目：
画面表示された際の、現在日時を表示しています。「month」「day」「weekday」…などの、各種設定を行うことで表示の方法を選択することが可能です。
※ 詳細については、nuxt-timeをご確認ください。
 
５行目：
こちらの記載では、画面表示から経過した時間を表示することができます。
 
 

実行結果

– 表示結果
 
 

最後に

今回は、簡単に画面上に日時の表示を行うライブラリについてご紹介させていただきました。今後もこのような簡単に使用できるNuxt3でのライブラリのご紹介をしていければと思っています。
 
次回もよろしくお願いします。
 
 
 
 
《関連記事》

技術

2025.8.20(Wed)

Vue.jsベースのフレームワーク！ Nuxt3プラグイン《@nuxtjs/color-modeで画面背景の変更 》

#プログラム#Nuxt.js#Vue.js

 

技術

2025.5.30(Fri)

Vue.jsベースのフレームワーク！ Nuxt3プラグイン《nuxt-mdiで簡単アイコン表示 》

#プログラム#Nuxt.js#Vue.js

 

技術

2024.4.26(Fri)

Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《vue-word-highlighterで文字のハイライト実装》

#Nuxt.js#Vue.js