Breadcrumbs with dynamic name

[ahoiroman]

Hello there.

Let's assume I got a nested route like

/shop/item/[:id]/preview

Using the breadcrumbs composable, I am getting this result:

shop > item > 123 > preview

But now there's the thing: I want to replace the ID of the item with the name, which comes async from the database.

I read the docs but I still don't know how I'd do that. Any help is highly appreciated :-)

[harlan-zw]

Hey, so for this you would use the overrides option, it's a bit cumbersome but it should do the trick.

const { data } = useAsyncData(() => {})
useBreadcrumbItems({
  overrides: [
    null, // shop
    null, // item
    { label: data.value?.title }
  ]
})

You can read more about that here https://nuxtseo.com/docs/seo-utils/api/breadcrumbs#overrides

[thorge]

To add route parameters dynamically, the updates in PR #331 should cover it.

You can then simply do:

const overrides = computed(() => {
  const items = [
    {
      label: "Home",
      to: "/",
    },
  ];

  if (route.name.startsWith("users-") && route.params.id) {
    items.push(undefined);

    items.push({
      label: `${route.params.id}`,
      to: `/users/${route.params.id}`,
    });
  }
  return items;
});

const breadcrumbItems = useBreadcrumbItems({
  overrides: overrides,
});

@harlan-zw, do you know when RC24, including these changes, is expected to be released?

[ahoiroman]

Is this still the way to go? Feels not right though...