◆当ページにはプロモーションが含まれています

JavaScript

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

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

私はよく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つです。

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

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

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

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です