WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Hydration mismatch when using with Nuxt and SSR #1210

@anja-q42

Description

@anja-q42

Describe the bug
When using @vuepic/vue-datepicker v12.0.5 with Nuxt 4.2.1 error for mismatch is thrown in the console:
"Hydration completed but contains mismatches."

Image

To Reproduce
Steps to reproduce the behavior:

  1. Implement default date picker in Nuxt app
<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script setup>
  import { ref } from 'vue';
  import { VueDatePicker } from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css'

  const date = ref();
</script>
  1. Error about mismatch is thrown

Expected behavior
There should be no mismatch errors when using date picker with SSR

Screenshots

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting triageThe issue is not reviewed by the maintainersbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions