Nuxt.js Moment.jsを使って日付処理を行う手順

Nuxt.js Moment.jsを使って日付処理を行う手順

nuxt.jsで 日付処理のライブラリである「Moment.js」を利用して、日付処理を行うまでの簡単な手順とサンプルコードです。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsはnpx create-nuxt-appでインストールしてます。

Moment.jsインストール

下記のコマンドでインストールします。

Moment.js 使い方

nuxt.config.jsのmodulesに登録します。

plugins配下にmoment-filter.jsを下記のコードで編集します。これで、momentという名称でfilterが適応されます。

次に nuxt.config.jsの pluginsにも登録します。

最後にpages配下のindex.vueを下記のように編集します。

ブラウザから http://localhost:3000/にアクセスすると現在日付がformatされて表示されます。