How to use ClientRouter?

[shinebayar-g]

I've created a head component based on the built in Head.astro component like this

// src/components/Head.astro
---
import type { Props } from "@astrojs/starlight/props";
import StarlightHead from "@astrojs/starlight/components/Head.astro";
import { ClientRouter } from "astro:transitions";
---

<StarlightHead {...Astro.props}>
    <slot />
    <ClientRouter />
</StarlightHead>

However, client side router is not enabled. How can I enable client router for starlight?

[HiDeoo]

👋 The default Head component implementation loops through props to render the various tags but does not render any child elements that are passed in through its default slot.

Changing the code of your component override to the following should work:

<StarlightHead {...Astro.props}><slot /></StarlightHead>
<ClientRouter />

[delucis]

I’ll also note that this may cause conflicts with some of Starlight’s scripts. This “Add View Transitions to Starlight” guide may also be helpful.

[shinebayar-g]

Thanks all.

<StarlightHead {...Astro.props}><slot /></StarlightHead>
<ClientRouter />

Seems to be working. I see it started using client side router as soon as it's added.

Thanks for the link @delucis . I confirm that using astro-vtbot package also working.

---
import type { Props } from "@astrojs/starlight/props";
import StarlightHead from "@astrojs/starlight/components/Head.astro";
import VtbotStarlight from "astro-vtbot/components/starlight/Base.astro";
---

<VtbotStarlight {...Astro.props}>
    <StarlightHead {...Astro.props}><slot /></StarlightHead>
</VtbotStarlight>

I'm not sure which one should be used at this point. I'd like to use built-in methods if possible, but at the same time don't know the ramifications if any. It seems “Add View Transitions to Starlight” exist for a reason. I'm not sure if that reason is resolved in recent versions. Starlight maintainers, please let us know which one should be used for official client side router. Thanks all. 🙌

[delucis]

I think you might need the astro-vtbot package. Without it, you would need to confirm that things like search and the mobile menu still work after navigation. Last time I tried, I think some of these could break after navigating between pages with Astro’s client router enabled.