useAsyncData key collision — interactive simulation

<div class="pg">
    <h1 class="pg-title">🎮 Which key does this call actually get?</h1>
    <p class="pg-sub">
      A <b>model</b> of Nuxt's <code>useAsyncData</code> cache — plain JS simulating the
      same key → cache-entry rule Nuxt uses internally, with a fake network delay standing
      in for a real fetch. Toggle the key mode, fetch both cards, and watch what each one
      actually shows.
    </p>

<div class="banner info">
      Simulated model — reproduces Nuxt's real key/dedupe rules in plain JS. No real Nuxt
      server, no real HTTP request.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Key mode (this is what <code>useProduct(id)</code> passes to <code>useAsyncData</code>)</div>
      <div class="seg" id="keyModeSeg">
        <button type="button" aria-pressed="true" data-mode="auto">No key — auto (file:line)</button>
        <button type="button" aria-pressed="false" data-mode="explicit">Explicit key — product-${id}</button>
      </div>
      <p class="hint" id="keyModeHint"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Dedupe mode (what happens if a key is already in flight)</div>
      <div class="seg" id="dedupeSeg">
        <button type="button" aria-pressed="true" data-mode="cancel">dedupe: 'cancel' (default)</button>
        <button type="button" aria-pressed="false" data-mode="defer">dedupe: 'defer'</button>
      </div>
      <p class="hint" id="dedupeHint"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Two components calling <code>useProduct(id)</code></div>
      <div class="cards">
        <div class="card">
          <h3>Card A</h3>
          <select id="idA">
            <option value="sku-101">sku-101 — Trail Runner Shoes</option>
            <option value="sku-204">sku-204 — Wireless Earbuds</option>
            <option value="sku-309">sku-309 — Ceramic Mug</option>
          </select>
          <div class="btn-row">
            <button class="btn primary sm" data-card="A">Fetch</button>
          </div>
          <div class="result" id="resultA">no data yet</div>
          <div class="keyline" id="keyA"></div>
        </div>
        <div class="card">
          <h3>Card B</h3>
          <select id="idB">
            <option value="sku-204">sku-204 — Wireless Earbuds</option>
            <option value="sku-101">sku-101 — Trail Runner Shoes</option>
            <option value="sku-309">sku-309 — Ceramic Mug</option>
          </select>
          <div class="btn-row">
            <button class="btn primary sm" data-card="B">Fetch</button>
          </div>
          <div class="result" id="resultB">no data yet</div>
          <div class="keyline" id="keyB"></div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn ghost sm" id="resetBtn">Reset cache + log</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Cache (one row per key — exactly what Nuxt keeps internally)</div>
      <table class="cache-table" id="cacheTable">
        <thead><tr><th>key</th><th>status</th><th>data</th></tr></thead>
        <tbody id="cacheBody">
          <tr class="empty-row"><td colspan="3">cache is empty</td></tr>
        </tbody>
      </table>
    </div>

preview

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