nuxtseo-layer-devtools 0.2.5 → 0.2.7

package/components/DevtoolsLayout.vue

@@ -2,7 +2,7 @@
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { colorMode } from '../composables/rpc'
-import { hasProductionUrl, isProductionMode, previewSource, productionUrl } from '../composables/state'
+import { hasProductionUrl, isConnected, isProductionMode, isStandalone, path, previewSource, productionUrl, standaloneUrl } from '../composables/state'
 
 export interface DevtoolsNavItem {
   value: string
@@ -70,6 +70,21 @@ function selectMode(mode: 'local' | 'production') {
   previewSource.value = mode
   modeDropdownOpen.value = false
 }
+
+const standaloneHostname = computed(() => {
+  try {
+    return new URL(standaloneUrl.value).host
+  }
+  catch {
+    return standaloneUrl.value
+  }
+})
+
+const showStandaloneSetup = computed(() => !isConnected.value && !isStandalone.value)
+
+function disconnectStandalone() {
+  standaloneUrl.value = ''
+}
 </script>
 
 <template>
@@ -106,7 +121,8 @@ function selectMode(mode: 'local' | 'production') {
               >
                 v{{ version }}
               </UBadge>
-              <div v-if="hasProductionUrl" ref="modeDropdownRef" class="mode-dropdown-wrapper">
+              <!-- Mode dropdown: embedded with production URL -->
+              <div v-if="hasProductionUrl && !isStandalone" ref="modeDropdownRef" class="mode-dropdown-wrapper">
                 <button type="button" class="devtools-mode-btn" @click="modeDropdownOpen = !modeDropdownOpen">
                   <UIcon :name="isProductionMode ? 'carbon:cloud' : 'carbon:laptop'" class="w-3.5 h-3.5" />
                   <span class="hidden sm:inline">{{ isProductionMode ? 'Production' : 'Local' }}</span>
@@ -135,6 +151,16 @@ function selectMode(mode: 'local' | 'production') {
                   </div>
                 </Transition>
               </div>
+              <!-- Standalone mode indicator -->
+              <div v-if="isStandalone" class="standalone-indicator">
+                <UIcon name="carbon:plug" class="w-3.5 h-3.5 text-[var(--seo-green)]" />
+                <span class="text-xs font-mono">{{ standaloneHostname }}</span>
+                <UTooltip text="Disconnect">
+                  <button type="button" class="standalone-disconnect" @click="disconnectStandalone">
+                    <UIcon name="carbon:close" class="w-3 h-3" />
+                  </button>
+                </UTooltip>
+              </div>
             </div>
           </div>
 
@@ -218,11 +244,28 @@ function selectMode(mode: 'local' | 'production') {
         </div>
       </header>
 
+      <!-- Standalone path input -->
+      <div v-if="isStandalone" class="standalone-path-bar">
+        <div class="standalone-path-inner">
+          <UIcon name="carbon:document" class="w-3.5 h-3.5 text-[var(--color-text-muted)]" />
+          <span class="text-xs text-[var(--color-text-muted)]">Path:</span>
+          <input
+            :value="path"
+            type="text"
+            class="standalone-path-input"
+            placeholder="/"
+            @change="path = ($event.target as HTMLInputElement).value"
+            @keydown.enter="($event.target as HTMLInputElement).blur()"
+          >
+        </div>
+      </div>
+
       <!-- Main Content -->
       <div class="devtools-main">
         <main class="devtools-main-content">
-          <DevtoolsLoading v-if="loading" />
-          <div v-show="!loading">
+          <DevtoolsStandaloneConnect v-if="showStandaloneSetup" />
+          <DevtoolsLoading v-show="!showStandaloneSetup && loading" />
+          <div v-show="!showStandaloneSetup && !loading">
             <slot />
           </div>
         </main>
@@ -285,4 +328,64 @@ function selectMode(mode: 'local' | 'production') {
   opacity: 0;
   transform: translateY(-4px);
 }
+
+.standalone-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: oklch(from var(--seo-green) l c h / 0.1);
+  border: 1px solid oklch(from var(--seo-green) l c h / 0.2);
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.standalone-disconnect {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: background 100ms, color 100ms;
+}
+
+.standalone-disconnect:hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+}
+
+.standalone-path-bar {
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+  padding: 0.375rem 1rem;
+}
+
+.standalone-path-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.standalone-path-input {
+  flex: 1;
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  outline: none;
+  transition: border-color 150ms;
+}
+
+.standalone-path-input:focus {
+  border-color: var(--seo-green);
+}
 </style>

package/components/DevtoolsLoading.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="flex items-center justify-center py-20">
+  <div class="flex flex-col items-center justify-center gap-3 py-20">
     <UIcon
       name="carbon:circle-dash"
       class="animate-spin text-3xl text-[var(--color-text-muted)]"
     />
+    <p class="text-sm text-[var(--color-text-muted)]">
+      Connecting to devtools…
+    </p>
   </div>
 </template>

package/components/DevtoolsStandaloneConnect.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { standaloneUrl } from '../composables/state'
+
+const urlInput = ref(standaloneUrl.value || 'http://localhost:3000')
+const error = ref('')
+const connecting = ref(false)
+
+async function connect() {
+  error.value = ''
+  connecting.value = true
+  const url = urlInput.value.replace(/\/+$/, '')
+  try {
+    // Verify the dev server is reachable
+    await fetch(url, { mode: 'no-cors', signal: AbortSignal.timeout(5000) })
+    standaloneUrl.value = url
+  }
+  catch {
+    error.value = `Could not reach ${url}. Is the dev server running?`
+  }
+  finally {
+    connecting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="standalone-connect">
+    <div class="standalone-connect-card">
+      <UIcon name="carbon:plug" class="text-4xl text-[var(--seo-green)]" />
+      <h2 class="text-lg font-semibold">
+        Connect to Dev Server
+      </h2>
+      <p class="text-sm text-[var(--color-text-muted)] text-center max-w-sm leading-relaxed">
+        Running in standalone mode. Enter the URL of your Nuxt dev server to start inspecting.
+      </p>
+      <form class="standalone-connect-form" @submit.prevent="connect">
+        <UInput
+          v-model="urlInput"
+          placeholder="http://localhost:3000"
+          size="lg"
+          icon="carbon:link"
+          class="flex-1"
+          :disabled="connecting"
+        />
+        <UButton
+          type="submit"
+          icon="carbon:connect"
+          size="lg"
+          :loading="connecting"
+        >
+          Connect
+        </UButton>
+      </form>
+      <p v-if="error" class="text-xs text-[var(--color-warning)] text-center max-w-sm">
+        {{ error }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.standalone-connect {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+}
+
+.standalone-connect-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2.5rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+  max-width: 28rem;
+  width: 100%;
+}
+
+.standalone-connect-form {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+</style>

package/composables/rpc.ts

@@ -2,7 +2,9 @@ import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/types'
 import type { $Fetch } from 'nitropack/types'
 import type { Ref } from 'vue'
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
-import { ref, watchEffect } from 'vue'
+import { ofetch } from 'ofetch'
+import { ref, watch, watchEffect } from 'vue'
+import { isConnected, refreshSources, standaloneUrl } from './state'
 
 export const appFetch: Ref<$Fetch | undefined> = ref()
 export const devtools: Ref<NuxtDevtoolsClient | undefined> = ref()
@@ -16,25 +18,45 @@ export interface DevtoolsConnectionOptions {
 /**
  * Initialize the base devtools connection.
  * Call this in your module's devtools client setup.
+ *
+ * Supports two modes:
+ * - **Embedded**: running inside Nuxt DevTools iframe (automatic)
+ * - **Standalone**: running directly in a browser tab with a manual dev server URL
  */
 export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
-  onDevtoolsClientConnected(async (client) => {
-    // @ts-expect-error untyped
-    appFetch.value = client.host.app.$fetch
-    watchEffect(() => {
-      colorMode.value = client.host.app.colorMode.value
-    })
-    devtools.value = client.devtools
-    options.onConnected?.(client)
+  const inIframe = window.parent !== window
 
-    if (options.onRouteChange) {
-      const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
-      options.onRouteChange($route)
-      const removeAfterEach = client.host.nuxt.$router.afterEach((route: any) => {
-        options.onRouteChange!(route)
+  // Embedded mode: connect via devtools-kit iframe client
+  if (inIframe) {
+    onDevtoolsClientConnected(async (client) => {
+      isConnected.value = true
+      // @ts-expect-error untyped
+      appFetch.value = client.host.app.$fetch
+      watchEffect(() => {
+        colorMode.value = client.host.app.colorMode.value
       })
-      // Clean up when devtools client disconnects
-      client.host.nuxt.hook('app:unmount', removeAfterEach)
+      devtools.value = client.devtools
+      options.onConnected?.(client)
+
+      if (options.onRouteChange) {
+        const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
+        options.onRouteChange($route)
+        const removeAfterEach = client.host.nuxt.$router.afterEach((route: any) => {
+          options.onRouteChange!(route)
+        })
+        // Clean up when devtools client disconnects
+        client.host.nuxt.hook('app:unmount', removeAfterEach)
+      }
+    })
+  }
+
+  // Standalone mode: create appFetch from manually entered URL
+  watch(() => standaloneUrl.value, (url) => {
+    if (url && !isConnected.value) {
+      appFetch.value = ofetch.create({ baseURL: url }) as unknown as $Fetch
+      // Use system color scheme preference
+      colorMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      refreshSources()
     }
-  })
+  }, { immediate: true })
 }

package/composables/state.ts

@@ -9,7 +9,11 @@ export const path = ref('/')
 export const query = ref()
 export const base = ref('/')
 
-export const host = computed(() => withBase(base.value, `${window.location.protocol}//${hostname}`))
+export const host = computed(() => {
+  if (isStandalone.value)
+    return standaloneUrl.value
+  return withBase(base.value, `${window.location.protocol}//${hostname}`)
+})
 
 export const refreshSources = useDebounceFn(() => {
   refreshTime.value = Date.now()
@@ -31,3 +35,8 @@ export const hasProductionUrl = computed(() => {
 })
 
 export const isProductionMode = computed(() => previewSource.value === 'production' && hasProductionUrl.value)
+
+// Standalone mode state
+export const standaloneUrl = useLocalStorage<string>('nuxt-seo:standalone-url', '')
+export const isConnected = ref(false)
+export const isStandalone = computed(() => !isConnected.value && !!standaloneUrl.value)

package/nuxt.config.ts

@@ -8,10 +8,15 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/fonts',
     '@nuxt/ui',
+    '@vueuse/nuxt',
   ],
 
   css: [resolve('./assets/css/global.css')],
 
+  robots: false,
+  content: false,
+  sitemap: false,
+
   fonts: {
     families: [
       { name: 'Hubot Sans' },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -31,7 +31,8 @@
     "@nuxt/ui": "^4.6.0",
     "@shikijs/langs": "^4.0.2",
     "@shikijs/themes": "^4.0.2",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/nuxt": "^14.2.1",
+    "ofetch": "^1.5.1",
     "shiki": "^4.0.2",
     "ufo": "^1.6.3"
   },