fix: useBotDetection() empty when ran client side only

Author: harlan-zw

src/runtime/app/composables/useBotDetection.ts

@@ -16,6 +16,11 @@ export function useBotDetection(options: UseBotDetectionOptions = {}): UseBotDet
       }
     }
 
+    // SPA fallback: use navigator.userAgent
+    if (import.meta.client) {
+      return getBotDetectionFromHeaders({ 'user-agent': navigator.userAgent })
+    }
+
     return null
   })
 

test/e2e/spa-bot-detection.test.ts

@@ -0,0 +1,26 @@
+import { createResolver } from '@nuxt/kit'
+import { createPage, setup } from '@nuxt/test-utils'
+import { describe, expect, it } from 'vitest'
+
+const { resolve } = createResolver(import.meta.url)
+
+process.env.NODE_ENV = 'production'
+
+await setup({
+  rootDir: resolve('../fixtures/spa'),
+  build: true,
+})
+
+describe('bot detection in SPA mode', () => {
+  it('detects bot via navigator.userAgent fallback in SPA', async () => {
+    const page = await createPage('/bot-detection')
+
+    // No need to wait - userAgent detection is synchronous on init
+    const isBotText = await page.textContent('[data-test-id="is-bot"]')
+    const botNameText = await page.textContent('[data-test-id="bot-name"]')
+
+    // HeadlessChrome user-agent detected via navigator.userAgent fallback
+    expect(isBotText).toContain('is bot: true')
+    expect(botNameText).toContain('puppeteer')
+  }, 15_000)
+})

test/fixtures/spa/nuxt.config.ts

@@ -0,0 +1,9 @@
+import NuxtRobots from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [NuxtRobots],
+  ssr: false,
+  site: {
+    url: 'https://nuxtseo.com',
+  },
+})

test/fixtures/spa/pages/bot-detection.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useBotDetection } from '#robots/app/composables/useBotDetection'
+
+const { isBot, botName, trusted } = useBotDetection()
+</script>
+
+<template>
+  <div>
+    <div data-test-id="is-bot">
+      is bot: {{ isBot }}
+    </div>
+    <div data-test-id="bot-name">
+      bot name: {{ botName }}
+    </div>
+    <div data-test-id="trusted">
+      trusted: {{ trusted }}
+    </div>
+  </div>
+</template>