From 1f456706d85b72f41ad824a2fc8c21097b29f0f2 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 1 Dec 2025 20:57:06 +1100
Subject: [PATCH] fix(devtools): show better production hints

---
 .playground/pages/admin.vue                   | 11 ++++
 .playground/pages/index.vue                   | 26 +++++++++
 .playground/server/api/login.ts               |  9 +++
 .playground/server/api/logout.ts              |  6 ++
 .playground/server/middleware/auth.ts         | 13 +++++
 client/app.vue                                |  3 +-
 src/module.ts                                 |  1 +
 src/runtime/app/plugins/robot-meta.server.ts  |  2 +
 .../server/middleware/injectContext.ts        |  7 +++
 .../server/routes/__robots__/debug-path.ts    | 58 ++++++++++++++++---
 10 files changed, 127 insertions(+), 9 deletions(-)
 create mode 100644 .playground/pages/admin.vue
 create mode 100644 .playground/server/api/login.ts
 create mode 100644 .playground/server/api/logout.ts
 create mode 100644 .playground/server/middleware/auth.ts

diff --git a/.playground/pages/admin.vue b/.playground/pages/admin.vue
new file mode 100644
index 00000000..11cc421b
--- /dev/null
+++ b/.playground/pages/admin.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Admin Page</h1>
+    <p>This is a protected admin page. You should see robots meta tag with content.</p>
+    <div>
+      <NuxtLink to="/">
+        Back to home
+      </NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index f44fe244..75892269 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -1,5 +1,31 @@
+<script setup lang="ts">
+async function login() {
+  await $fetch('/api/login')
+  location.reload()
+}
+
+async function logout() {
+  await $fetch('/api/logout')
+  location.reload()
+}
+</script>
+
 <template>
   <div>
+    <div style="margin-bottom: 20px;">
+      <h2>Auth Test</h2>
+      <button style="margin-right: 10px;" @click="login">
+        Login (set cookie)
+      </button>
+      <button @click="logout">
+        Logout (clear cookie)
+      </button>
+    </div>
+    <div>
+      <NuxtLink to="/admin">
+        Admin page - requires auth
+      </NuxtLink>
+    </div>
     <div>
       <NuxtLink to="/secret">
         Secret page - not crawlable
diff --git a/.playground/server/api/login.ts b/.playground/server/api/login.ts
new file mode 100644
index 00000000..f44547c2
--- /dev/null
+++ b/.playground/server/api/login.ts
@@ -0,0 +1,9 @@
+import { defineEventHandler, setCookie } from 'h3'
+
+export default defineEventHandler((e) => {
+  setCookie(e, 'auth', 'logged-in', {
+    maxAge: 60 * 60 * 24, // 1 day
+    path: '/',
+  })
+  return { success: true }
+})
diff --git a/.playground/server/api/logout.ts b/.playground/server/api/logout.ts
new file mode 100644
index 00000000..64702973
--- /dev/null
+++ b/.playground/server/api/logout.ts
@@ -0,0 +1,6 @@
+import { defineEventHandler, deleteCookie } from 'h3'
+
+export default defineEventHandler((e) => {
+  deleteCookie(e, 'auth')
+  return { success: true }
+})
diff --git a/.playground/server/middleware/auth.ts b/.playground/server/middleware/auth.ts
new file mode 100644
index 00000000..a4170521
--- /dev/null
+++ b/.playground/server/middleware/auth.ts
@@ -0,0 +1,13 @@
+import { createError, defineEventHandler, getCookie } from 'h3'
+
+export default defineEventHandler((e) => {
+  if (e.path.startsWith('/admin')) {
+    const authCookie = getCookie(e, 'auth')
+    if (!authCookie || authCookie !== 'logged-in') {
+      throw createError({
+        statusCode: 403,
+        statusMessage: 'Forbidden - Please login first',
+      })
+    }
+  }
+})
diff --git a/client/app.vue b/client/app.vue
index f43ca9ef..a649effa 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -67,7 +67,8 @@ const version = computed(() => {
 })
 
 const metaTag = computed(() => {
-  return `<meta name="robots" content="${pathDebugData.value?.rule}">`
+  const content = pathDebugData.value?.rule || ''
+  return `<meta name="robots" content="${content}">`
 })
 
 const tab = useLocalStorage('nuxt-robots:tab', 'overview')
diff --git a/src/module.ts b/src/module.ts
index c67c7a60..9b7287a3 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -558,6 +558,7 @@ ${types}
 declare module 'h3' {
   interface H3EventContext {
     robots: RobotsContext
+    robotsProduction?: RobotsContext
   }
 }
 
