Vue/Nuxt Hydration Error

Author: codeofsumitCreated Jan 14, 2025Updated Jun 5, 2026

Labelsbugpackage: @scalar/api-referencessr

What happens?

With the super basic vue example used in a nuxt3 project, there is an hydration error on page load:

xml

<script setup lang="ts">
import { ApiReference } from '@scalar/api-reference';
import apiSpec from '@/api-specification/asset-api.json';
import '@scalar/api-reference/style.css';
</script>

<template>
  <div>
    <div class="flex items-center mt-8 pb-16 text-gray-600 crumbs">
      <nuxt-link class="capitalize" to="/">Home</nuxt-link>
      <nuxt-link class="capitalize" to="/docs">Docs</nuxt-link>
      <nuxt-link class="capitalize">API</nuxt-link>
    </div>
    <main class="p-0">
      <ApiReference :configuration="{ spec: { content: apiSpec } }" />
    </main>
  </div>
</template>

I'm aware there is a nuxt module for scalar but that has different issues and currently does not work due to this issue. The Vue version works.

What did you expect to happen?

No hydration errors.

OpenAPI Document

No response

Source: scalar/scalar

View original on GitHub View discussion on GitHub