WordPress + Nuxt.js でポートフォリオサイトを作る その7

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その7

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

外部リソースの（インストールした）フォントを使う

src/assets/font/MyFontName.woff にフォントファイルを配置

src/assets/css/styles.scss ファイルを作成し下記などでフォント指定

@font-face {
  font-family: 'MyFontName';
  src: url('../font/MyFontName.eot');
  src: url('../font/MyFontName.eot?#iefix') format('embedded-opentype'),
    url('../font/MyFontName.woff') format('woff'),
    url('../font/MyFontName.svg#PostGrotesk Book') format('svg');
  font-weight: normal;
  font-style: normal;
}

nuxt.config.js でスタイルシートを読み込む設定

  css: [
    { src: '@/assets/css/styles.scss' }
  ],

をすればscssファイルやSFCのscssでフォント指定すると有効になる。

参考： Nuxt.jsで好きなフォントを使う - Qiita

日付をフォーマットする

REST API で渡されるのは 2020-02-18T14:57:36 のような形なので整形する
何かしらプラグイン入れたほうがよいらしいので Day.js を入れてみる
npm i -D dayjs でインストール後

WorksItem.vue（必要箇所のみ）

<template lang="pug">
  p.date {{ item.date | dateFilter }}
</template>

<script>
import dayjs from 'dayjs'
export default {
  // 省略
  filters: {
    dateFilter(value) {
      return dayjs(value).format('YYYY.MM')
    }
  }
}
</script>

とすると 2020.02 で整形して出力される