nuxtseo-layer-devtools 0.3.5 → 0.3.7

package/composables/rpc.ts

@@ -24,34 +24,34 @@ export interface DevtoolsConnectionOptions {
  * - **Standalone**: running directly in a browser tab with a manual dev server URL
  */
 export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
-  const inIframe = window.parent !== window
-
   // 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 ?? (
-          window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-        )
-      })
-      devtools.value = client.devtools
-      options.onConnected?.(client)
+  onDevtoolsClientConnected(async (client) => {
+    isConnected.value = true
+    // @ts-expect-error untyped
+    appFetch.value = client.host?.app?.$fetch
+    watchEffect(() => {
+      colorMode.value = client.host?.app?.colorMode?.value ?? (
+        window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      )
+    })
+    devtools.value = client.devtools
+    options.onConnected?.(client)
 
-      if (options.onRouteChange) {
-        const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
+    if (options.onRouteChange) {
+      const $route = client.host?.nuxt?.vueApp?.config?.globalProperties?.$route
+      if ($route)
         options.onRouteChange($route)
-        const removeAfterEach = client.host.nuxt.$router.afterEach((route: any) => {
+      const $router = client.host?.nuxt?.$router
+      if ($router) {
+        const removeAfterEach = $router.afterEach((route: any) => {
           options.onRouteChange!(route)
         })
         // Clean up when devtools client disconnects
         // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
         client.host.nuxt.hook('app:unmount', removeAfterEach)
       }
-    })
-  }
+    }
+  })
 
   // Standalone mode: create appFetch from manually entered URL
   watch(() => standaloneUrl.value, (url) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",

package/plugins/devtools-connection.client.ts

@@ -1,8 +1,15 @@
 export default defineNuxtPlugin(() => {
+  const inIframe = window.parent !== window
+
+  // When served from the dev server directly (not in iframe), auto-connect to same origin
+  if (!inIframe && !standaloneUrl.value) {
+    standaloneUrl.value = window.location.origin
+  }
+
   useDevtoolsConnection({
     onConnected(client) {
-      const props = client.host.nuxt.vueApp.config.globalProperties
-      base.value = props?.$router?.options?.history?.base || client.host.app.baseURL || '/'
+      const props = client.host?.nuxt?.vueApp?.config?.globalProperties
+      base.value = props?.$router?.options?.history?.base || client.host?.app?.baseURL || '/'
       const $route = props?.$route
       if ($route) {
         path.value = $route.path || '/'