nuxtseo-layer-devtools 0.3.6 → 0.3.8

package/composables/rpc.ts

@@ -1,7 +1,7 @@
 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 { onDevtoolsClientConnected, useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import { ofetch } from 'ofetch'
 import { ref, watch, watchEffect } from 'vue'
 import { isConnected, refreshSources, standaloneUrl } from './state'
@@ -24,13 +24,19 @@ export interface DevtoolsConnectionOptions {
  * - **Standalone**: running directly in a browser tab with a manual dev server URL
  */
 export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
+  // Workaround: devtools-kit@4.0.0-alpha.3 bug where onDevtoolsClientConnected
+  // defines a window.__NUXT_DEVTOOLS__ getter that reads clientRef.value, but
+  // clientRef is only initialized by useDevtoolsClient(). Call it first to avoid
+  // "Cannot read properties of undefined (reading 'value')" on the getter.
+  useDevtoolsClient()
+
   // Embedded mode: connect via devtools-kit iframe client
   onDevtoolsClientConnected(async (client) => {
     isConnected.value = true
     // @ts-expect-error untyped
-    appFetch.value = client.host.app.$fetch
+    appFetch.value = client.host?.app?.$fetch
     watchEffect(() => {
-      colorMode.value = client.host.app.colorMode?.value ?? (
+      colorMode.value = client.host?.app?.colorMode?.value ?? (
         window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
       )
     })
@@ -38,14 +44,18 @@ export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}):
     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
-      // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
-      client.host.nuxt.hook('app:unmount', removeAfterEach)
+      const $route = client.host?.nuxt?.vueApp?.config?.globalProperties?.$route
+      if ($route)
+        options.onRouteChange($route)
+      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)
+      }
     }
   })
 

package/package.json

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

package/plugins/devtools-connection.client.ts

@@ -8,8 +8,8 @@ export default defineNuxtPlugin(() => {
 
   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 || '/'