Nuxt.jsで効率的にhead()の内容を設定する方法

Question

現在、nuxt.jsで静的ウェブサイト構築をしております。
jsonファイルに、各ページのタイトル、description情報を一括管理をしたいと思っております。

ファイル構成：
assets/json/meta.json (jsonファイル)
store/index.js（ストアでjsonファイルをインポート）
pages/index.vue（ページスラッグをストアのmutationに登録したfunctionに送り、jsonのページ情報を取得し、head()に登録）

問題：
ページ数は30～40ページくらいになり、もし変更があったら全ページ変更しなければいけない可能性がある。
index.vueの、
0. created()
0. methods
0. head()

の記述がちょっとボリュームがあるので、
一つのファイルで一元管理したい。

---

assets/json/meta.json

{
    "home": {
        "title": "HOME",
        "description": "This is home description."
    },
    "about": {
        "title": "ABOUT",
        "description": "This is about description."
    },
    "about/company": {
        "title": "COMPANY",
        "description": "This is company description."
    }
}

---

store/index.js

// Import Json
import metaJson from "~/assets/json/meta.json"

// State
export const state = () => ({
  meta: metaJson
})
// Mutations
export const mutations = {
  fetchMeta(state, pageSlug) {
    state.pageMeta = state.meta[pageSlug]
  }
}

// Getters
export const getters = {
  getAll(state) {
    return state.meta
  }
}

---

pages/index.vue

<template lang="pug">
    div
        p Home
</template>

<script>
export default {
  data() {
    return {
      name: "home"
    }
  },

  created() {
    this.fetchMeta(this.name)
  },
  methods: {
    fetchMeta(pageName) {
      this.$store.commit("fetchMeta", pageName)
    }
  },
  head() {
    return {
      title: this.$store.state.pageMeta.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.$store.state.pageMeta.description
        },
        {
          hid: "og:title",
          name: "og:title",
          content: this.$store.state.pageMeta.title
        },
        {
          hid: "og:decription",
          name: "og:decription",
          content: this.$store.state.pageMeta.description
        }
      ]
    }
  }
}
</script>

Answer 1

個人差が出るので他の方の回答も見てみたいところですが、私の場合はmixinとルートパスで管理する方法を取ります。一度設定してしまえばmetaを設定するだけで完結できますし、layoutにmixinを設定することでページに毎回設定する手間を省けます。
ファイル名や関数名などは仮のものとして見てください。

/config/meta.js

export default [
  {
    route: '/',
    title: 'title',
    description: 'description'
  }
]

/mixins/meta.js

import metaConfig from '~/config/meta'

export default {
  head() {
    const metaData = metaConfig.find(el => el.route === this.$route.path)
    return {
      title: metaData.title
    }
  }
}

/layout/default.vue

<script>
import metaMixin from '~/mixins/meta'
export default {
  mixins: [metaMixin]
}
</script>

Comments

[balls]

pages以下の各vueファイルに何の記述も必要なく、config/meta.jsで登録された内容が、ディレクトリ情報を取得、照合して、SSRでしっかりと書き出されました。ベストアンサー以外の何物でもありません。神です。ありがとうございます。