nuxtseo-layer-devtools 0.3.1 → 0.3.5

package/composables/rpc.ts

@@ -33,7 +33,9 @@ export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}):
       // @ts-expect-error untyped
       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'
+        )
       })
       devtools.value = client.devtools
       options.onConnected?.(client)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -22,6 +22,7 @@
     "components",
     "composables",
     "nuxt.config.ts",
+    "plugins",
     "skills"
   ],
   "dependencies": {

package/plugins/devtools-connection.client.ts

@@ -0,0 +1,19 @@
+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 $route = props?.$route
+      if ($route) {
+        path.value = $route.path || '/'
+        query.value = $route.query
+      }
+      refreshSources()
+    },
+    onRouteChange(route) {
+      path.value = route.path
+      query.value = route.query
+      refreshSources()
+    },
+  })
+})