@@ -101,18 +101,43 @@ const HOSTNAME_RE = /^(?!-)[\d.:a-z-]{1,253}(?<!-)$/i
  * Check `hostname` is a plausible host or IP address, falling back to a
  * bindable default (with a warning) when it is not.
  */
-export function validateHostname(hostname: string | undefined, isPublic?: boolean): string | undefined {
+export function validateHostname(hostname: string | undefined, isPublic?: boolean, options: { silent?: boolean } = {}): string | undefined {
   const isValid = !!hostname
     && HOSTNAME_RE.test(hostname)
     && hostname.split('.').every(label => label.length <= 63)
   if (!hostname || isValid) {
     return hostname
   }
   const fallback = isPublic ? '' : 'localhost'
-  logger.warn(`Invalid host \`${hostname}\`, using \`${fallback || '0.0.0.0'}\` instead.`)
+  if (!options.silent) {
+    logger.warn(`Invalid host \`${hostname}\`, using \`${fallback || '0.0.0.0'}\` instead.`)
+  }
   return fallback
 }
 
+/** Hostname `bindListener` will bind for `options`. */
+function resolveBindHostname(options: ListenOptions, silent = false): string {
+  const isolated = options.hostname === undefined && !options.public && detectIsolatedEnvironment()
+  return validateHostname(options.hostname, options.public, { silent }) ?? (options.public || isolated ? '' : 'localhost')
+}
+
+/**
+ * Whether an already bound server can serve `options`, so a listener bound
+ * before the Nuxt config was known can be kept rather than rebound.
+ */
+export function matchesBoundTarget(bound: BoundServer, options: ListenOptions): boolean {
+  if (resolveBindHostname(options, true) !== bound.hostname) {
+    return false
+  }
+  if (!!options.https !== !!bound.https) {
+    return false
+  }
+  // Parsed leniently: an unusable port cannot match, and reporting that is
+  // `bindListener`'s job rather than this comparison's.
+  const port = options.port === undefined || options.port === '' ? undefined : Number(options.port)
+  return port === undefined || port === bound.address.port || port === bound.requestedPort
+}
+
 /**
  * External IPv4 addresses other devices can reach. IPv4 link-local addresses
  * (169.254.0.0/16, from a macOS Thunderbolt Bridge or an unconfigured adapter)
@@ -152,9 +177,22 @@ function createSecureServer(certificate: ResolvedCertificate, handler: RequestLi
   }
 }
 
-export async function listen(handler: RequestListener, options: ListenOptions = {}): Promise<Listener> {
-  const isolatedEnvironment = options.hostname === undefined && !options.public && detectIsolatedEnvironment()
-  const hostname = validateHostname(options.hostname, options.public) ?? (options.public || isolatedEnvironment ? '' : 'localhost')
+/** A bound socket, before any URL resolution, tunnel or console output. */
+export interface BoundServer {
+  server: HttpServer
+  address: AddressInfo
+  https: false | ResolvedCertificate
+  hostname: string
+  /** Port that was asked for, before any in-use fallback. */
+  requestedPort?: number
+}
+
+/**
+ * Bind a socket and nothing else, so the port can be taken before the Nuxt
+ * config is known and requests can be answered while it loads.
+ */
+export async function bindListener(handler: RequestListener, options: ListenOptions = {}): Promise<BoundServer> {
+  const hostname = resolveBindHostname(options)
 
   const requestedPort = parsePort(options.port)
   const port = options.handover && requestedPort
@@ -178,31 +216,37 @@ export async function listen(handler: RequestListener, options: ListenOptions =
   // takes the whole dev process down.
   server.on('error', error => logger.error(`Dev server error: ${error.message}`))
 
-  // Set inside `createListener`, so a failure after the tunnel is up can still
-  // tear down the cloudflared process rather than leaking it until exit.
+  return { server, address: server.address() as AddressInfo, https: certificate, hostname, requestedPort }
+}
+
+/**
+ * Resolve the URLs of an already bound server and, unless `announce` is false,
+ * start any tunnel and print, copy and open the URLs.
+ */
+export async function createListener(bound: BoundServer, options: ListenOptions = {}, { announce = true }: { announce?: boolean } = {}): Promise<Listener> {
+  const { server, address, hostname, https: certificate } = bound
+
+  // Set before anything that can throw, so a failure after the tunnel is up can
+  // still tear down the cloudflared process rather than leaking it until exit.
   let tunnel: Tunnel | undefined
 
   try {
-    return await createListener()
+    return await resolveListener()
   }
   catch (error) {
-    await Promise.all([
-      tunnel?.close().catch(() => {}),
-      closeServer(server).catch(() => {}),
-    ])
+    await tunnel?.close().catch(() => {})
     throw error
   }
 
-  async function createListener(): Promise<Listener> {
-    const address = server.address() as AddressInfo
+  async function resolveListener(): Promise<Listener> {
     const protocol = certificate ? 'https' : 'http'
     const baseURL = options.baseURL || '/'
     const formatURL = (host: string) => formatDisplayURL(protocol, host, address.port, baseURL)
 
     const anyHost = ANY_HOSTS.has(hostname)
     const url = formatURL(anyHost ? 'localhost' : hostname)
 
-    if (options.tunnel) {
+    if (announce && options.tunnel) {
       const { startTunnel } = await import('./tunnel')
       tunnel = await startTunnel(`${protocol}://localhost:${address.port}`, !!certificate)
     }
@@ -271,19 +315,21 @@ export async function listen(handler: RequestListener, options: ListenOptions =
       console.log(`${qr ? '' : '\n'}${lines.join('\n')}\n`)
     }
 
-    if (options.showURL !== false) {
-      if (qrURL) {
-        await printQRCode(qrURL)
+    if (announce) {
+      if (options.showURL !== false) {
+        if (qrURL) {
+          await printQRCode(qrURL)
+        }
+        showURLs({ qr: !!qrURL })
       }
-      showURLs({ qr: !!qrURL })
-    }
 
-    if (options.clipboard) {
-      await copyURL(publicURL || url)
-    }
+      if (options.clipboard) {
+        await copyURL(publicURL || url)
+      }
 
-    if (options.open) {
-      openBrowser(options.openURL ? resolveOpenURL(options.openURL, url) : url)
+      if (options.open) {
+        openBrowser(options.openURL ? resolveOpenURL(options.openURL, url) : url)
+      }
     }
 
     return {
@@ -303,6 +349,18 @@ export async function listen(handler: RequestListener, options: ListenOptions =
   }
 }
 
+/** Bind and announce in one step, for callers that already know their config. */
+export async function listen(handler: RequestListener, options: ListenOptions = {}): Promise<Listener> {
+  const bound = await bindListener(handler, options)
+  try {
+    return await createListener(bound, options)
+  }
+  catch (error) {
+    await closeServer(bound.server).catch(() => {})
+    throw error
+  }
+}
+
 function closeServer(server: HttpServer): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     let forceClose: NodeJS.Timeout | undefined
@@ -494,7 +552,7 @@ function centerBlock(block: string, blockWidth?: number): string {
   return lines.map(line => indent + line).join('\n')
 }
 
-function resolveOpenURL(target: string, baseURL: string): string {
+export function resolveOpenURL(target: string, baseURL: string): string {
   try {
     return new URL(target, baseURL).href
   }
 
@@ -6,7 +6,7 @@ import type { Server as HttpServer, IncomingMessage, RequestListener, ServerResp
 
 import type { ResolvedCertificate } from './cert'
 import type { InspectOptions } from './inspect'
-import type { DevListenOverrides, Listener, ListenOptions } from './listen'
+import type { BoundServer, DevListenOverrides, Listener, ListenOptions } from './listen'
 import type { DevRestartReason } from './reason'
 import { Buffer } from 'node:buffer'
 import { hash } from 'node:crypto'
@@ -24,14 +24,15 @@ import { toNodeHandler } from 'srvx/node'
 import { provider } from 'std-env'
 
 import { showBanner } from '../utils/banner'
+import { loadDevServerHint, saveDevServerHint } from '../utils/dev-hint'
 import { ActionableError } from '../utils/errors'
 import { clearBuildDir } from '../utils/fs'
 import { loadKit } from '../utils/kit'
 import { acquireLock, formatLockError, getTakeoverPid, updateLock } from '../utils/lockfile'
 import { debug, logger, writeNotice } from '../utils/logger'
 import { loadNuxtManifest, resolveNuxtManifest, writeNuxtManifest } from '../utils/nuxt'
 import { renderError, renderErrorAnsi } from './error-lazy'
-import { listen } from './listen'
+import { bindListener, createListener, matchesBoundTarget, openBrowser, resolveOpenURL } from './listen'
 import { resolveDefaultLoadingTemplate } from './loading-template'
 import { resolvePortlessURLs } from './portless'
 import { formatChangedKeys, formatRestartReason, formatSkippedReload, mergeRestartReasons, withConfigKeys } from './reason'
@@ -279,6 +280,8 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
   #pendingReason?: DevRestartReason
   #rawConfig?: Record<string, unknown>
   #changedConfigKeys?: string[]
+  #bound?: BoundServer
+  #openedEagerly = false
 
   loadDebounced: () => void
   handler: RequestListener
@@ -374,9 +377,11 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
     this.#handler = undefined
     this.emit('loading', this.#loadingMessage)
 
-    await this.#loadNuxtInstance()
+    await this.#bindEagerListener()
 
-    // Acquire lock before binding a listener so parallel agent invocations
+    await this.#loadNuxtInstance(this.#bound && this.listener.getURLs().map(({ url }) => url))
+
+    // Acquire lock before serving so parallel agent invocations
     // fail fast without starting a second server (agent-only).
     this.#acquireDevLock(this.#currentNuxt!.options.buildDir)
 
@@ -540,13 +545,85 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
     this.#currentNuxt = await kit.loadNuxt(loadOptions)
   }
 
+  /**
+   * Bind a socket before the Nuxt config is known, so the port answers within
+   * milliseconds of spawn and pre-ready requests get the loading screen instead
+   * of hanging. The address is taken from the CLI/env, else from the address the
+   * previous run resolved, else from the schema default.
+   *
+   * A guessed address is only a guess: `#createListener` rebinds if the resolved
+   * config disagrees. Set `NUXT_DEV_EAGER_LISTEN=0` to bind after the config instead.
+   */
+  async #bindEagerListener(): Promise<void> {
+    if (process.env.NUXT_DEV_EAGER_LISTEN === '0' || process.env.NUXT_DEV_EAGER_LISTEN === 'false') {
+      return
+    }
+
+    const overrides = this.options.listenOverrides || {}
+    const hint = loadDevServerHint(this.options.cwd)
+
+    // Without `--https` only `nuxt.config` knows whether https is wanted, and the
+    // certificate options that come with it are not in the hint.
+    if (overrides.httpsEnabled === undefined && hint?.https) {
+      return
+    }
+    const httpsEnabled = !!overrides.httpsEnabled
+
+    const hasExplicitPort = overrides.port !== undefined && overrides.port !== ''
+    const listenOptions: ListenOptions = {
+      ...overrides,
+      port: hasExplicitPort ? overrides.port : hint?.port,
+      hostname: overrides.hostname ?? hint?.hostname,
+      baseURL: hint?.baseURL,
+      https: httpsEnabled ? overrides.https : undefined,
+      showURL: false,
+      open: false,
+      clipboard: false,
+      tunnel: false,
+    }
+
+    try {
+      this.#bound = await bindListener(this.handler, listenOptions)
+    }
+    catch (error) {
+      // An explicit port is the user's instruction, so its failure is a real
+      // error; a guessed one may simply disagree with the config.
+      if (hasExplicitPort) {
+        throw error
+      }
+      debug('Could not bind the dev server before loading Nuxt:', error)
+      return
+    }
+
+    this.listener = await createListener(this.#bound, listenOptions, { announce: false })
+
+    const knowsScheme = overrides.httpsEnabled !== undefined || hint?.https === false
+    if (overrides.open && knowsScheme && (hasExplicitPort || hint?.port === this.#bound.address.port)) {
+      this.#openedEagerly = true
+      openBrowser(overrides.openURL ? resolveOpenURL(overrides.openURL, this.listener.url) : this.listener.url)
+    }
+  }
+
   async #createListener(): Promise<void> {
     if (!this.#currentNuxt) {
       throw new Error('Nuxt must be loaded before creating listener')
     }
 
     const listenOptions = this.#resolveListenOptions()
-    this.listener = await listen(this.handler, listenOptions)
+    this.#persistDevServerHint(listenOptions.baseURL)
+
+    if (this.#bound && !matchesBoundTarget(this.#bound, listenOptions)) {
+      // Only loading screens have been served so far, so rebinding is safe.
+      await this.listener.close()
+      this.#bound = undefined
+      this.#openedEagerly = false
+    }
+
+    this.#bound ??= await bindListener(this.handler, listenOptions)
+    this.listener = await createListener(this.#bound, {
+      ...listenOptions,
+      open: listenOptions.open && !this.#openedEagerly,
+    })
 
     if (listenOptions.public) {
       this.#currentNuxt.options.devServer.cors = { origin: '*' }
@@ -563,7 +640,29 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
           allowedHosts: urls.map(u => new URL(u).hostname),
         },
       })
+      const allowedHosts = this.#currentNuxt.options.vite.server?.allowedHosts
+      if (Array.isArray(allowedHosts)) {
+        this.#currentNuxt.options.vite.server!.allowedHosts = dedupe(allowedHosts)
+      }
+    }
+  }
+
+  /**
+   * Record the address `nuxt.config` resolves to, so the next run can bind it
+   * before loading the config. CLI and env overrides are deliberately excluded:
+   * a one-off `--port` should not change where the next plain run binds.
+   */
+  #persistDevServerHint(baseURL?: string): void {
+    const devServer = this.#currentNuxt?.options.devServer
+    if (!devServer) {
+      return
     }
+    saveDevServerHint(this.options.cwd, {
+      port: Number(devServer.port) || undefined,
+      hostname: devServer.host || undefined,
+      https: !!devServer.https,
+      baseURL,
+    })
   }
 
   #resolveListenOptions(): ListenOptions {
@@ -871,6 +970,17 @@ function resolveDevServerHTTPS(certificate: false | ResolvedCertificate): NuxtOp
   return { key: certificate.key!, cert: certificate.cert! }
 }
 
+function dedupe<T>(values: T[]): T[] {
+  return [...new Set(values)]
+}
+
+/**
+ * Config the CLI injects on behalf of the live listener.
+ *
+ * Everything returned here is confined to `vite.server` and `devServer`, which
+ * Vite leaves out of its dependency optimiser hash. A port-derived or per-run
+ * value anywhere else would re-optimise dependencies on every start.
+ */
 function resolveDevServerDefaults(listenOptions: { hostname?: string, https: boolean }, urls: string[] = []): Partial<NuxtConfig> {
   const defaultConfig: Partial<NuxtConfig> = {}
 
@@ -896,6 +1006,16 @@ function resolveDevServerDefaults(listenOptions: { hostname?: string, https: boo
     defaultConfig.devServer = defu(defaultConfig.devServer, { cors: { origin: portlessOrigins } })
   }
 
+  // `defu` concatenates arrays, so the hostname and the listener urls overlap.
+  const allowedHosts = defaultConfig.vite?.server?.allowedHosts
+  if (Array.isArray(allowedHosts)) {
+    defaultConfig.vite!.server!.allowedHosts = dedupe(allowedHosts)
+  }
+  const corsOrigin = defaultConfig.devServer?.cors?.origin
+  if (Array.isArray(corsOrigin)) {
+    defaultConfig.devServer!.cors!.origin = dedupe(corsOrigin)
+  }
+
   return defaultConfig
 }