Nuxt 4 Singleton Data Fetching Layer — interactive model

<div class="pg">
    <h1 class="pg-title">🎮 Watch two components fight over one Nuxt 4 data key</h1>
    <p class="pg-sub">
      This is a <b>model</b> of Nuxt 4's Singleton Data Fetching Layer — plain JS simulating
      two components that both call <code>useAsyncData('product-101', …)</code>, not a real
      Nuxt app. Toggle whether their options match, then fetch, and watch what each card ends
      up showing.
    </p>

<div class="banner info">
      Simulated model — walks the same rule the article describes (matching vs. mismatched
      <code>transform</code> options on a shared key), in plain JS. No real Nuxt server, no real
      HTTP request.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <div class="seg" id="optionSeg" role="group" aria-label="Options mode">
          <button class="btn sm" data-val="match" aria-pressed="true">Matching options</button>
          <button class="btn sm" data-val="mismatch" aria-pressed="false">Mismatched options</button>
        </div>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn primary" id="fetchBtn">Fetch product-101</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <p class="hint" style="margin-top:8px">
        Both cards call <code>useAsyncData('product-101', …, { transform })</code> with the
        <b>same key</b>. Card A's transform upper-cases the name; Card B's just returns the
        plain name. In Nuxt 4, a shared key means a shared <code>data</code> ref — so the two
        <code>transform</code> options must agree.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="cards">
        <div class="card">
          <h3>Card A — <code>transform: p =&gt; p.name.toUpperCase()</code></h3>
          <div class="box" id="cardA">—</div>
        </div>
        <div class="card">
          <h3>Card B — <code>transform: p =&gt; p.name</code></h3>
          <div class="box" id="cardB">—</div>
        </div>
      </div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a mode, then fetch.</span>
      </div>
      <p class="hint" id="explainText">
        Matching options: both cards render the same shared data, consistently. Mismatched
        options: only one transform "wins" for the shared ref — and which one wins depends on
        render order, not on which card you're looking at.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Bonus: the <code>null</code> → <code>undefined</code> default</div>
      <div class="btn-row">
        <div class="seg" id="versionSeg" role="group" aria-label="Nuxt version">
          <button class="btn sm" data-val="v3" aria-pressed="true">Nuxt 3 (empty = null)</button>
          <button class="btn sm" data-val="v4" aria-pressed="false">Nuxt 4 (empty = undefined)</button>
        </div>
      </div>
      <p class="hint" style="margin-top:8px">
        Code everywhere checks <code>if (user.value === null) showGuestBanner()</code>. Before
        the fetch resolves, is that check still true?
      </p>
      <div class="btn-row" style="margin-top:6px">
        <button class="btn primary sm" id="userFetchBtn">Fetch current user (2s)</button>
        <button class="btn ghost sm" id="userResetBtn">Reset</button>
      </div>
      <div class="status" id="userStatus" style="margin-top:10px">
        <span class="dot info" id="userDot"></span><span id="userStatusText"><code>user.value</code> is <b>null</b> — guest banner check passes.</span>
      </div>
      <div class="banner-box shown" id="guestBanner">👋 Showing guest banner</div>
    </div>
  </div>

preview

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