Nuxt＋microCMSにday.jsを加えて自由に日時表示する

はじめに

microCMS公式の記事を参考に、nuxtで作ったウェブサイトにmicroCMSを導入。
https://microcms.io/blog/microcms-nuxt-jamstack-blog/

これを真似して書いた日時がT-Z形式になっちゃったのですが、そこにday.jsを入れたら自由に日時表示出来たので、その備忘録。

簡単にニュース一覧を作っていく！

日時がT-Z形式になっちゃう問題

microCMSにて日時を追加。フィールドIDをdateにしました。

それから前述の記事のようにnuxtに記述。日時{{content.date}}を入れました。

pages/index.vue

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
　　　　{{content.date}}
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/blog',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

でもこのままだと

こんな感じで日付がT-Z形式の文字列になってしまってます。

わーー困ったこれ分からん。

ということで、以下が解決法です。

day.jsを導入【解決法】

day.jsは日付と時刻を表示・操作できるライブラリ。

これをインストール

npm install dayjs --save

pluginフォルダ下にday.jsを作成

plugin/day.js

import dayjs from 'dayjs'

export default ({ app }, inject) => {
   inject('dayjs', ((string) => dayjs(string)))
}

nuxt.config.jsのplugin部分に追加

nuxt.config.js

plugins: [
    '~/plugins/day.js',
  ],

そしたらinde.vueはこう！！

pages/index.vue

<template>
<div class="p-10">
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">

<p v-text="$dayjs(content.date).locale('ja').format('YYYY/MM/DD')" />
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
           // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/blog',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  },
    layout: 'home',



}
</script>

記事詳細ページも作ります。

pages/_slug/index.vue

<template>
  <main class="main">
    <h1 class="date" ><p v-text="$dayjs(date).locale('ja').format('YYYY/MM/DD')" /></h1>
    <h1 class="title" >{{title}}</h1>
    <div class="post" v-html="body"></div>
  </main>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://your-service-id.microcms.io/api/v1/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

これで！日付をyear/month/dayの形に書き換えられました！わーーーーい！

ここではyear/month/dayの形にしてますが、その他フォーマットは以下など参考に。
https://day.js.org/docs/en/display/format
https://www.webopixel.net/javascript/1460.html

デモサイトはこれ

これを使って作ったニュースページデモです。

デモサイト
https://happy-goldberg-74d3a1.netlify.app/news/

（githubのソースコードも公開しようと思ったけどAPI key隠して載せ直す元気が今はない）

ちなみにこのデモ、フレームワークはtailwindcssを使ってます。

あとはmicroCMSで記事を管理していけばいいからちょーう楽。