Do I have to use client-only?

[aonghas]

I notice in the example you use <client-only>. Is there any way this works with SSR? When I try to I get a hydration mismatch...

[samk-dev]

Hey @aonghas

unfortunately since Vue 3.4^ there's no way other than wrapping the component in ClientOnly with some loading state while it's hydrating.

<script setup lang="ts">
const date = ref(new Date())

const attrs = ref([
  {
    key: 'today',
    highlight: {
      color: 'green',
      fillMode: 'solid'
    },
    dates: new Date()
  }
])
</script>

<template>
  <div>
    <h1>Universal Render</h1>

    <h2>Calendar</h2>
    <ClientOnly>
      <VCalendar v-model="date" />

      <template #fallback> loading... </template>
    </ClientOnly>

    <h2>Date Picker</h2>
    <ClientOnly>
      <VDatePicker v-model="date" :attributes="attrs" />

      <template #fallback> loading... </template>
    </ClientOnly>
  </div>
</template>

it's an issue from vcalendar itself as it uses vue-screen-utils package and it doesn't work in ssr.

If you're using the DatePicker component with Popper like in this example where the component is hidden initially I guess it won't be an issue.

I have looked for alternatives and in terms of features the only one that comes close is radix-vue calendar component but it is still in alpha.

Another solutions that looked appealing at first glance but one the bundle size is huge and the other is still in beta

• Schedule-X calendar also needs to be wrapped in ClientOnly
• qcalendar it's from Quasar

[aonghas]

Fair, thanks for replying! Didn't know about client-only fallback so that's handy. I'll keep an eye on radix Vue in the meantime!