🧭 【Vue × Vuetify】パンくずリストの作り方（Vuetify 2 と 3 の違い）

はじめに

Vue + Vuetify でパンくずリスト（Breadcrumbs）を作成した際の実装例を、Vuetify 2 → 3 にバージョンアップした観点から比較しながらまとめました。
Vuetify 2 を使用していたプロジェクトを Vuetify 3 に移行する中で、パンくずリストに関する書き方が変わったため備忘録も兼ねています。

---

✅ 前提環境

• Nuxt 3（Vue 3 ベース）
• Vuetify 3（例：v3.3.23）
• TypeScript（任意）

---

✅ Vuetify 2 のパンくずリストの書き方

<template>
  <v-breadcrumbs :items="breadcrumbs">
    <template v-slot:divider>
      <v-icon>mdi-chevron-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        { text: 'Home', disabled: false, href: '/' },
        { text: 'Category', disabled: false, href: '/category' },
        { text: 'Detail', disabled: true },
      ],
    };
  },
};
</script>

text、disabled、href というプロパティ名が使われていました。
Divider は v-slot:divider で差し替え可能です。

✅ Vuetify 3 のパンくずリストの書き方

Vuetify 3 では、パンくずリストの構造が変更されており、プロパティ名も title に変わっています。

<template>
  <v-breadcrumbs :items="breadcrumbs">
    <template v-slot:divider>
      <v-icon icon="mdi-chevron-right"></v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script setup lang="ts">
const breadcrumbs = [
  { title: 'Home', disabled: false, href: '/' },
  { title: 'Category', disabled: false, href: '/category' },
  { title: 'Detail', disabled: true },
];
</script>

Vuetify 3 では text → title に変更された点に注意。
<v-icon> も Vuetify 3 に合わせた書き方に。
<script setup> を使うとスッキリ書けます。

❗ よくあるエラー・ハマりポイント

❌ Vuetify 3 で text を使ってしまう

// Vuetify 3 では非対応
const breadcrumbs = [
  { text: 'Home', href: '/' },
];

これだとパンくずが表示されません。

✅ title に修正する必要あり

const breadcrumbs = [
  { title: 'Home', href: '/' },
];

✅ ルート情報から動的に生成する例（Nuxt 3）

import { useRoute } from 'vue-router';

const route = useRoute();

const breadcrumbs = computed(() => {
  const pathArray = route.path.split('/').filter(Boolean);

  return [
    { title: 'Home', href: '/' },
    ...pathArray.map((p, i) => ({
      title: decodeURIComponent(p),
      href: '/' + pathArray.slice(0, i + 1).join('/'),
    })),
  ];
});

✅ まとめ

項目	Vuetify 2	Vuetify 3
ラベル名	text	title
API スタイル	Options API	Composition API（推奨）
<v-icon> の書き方	中身に直接アイコン名	icon 属性で指定
Divider のカスタム	v-slot:divider	同じく使用可能

📝 おわりに

Vuetify のバージョンによって仕様が変わるため、公式ドキュメントで確認しながら開発を進めることが重要です。
text から title への変更など、些細な部分でも UI に影響が出るので注意しましょう。