今回はNuxt.jsでパンくずリストのUIを作成する方法についてまとめていきたいと思います。パンくずリストは現在ページの場所をリスト形式で表示させるもので、ユーザーへのナビゲーション的な役割と、検索エンジンにページを正しくクロールさせるSEO的な役割を果たします。せっかくなので今回はパンくずリストの仕様をSheme.orgに準拠したものにしてみます。   Nuxt.jsでパンくずリストを作成する方法は色々とありますが、今回はページのインデックスファイルで個別の設定できるようにしてみようと思います。そのためにstateでパンくずリストのデータを保持させるようにします。storeディレクトリのファイル内にstoreの初期値と、mutationsとactions、そしてgettersを定義していきます。 【store/index.js】

export const state = () => ({
 breadcrumbList: []
})

export const mutations = {
 breadcrumbList(state, payload) {
  state.breadcrumbList = payload
 }
}

export const actions = {
 addBreadcrumbList({ commit }, payload) {
  return commit('breadcrumbList', payload)
 }
}

export const getters = {
 breadcrumbList: (state) => state.breadcrumbList
}

  storeのデータ型は配列になるようにしておきます。続けて、パンくずリストの部分を切り出しておき、下記のように独立した単一コンポーネントファイルとして作成します。今回はtemplateのHTMLをPugでコーディングしています。リスト要素の属性には、Sheme.orgに合わせた値が入るようにしておきます。 【components/BreadcrumbList.vue】

<template lang="pug">
 ul
  li(itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem")
   nuxt-link(to="/" itemprop="item")
    span(itemprop="name").
     HOME
    meta(itemprop="position" content="1")
  li(v-for="(page, index) in breadcrumbList" :key="index" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem")
   nuxt-link(:to="page.path" itemprop="item")
    span(itemprop="name").
     {{ page.name }}
    meta(itemprop="position" :content="index + 2")
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 name: 'BreadcrumbList',
 computed: {
  ...mapGetters(['breadcrumbList'])
 }
}
</script>

  ポイントとなるのは、2つ目のリスト項目以降は、stateの値を取得してv-forを使って値を展開していく形になるようにしておきます。そしてscriptではmapGettersでstoreのファイルに定義したgettersを呼び出すことでstateの値を取得できるようにしておきます。呼び出す値には、ページURLのパスとパンくずリスト内で表示させるページタイトルの2つになります。   あとは、各ページのインデックスファイル内で、パンくずリストのコンポーネントを呼び出し、scriptでパンくずリストに使う値をactionsを呼び出してstateの値に入れていくようにします。具体的には下記のようになります。 【pages/example/index.vue】

<template lang="pug">
 div
  // ページコンテンツ
  breadcrumb-list
</template>

<script>
import { mapActions } from 'vuex'
import BreadcrumbList from '~/components/common/BreadcrumbList.vue'
export default {
 components: {
  BreadcrumbList
 },
 computed: {
  currentPage() {
   return [
    {
     path: '/example/',
     name: '下層ページタイトル'
    }
   ]
  }
 },
 created() {
  this.addBreadcrumbList(this.currentPage)
 },
 methods: {
  ...mapActions(['addBreadcrumbList'])
 }
}
</script>

  computedで、パンくずリストで使われるページURLのパスと、ページタイトル文字列をそれぞれのキーで設定したオブジェクト型で用意します。子ページ、孫ページと続く場合には、出力する配列の数をページ階層に合わせて増やしていきます。このcomputedで用意した値をactionsの引数に入れて、createdで実行することでstateの値が更新されるようになります。   そうすることで、入力した値がtemplate側で展開されるようになり、パンくずリストを作成することができます。実際に出力されるHTMLは以下のようになりました。これならページごとに細かく設定できるのでわかりやすいですね。 【HTML】※一部抜粋

<ul>
 <li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
  <a href="/" itemprop="item"><span itemprop="name">HOME</span></a>
  <meta itemprop="position" content="1">
 </li>
 <li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">
  <a href="/example/" itemprop="item"><span itemprop="name">下層ページタイトル</span></a>
  <meta itemprop="position" content="2">
 </li>
</ul>

  パンくずリストは一般的なウェブサイトであれば、しばしば使われるUIですがNuxt.jsで作成したサイトの場合には、ページテンプレートごとに設定できるようにする必要があります。やり方によってはもっと共通化できる方法もあるかと思いますが、Nuxt.jsでウェブサイトを作成する場合にはご参考していただけると幸いです。