Nuxt 4.6 nuxt/server — import-boundary playground

<div class="pg">
    <h1 class="pg-title">🎮 The nuxt/server import boundary</h1>
    <p class="pg-sub">
      Three real rules from Nuxt 4.6's release notes, modeled as plain JS — there's no
      actual Nuxt build or server engine running on this page, so each tab says exactly
      what it's standing in for.
    </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="mix">Mix imports → NUXT_E8012</button>
      <button type="button" aria-pressed="false" data-val="redirect">sendRedirect contract</button>
      <button type="button" aria-pressed="false" data-val="portable">Portable across builders</button>
    </div>

<div class="panel" id="tab-mix">
      <div class="banner info show">Modeled runtime check — no real Nuxt server runs here. This reproduces the exact rule: nuxt/server's session helpers throw NUXT_E8012 when called with an event that didn't come from nuxt/server's own defineEventHandler.</div>
      <div class="panel-label" style="margin-top:12px;"><span class="n">2</span> Hit server/api/profile.get.ts and see what the session helper does</div>
      <p class="hint" style="margin-top:0">Pick where <code>defineEventHandler</code> comes from, and whether the handler calls <code>useSession</code> from <code>nuxt/server</code>, then "hit" the route. <code>getRouterParam</code> never throws <code>NUXT_E8012</code> either way — it isn't part of this check, and it behaves identically from either import source.</p>
      <div class="row" style="gap:10px; flex-wrap: wrap;">
        <div class="field">
          <span class="ctl-label">defineEventHandler from</span>
          <select class="pg-select" id="srcHandler">
            <option value="auto" selected>auto-import (h3)</option>
            <option value="nuxtserver">nuxt/server (explicit)</option>
          </select>
        </div>
        <div class="field">
          <span class="ctl-label">Call useSession() from nuxt/server?</span>
          <select class="pg-select" id="srcParam">
            <option value="auto" selected>No — handler doesn't touch sessions</option>
            <option value="nuxtserver">Yes — reads the session</option>
          </select>
        </div>
        <div class="field">
          <span class="ctl-label">&nbsp;</span>
          <button class="btn primary" id="mixRun">▶️ Hit GET /api/profile.get</button>
        </div>
      </div>
      <div class="output" style="margin-top:10px;">
        <div class="log" id="mixLog">Pick a defineEventHandler source and whether useSession is called, then hit the route.</div>
      </div>
    </div>

<div class="panel" id="tab-redirect" style="display:none;">
      <div class="banner info show">Modeled handler output — no real HTTP response is sent. The behavior shown is what the release notes document for each source.</div>
      <div class="panel-label" style="margin-top:12px;"><span class="n">2</span> Call sendRedirect from each source, without a return</div>
      <div class="btn-row">
        <button class="btn" id="redirectAuto" aria-pressed="true">h3 auto-import</button>
        <button class="btn" id="redirectNuxtServer" aria-pressed="false">nuxt/server (explicit)</button>
      </div>
      <p class="hint">Both handlers call <code>sendRedirect(event, '/login')</code> and then simply end, without a <code>return</code> — see what each one still manages to send.</p>
      <div class="output" style="margin-top:10px;">
        <div class="log" id="redirectLog">Pick a source above.</div>
      </div>
    </div>

<div class="panel" id="tab-portable" style="display:none;">
      <div class="panel-label"><span class="n">2</span> Which handler survives a server-builder swap?</div>
      <p class="hint" style="margin-top:0">
        Pick a server builder, then see which of the two handler styles from the article
        keeps working unchanged. This models the release notes' forward-compat claim —
        it isn't an actual multi-engine build.
      </p>
      <div class="field" style="max-width:260px;">
        <span class="ctl-label">Server builder</span>
        <select class="pg-select" id="builderSelect">
          <option value="nitro2" selected>Nitro v2 (Nuxt 4.6 today)</option>
          <option value="vite">@nuxt/vite-server (experimental)</option>
          <option value="nitro3">Nitro v3 + h3 v2 (Nuxt 5, future)</option>
        </select>
      </div>
      <div class="builder-grid" id="builderGrid"></div>
    </div>

<div class="hint">
      This models the session-helper boundary that throws NUXT_E8012, the createError contract
      difference and what sendRedirect actually sends without a return, and the forward-compat
      claim from the Nuxt 4.6 release notes — not a running Nuxt/Nitro process.
    </div>
  </div>

preview

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