fix(topstrip): wrap breadcrumb-current in ClientOnly
The breadcrumb's trailing span pulls its label from pageBreadcrumbTitle, which pages set in script setup after a useFetch. SSR rendered the URL slug there; client rendered the title; Vue logged a hydration text mismatch on every detail page. Wrap the last segment's span in ClientOnly with an nbsp fallback so the SSR DOM stays the same shape but defers the text to the client. The prior attempt at this in layouts/default.vue + layouts/admin.vue was reverted on this branch — it changed segment counts and produced a worse node-structure mismatch.
This commit is contained in:
parent
397c00125a
commit
2a66b0eb8a
1 changed files with 6 additions and 1 deletions
|
|
@ -12,7 +12,12 @@
|
|||
class="breadcrumb-link"
|
||||
>{{ crumb.label }}</NuxtLink
|
||||
>
|
||||
<span v-else class="breadcrumb-current">{{ crumb.label }}</span>
|
||||
<ClientOnly v-else>
|
||||
<span class="breadcrumb-current">{{ crumb.label }}</span>
|
||||
<template #fallback>
|
||||
<span class="breadcrumb-current"> </span>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</span>
|
||||
</slot>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue