harlan-zw / nuxt-seo

The complete SEO solution for Nuxt.
https://nuxtseo.com
MIT License
1.08k stars 70 forks source link

Unable to Dynamically Generate Dynamic Breadcrumbs #327

Closed thorge closed 3 weeks ago

thorge commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

https://github.com/harlan-zw/nuxt-seo/blob/46f43b2071bb264b913d68a440073727d22af386/src/runtime/nuxt/composables/useBreadcrumbItems.ts#L130

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.