Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《簡単に日付操作の実行》

こんにちは、樋口です。
 
今回は、Nuxt.jsからライブラリを読み込むだけで簡単に日付操作ができるようにできる@nuxtjs/dayjsについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js

3.9.2

Nuxt.js

2.12.2

@nuxtjs/dayjs

1.3.0

@nuxtjs/dayjsの追加

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

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

nuxt.config.js設定

次に、nuxt.config.jsに設定を追加します。

export default {
  mode: 'universal',
  ・・・・・
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    [
      'dayjs' ←　記載を追加
    ]
  ],
  // 終了
  ・・・・・
}

プロジェクト構成

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

Vueファイル

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

<template>
  <div class="container">
    <h1 style="text-align: center;">Vue-multiselect</h1>
    <div style="font-size: 22px; margin-top: 10px;">
      {{ value }}
    </div>
    <div style="font-size: 22px; margin-top: 10px;">
      {{ value2 }}
    </div>
    <div style="font-size: 22px; margin-top: 10px;">
      {{ value3 }}
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data () {
    return {
      value: null,
      value2: null,
      value3: null
    }
  },
  mounted () {
    this.value = dayjs()
    this.value2 = dayjs().format('YYYY-MM-DD')
    this.value3 = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に日付操作を行うことができます。機会あればぜひ試してみてください。
 
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

• 【エラー解決方法】Nuxt.js で「error Insert · prettier/prettier」が発生したときの対処法
• お祝いごとにぴったり！ Nuxt.jsプラグイン《アニメーションで紙吹雪を表現》
• 【エラー解決方法】Nuxt.js で「error ” is never reassigned. Use ‘const’ instead prefer-const」が発生したときの対処法
• Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《マウスカーソルの後を追ってくる円のエフェクト》
• Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《セレクトボックスでの複数選択の実行》