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

#はじめに

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

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

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

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

microCMSにて日時を追加。フィールドIDをdateにしました。
![2020-11-13 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877497/27a4f0e8-fb0a-cad4-620c-985368c1735b.png)


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

```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>
```

でもこのままだと

![2020-11-13 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877497/60082654-c336-6f88-a634-82ddffdc5c81.png)

こんな感じで日付が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の形に書き換えられました！わーーーーい！

![2020-11-13 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877497/4b386f34-eeef-689e-dc65-5d60b38b0cec.png)

ここでは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で記事を管理していけばいいからちょーう楽。