diff --git a/src/runtime/app/plugins/robot-meta.server.ts b/src/runtime/app/plugins/robot-meta.server.ts
index 2fd67a3f..beda47b8 100644
--- a/src/runtime/app/plugins/robot-meta.server.ts
+++ b/src/runtime/app/plugins/robot-meta.server.ts
@@ -5,6 +5,7 @@ export default defineNuxtPlugin({
   setup() {
     const event = useRequestEvent()
     const ctx = event?.context?.robots
+    const productionCtx = event?.context?.robotsProduction
     // set from nitro, not available for internal routes
     if (!ctx)
       return
@@ -14,6 +15,7 @@ export default defineNuxtPlugin({
           'name': 'robots',
           'content': () => ctx.rule || '',
           'data-hint': () => import.meta.dev && ctx.debug?.source ? [ctx.debug?.source, ctx.debug?.line].filter(Boolean).join(',') : undefined,
+          'data-production-content': () => import.meta.dev && productionCtx?.rule ? productionCtx.rule : undefined,
         },
       ],
     })
diff --git a/src/runtime/server/middleware/injectContext.ts b/src/runtime/server/middleware/injectContext.ts
index d9ff05e3..15bd9124 100644
--- a/src/runtime/server/middleware/injectContext.ts
+++ b/src/runtime/server/middleware/injectContext.ts
@@ -13,5 +13,12 @@ export default defineEventHandler(async (e) => {
       setHeader(e, 'X-Robots-Tag', robotConfig.rule)
     }
     e.context.robots = robotConfig
+
+    // also compute production config for devtools
+    if (import.meta.dev) {
+      const productionRobotConfig = getPathRobotConfig(e, { skipSiteIndexable: true })
+      setHeader(e, 'X-Robots-Production', productionRobotConfig.rule)
+      e.context.robotsProduction = productionRobotConfig
+    }
   }
 })
diff --git a/src/runtime/server/routes/__robots__/debug-path.ts b/src/runtime/server/routes/__robots__/debug-path.ts
index 5353f5ed..1ff68ca7 100644
--- a/src/runtime/server/routes/__robots__/debug-path.ts
+++ b/src/runtime/server/routes/__robots__/debug-path.ts
@@ -1,18 +1,60 @@
 import { defineEventHandler, getQuery } from 'h3'
 import { withQuery } from 'ufo'
+import { getPathRobotConfig } from '../../composables/getPathRobotConfig'
 
 export default defineEventHandler(async (e) => {
   const query = getQuery(e)
   const path = query.path as string
+  const isMockProduction = Boolean(query.mockProductionEnv)
   delete query.path
-  // we have to fetch the path to know for sure
-  const res = await $fetch.raw(withQuery(path, query))
-  const html = res._data
-  const robotsHeader = String(res.headers.get('x-robots-tag'))
-  // get robots meta tag <meta name="robots" content="noindex, nofollow" data-hint="useRobotsRule">
-  // <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
-  const robotsMeta = String(html).match(/<meta[^>]+name=["']robots["'][^>]+content=["']([^"']+)["'](?:[^>]+data-hint=["']([^"']+)["'])?[^>]*>/i)
-  const [, robotsContent = null, robotsHint = null] = robotsMeta || []
+
+  let robotsHeader: string | null = null
+  let robotsContent: string | null = null
+  let robotsHint: string | null = null
+
+  // try to fetch the page to get actual rendered meta tag
+  const res = await $fetch.raw(withQuery(path, query)).catch(() => null)
+  if (res) {
+    const html = res._data
+    robotsHeader = String(res.headers.get('x-robots-tag'))
+
+    // if mocking production, use production values from headers/meta
+    if (isMockProduction) {
+      const productionHeader = res.headers.get('x-robots-production')
+      if (productionHeader) {
+        robotsHeader = String(productionHeader)
+      }
+      // extract production content from data-production-content attribute
+      const productionMeta = String(html).match(/<meta[^>]+name=["']robots["'][^>]+data-production-content=["']([^"']+)["'](?:[^>]+data-hint=["']([^"']+)["'])?[^>]*>/i)
+      if (productionMeta) {
+        [, robotsContent = null, robotsHint = null] = productionMeta
+      }
+    }
+
+    // if not mocking production or no production values found, use regular values
+    if (!robotsContent) {
+      // get robots meta tag <meta name="robots" content="noindex, nofollow" data-hint="useRobotsRule">
+      // <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
+      const robotsMeta = String(html).match(/<meta[^>]+name=["']robots["'][^>]+content=["']([^"']+)["'](?:[^>]+data-hint=["']([^"']+)["'])?[^>]*>/i)
+      if (robotsMeta) {
+        [, robotsContent = null, robotsHint = null] = robotsMeta
+      }
+    }
+  }
+
+  // fallback to computed config if fetch failed or no meta tag found
+  if (!robotsContent) {
+    const robotConfig = getPathRobotConfig(e, {
+      path,
+      skipSiteIndexable: isMockProduction,
+    })
+    robotsContent = robotConfig.rule
+    robotsHint = robotConfig.debug?.source || null
+    if (!robotsHeader) {
+      robotsHeader = robotConfig.rule
+    }
+  }
+
   const [source, line] = robotsHint ? robotsHint.split(',') : [null, null]
   return {
     rule: robotsContent,