Unable to Dynamically Generate Dynamic Breadcrumbs

[thorge]

I am trying to create breadcrumbs that dynamically reflect route parameters in Nuxt, specifically for routes with dynamic segments. For example, when editing a user at the route /users/:userId/edit, the breadcrumbs should look like this: Users > :userId > Edit.

I understand that I can use overrides with useBreadcrumbItems() to manually define the breadcrumb structure, but the challenge arises when different routes require different overrides. Since useBreadcrumbItems() can only be used at the top level of the setup function, I am unable to recreate or modify the breadcrumb items based on route changes. This results in errors when trying to update the breadcrumbs dynamically as the route changes.

Is there a recommended way to handle this scenario where breadcrumbs need to be updated dynamically based on route parameters?

[FlorientPlouvin]

Same problem here, I need to change label of items depending query parameters in my url. I tried to use computed but nothing change

[thorge]

In order to enable computed values for overrides, a simple enhancement can be made by utilizing toValue. Specifically, this line of code:

nuxt-seo/src/runtime/nuxt/composables/useBreadcrumbItems.ts

Line 130 in 46f43b2

const overrides = options.overrides || []

Could be adjusted as follows:

const overrides = toValue(options.overrides || []);

This will ensure that both static and reactive values are properly handled within the overrides option.

If you'd like, I can set up a PR to implement these changes.