[Bug]: SidebarMenuSkeleton causes hydration error in Nuxt 4

[rem-aster]

Reproduction

not needed, i know the cause and have a potential fix

Describe the bug

SidebarMenuSkeleton uses Math.random() to make random size.

const width = computed(() => {
	return `${Math.floor(Math.random() * 40) + 50}%`
})

This causes hydration error in Nuxt 4 - different numbers are obtained on the client and server.

Here is a possible fix:

const uid = useId()
const width = useState(`skeleton-width-${uid}`, () => `${Math.floor(Math.random() * 40) + 50}%`)

System Info

Not needed

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[ace-of-aces]

Have you tried wrapping the <SidebarSkeleton/> in a <ClientOnly> component?

useId and useState are Nuxt composables, so your possible fix can't be applied in this project as it only requires Vue as a dependency.

[rem-aster]

Have you tried wrapping the <SidebarSkeleton/> in a <ClientOnly> component?

What's the point of a skeleton then? It's needed as a placeholder before loading the data, and it's precisely with SSR that it's needed in some cases

useId and useState are Nuxt composables, so your possible fix can't be applied in this project as it only requires Vue as a dependency.

In this case, this issue should be mentioned in the documentation at least, as with some other components.

[ace-of-aces]

needed in some cases

Could you elaborate with examples?

In this case, this issue should be mentioned in the documentation at least, as with some other components.

You could submit a PR if you feel the need for this

[rem-aster]

needed in some cases

Could you elaborate with examples?

Then you use WebRTC for example

In this case, this issue should be mentioned in the documentation at least, as with some other components.

You could submit a PR if you feel the need for this

👍

[rem-aster]

needed in some cases

Could you elaborate with examples?

Then you use WebRTC for example

In this case, this issue should be mentioned in the documentation at least, as with some other components.

You could submit a PR if you feel the need for this

👍