JavaScript

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

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

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

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

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

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

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

デフォルトの設定のままではリンクが 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つです。

  • slotの機能を使って v-breadcrunbs-item にデータを渡すようにします。
  • リンクを to プロパティと nuxt プロパティを設定します。
  • exact プロパティを追加します。

特にexactプロパティを追加しないと disabledプロパティが常に true となり、リンクが張れなくなってしまいます。

これでヌルサクなパンくずリストをNuxt.jsで実現できます!

是非みなさんも試してみてください♪