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

作成日 2020.03.05
更新日 2020.07.21
nuxt.js
nuxt.js

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

1. 環境
2. Moment.jsインストール
3. 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インストール

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

yarn add @nuxtjs/moment

Moment.js 使い方

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

/*
  ** Nuxt.js modules
  */
  modules: [
    ['@nuxtjs/moment', ['ja']],
  ],

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

import Vue from 'vue'
import moment from 'moment'

Vue.filter('moment', function (value) {
  const date = moment(value);
  return date.format("YYYY/MM/DD HH:mm");
})

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

/*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/moment-filter', ssr: false }
  ],

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

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        {{ new Date() | moment }}
      </h1>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

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

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

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