Nuxt hydration mismatch — interactive simulation

<div class="pg">
    <h1 class="pg-title">🎮 Simulate a Nuxt hydration mismatch</h1>
    <p class="pg-sub">
      This is a <b>model</b> of Nuxt's server render → hydration sequence — plain JS
      simulating what Nitro and Vue do, not a real Nuxt app. Pick how the template
      gets its value, then "load the page" and watch whether the client's hydration
      agrees with the server's HTML.
    </p>

<div class="banner info">
      Simulated model — walks the same server-render-then-hydrate sequence a real Nuxt app runs, in plain JS. No real Nitro server, no real Vue runtime.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> How does the template get its value?</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Scenario</span>
          <div class="seg" id="scenarioSeg" style="flex-wrap:wrap;">
            <button type="button" aria-pressed="true" data-val="random">Math.random() in setup (buggy)</button>
            <button type="button" aria-pressed="false" data-val="onmounted">onMounted() default (fixed)</button>
            <button type="button" aria-pressed="false" data-val="clientif">v-if="import.meta.client" (buggy)</button>
            <button type="button" aria-pressed="false" data-val="clientonly">&lt;ClientOnly&gt; (fixed)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Load the page</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Server render vs. client hydration</div>
      <div class="stage">
        <div class="stage-box">
          <h3>Server (Nitro / Node) renders first</h3>
          <div class="render-box" id="serverBox">—</div>
        </div>
        <div class="stage-box">
          <h3>Client hydrates the same component</h3>
          <div class="render-box" id="clientBox">—</div>
        </div>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText" class="verdict-line">Ready — pick a scenario and load the page.</span>
      </div>

<div class="panel-label" style="margin-top:14px"><span class="n">3</span> Console + play-by-play</div>
      <div class="log" id="log"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.