Breadcrumbs on nested routes

[ahoiroman]

Hey there,

lets assume I got these nested routes:

├── dashboard.vue
├── index.vue
├── project
│   ├── [project_id]
│   │   ├── index.vue
│   │   ├── team
│   │   │   └── index.vue
│   │   ├── team.vue
│   │   ├── task
│   │   │   ├── [task_id]
│   │   │   │   ├── index.vue
│   │   │   ├── [task_id].vue
│   │   │   └── index.vue
│   │   └── task.vue
│   ├── [project_id].vue
│   └── index.vue
├── project.vue
└── signup.vue

The goal is

• to have a project overview that lists all projects
• to have an overview of tasks and the team on the project overview page

So if I open http://web.example.test/project/01JHJQ0SCSYEZCJRJ2YM0B2NGJ/task, I can see the tasks that belong to the project.

That works nice.

But in the breadcrumbs component, the definePageMeta instructions for those nested pages are not applied.

If I add

definePageMeta({
  name: 'project.index',
 })

to project.vue, all child items of the nested page are getting the translation I defined in project.vue. If I, for example, add

definePageMeta({
  name: 'project.task.index',
})

to /project/task/index.vue, this is being ignored and the breadcrum shows the translation for project.index just twice.