【Vue.js Nuxt.js】東京都が作った新型コロナウィルス対策サイトのnuxt.config.jsを眺めてみよう【コードのお勉強】

  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    },
    titleTemplate: '%s | 東京都 新型コロナウイルス対策サイト',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: '当サイトは新型コロナウイルス感染症（COVID-19）に関する最新情報を提供するために、東京都が開設したものです。'
      },
      {
        hid: 'og:site_name',
        property: 'og:site_name',
        content: '東京都 新型コロナウイルス対策サイト'
      },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      {
        hid: 'og:url',
        property: 'og:url',
        content: 'https://stopcovid19.metro.tokyo.lg.jp'
      },
      {
        hid: 'og:title',
        property: 'og:title',
        content: '東京都 新型コロナウイルス対策サイト'
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: '当サイトは新型コロナウイルス感染症（COVID-19）に関する最新情報を提供するために、東京都が開設したものです。'
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: 'https://stopcovid19.metro.tokyo.lg.jp/ogp.png'
      }
    ],
  },

  plugins: [
    {
      src: '@/plugins/vue-chart.js',
      ssr: true
    },
    '@/plugins/datetime-formatter.js'
  ],

import Vue from 'vue'
import { Doughnut, Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

Vue.component('doughnut-chart', {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
})

Vue.component('bar', {
  extends: Bar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
})

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

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

<template>
  <div class="Flow">
    <div class="Flow-Heading">
      <CovidIcon />
      <h2 class="Flow-Heading-Title">新型コロナウイルス感染症が心配なときに</h2>
    </div>
    <div class="Flow-Card">
      <h2>
        新型コロナウイルス感染症にかかる相談窓口について
      </h2>
      <div class="Flow-Card-Images only-pc">
        <DesktopFlowSvg />
      </div>
      <div class="only-sp">
        <div class="Flow-Card-Parts">
          <div class="mb-5">
            <img src="/flow/sp/sp_flow_01_01@2x.png" alt="発症前２週間以内の出来ごとと症状／「新型コロナウイルス感染者」と濃厚接触をした方／発熱または呼吸器症状" />
          </div>
          <div class="mx-2 mb-5">
            <img src="/flow/sp/sp_flow_01_02@2x.png" alt="流行地域への渡航・居住歴がある方　ご本人か濃厚接触をした方／呼吸器症状かつ発熱37.5℃以上" />
          </div>
...(後略)