Vuetify のパンくずコンポーネントを Nuxt.js に対応させるには？

honda 2024年10月4日

みなさん、こんにちは。どんぶラッコです。

私はよくNuxt.js + Vuetify の構成でサイトを構築しています。

Vuetifyといえば、2019年7月に2.0がリリースされて話題になりましたね！

https://proglearn.com/2019/08/15/vuetify%e3%81%8c2-0%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%9f%e3%82%88%ef%bc%81-%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9%e3%81%8c%e3%81%a8%e3%81%a6%e3%82%82/

その中に、パンくずリストを作成できるコンポーネントがあります。

こんな感じの綺麗なパンくずリストが作成できちゃいます！

とても便利なのですが、一つ問題点が。

デフォルトの設定のままではリンクが a タグのままであり、Nuxt.jsを使っている時の nuxt-link が適用されません。

なので、Nuxt.jsを使っている恩恵に預かれません。

その時は、 Slotを用いてちょこっと設定をしてあげる必要があります。

今回はその書き方をご紹介します！

サンプルデータ

<template>
  <v-breadcrumbs :items="itemsData">
    <template v-slot:item="props">
      <v-breadcrumbs-item
        exact
        :disabled="props.item.disabled"
        :to="props.item.href"
        nuxt
      >
        {{ props.item.text }}
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

v-breadcrumbsコンポーネントの内部でslotを定義します。

結構簡単ですね！

ポイントは3つです。