Nuxt server routes — router & middleware-order playground

<div class="pg">
    <h1 class="pg-title">🎮 How Nitro routes a request</h1>
    <p class="pg-sub">
      Three real ingredients from the article, each in its own tab. The router and the
      middleware-sort panels run the exact rules Nitro uses on a fixed filename list —
      genuinely computed, not faked. The third panel is explicitly a <b>model</b> of the
      error Nuxt throws; it can't run for real in a static page.
    </p>

<div class="panel-label"><span class="n">1</span> Pick what to explore</div>
    <div class="seg" id="tabSeg" style="flex-wrap:wrap;">
      <button type="button" aria-pressed="true" data-val="router">Route matcher</button>
      <button type="button" aria-pressed="false" data-val="middleware">Middleware order</button>
      <button type="button" aria-pressed="false" data-val="usestate">useState in a server route</button>
    </div>

<div class="panel" id="tab-router">
      <div class="panel-label"><span class="n">2</span> Send a request, see which file answers it</div>
      <p class="hint" style="margin-top:0">
        These files exist under <code>server/</code>: <code>api/hello.get.ts</code>,
        <code>api/upload.post.ts</code>, <code>api/users/[id].get.ts</code>,
        <code>api/files/[...slug].ts</code>, <code>routes/robots.txt.ts</code>.
      </p>
      <div class="row" style="gap:10px;">
        <div class="field">
          <span class="ctl-label">Method</span>
          <select class="pg-select" id="reqMethod">
            <option value="GET" selected>GET</option>
            <option value="POST">POST</option>
          </select>
        </div>
        <div class="field grow">
          <span class="ctl-label">Path</span>
          <select class="pg-select" id="reqPath">
            <option value="/api/hello">/api/hello</option>
            <option value="/api/upload">/api/upload</option>
            <option value="/api/users/42">/api/users/42</option>
            <option value="/api/files/docs/2026/report.pdf">/api/files/docs/2026/report.pdf</option>
            <option value="/robots.txt">/robots.txt</option>
            <option value="/api/nope">/api/nope</option>
          </select>
        </div>
        <div class="field">
          <span class="ctl-label">&nbsp;</span>
          <button class="btn primary" id="routeRun">▶️ Route it</button>
        </div>
      </div>
      <div class="output" style="margin-top:10px;">
        <div id="routeResult" class="match-row">Pick a request and click "Route it".</div>
      </div>
    </div>

<div class="panel" id="tab-middleware" style="display:none;">
      <div class="panel-label"><span class="n">2</span> Real files, sorted the way Nitro actually sorts them</div>
      <p class="hint" style="margin-top:0">
        <code>server/middleware/</code> runs in <b>alphabetical string order of the filename</b> —
        not creation order, not numeric order. Toggle zero-padding and watch the same five files
        reorder for real (this is <code>Array.prototype.sort()</code>, live).
      </p>
      <div class="btn-row">
        <button class="btn" id="mwBroken" aria-pressed="true">Un-padded (as written)</button>
        <button class="btn" id="mwFixed" aria-pressed="false">Zero-padded (fixed)</button>
      </div>
      <div class="file-list" id="mwList" style="margin-top:10px;"></div>
      <div class="status" id="mwStatus"><span class="dot info"></span><span>Files execute top to bottom.</span></div>
    </div>

<div class="panel" id="tab-usestate" style="display:none;">
      <div class="panel-label"><span class="n">2</span> What happens when a handler reaches for useState</div>
      <div class="banner info show">Modeled console output — no real Nitro process or Nuxt app instance runs in this page. The message mirrors what Nuxt actually throws.</div>
      <div class="btn-row" style="margin-top:10px;">
        <button class="btn bad" id="useStateBtn">Call useState('user') in server/api/profile.get.ts</button>
        <button class="btn good" id="useUtilBtn">Read event.context.user instead</button>
      </div>
      <div class="output" style="margin-top:10px;">
        <div class="log" id="useStateLog">Pick one of the two handlers above.</div>
      </div>
    </div>

<div class="hint">
      This models file-based routing, string-sort ordering, and the Vue-vs-Nitro boundary from
      the article — not a running Nuxt/Nitro server.
    </div>
  </div>

preview

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

Nuxt server routes — router &amp; middleware-order playground

Nuxt server routes — router & middleware-order playground