fix: handle nuxt 3 and vue-router 4x api (#49)

Author: danielroe

package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "defu": "^5.0.0",
-    "ufo": "^0.7.9",
+    "ufo": "^0.8.5",
     "web-vitals": "^2.1.0"
   },
   "devDependencies": {

src/runtime/vitals.client.mjs

@@ -3,17 +3,26 @@ import { sendToAnalytics } from '~vitals-provider'
 
 const options = <%= JSON.stringify(options, null, 2) %>
 
-export default function ({ app: { router } }) {
-  router.onReady((to) => {
-    webVitals({
-      options,
-      sendToAnalytics,
-      route: to
+const sendVitals = (to) => webVitals({
+  options,
+  sendToAnalytics,
+  route: to
+})
+
+export default async function (ctx) {
+  const router = ctx.app?.router || ctx.$router
+  if (!router) { return }
+
+  if ('isReady' in router) {
+    // vue-router 4
+    await router.isReady()
+    sendVitals(router.currentRoute)
+    router.afterEach((to) => sendVitals(to))
+  } else {
+    // vue-router 3
+    router.onReady((to) => {
+      sendVitals(to)
+      router.afterEach((to) => sendVitals(to))
     })
-    router.afterEach(to => webVitals({
-      options,
-      sendToAnalytics,
-      route: to
-    }))
-  })
+  }
 }

yarn.lock

@@ -9434,10 +9434,10 @@ ufo@^0.7.7:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.7.7.tgz#0062f9e5e790819b0fb23ca24d7c63a4011c036a"
   integrity sha512-N25aY3HBkJBnahm+2l4JRBBrX5I+JPakF/tDHYDTjd3wUR7iFLdyiPhj8mBwBz21v728BKwM9L9tgBfCntgdlw==
 
-ufo@^0.7.9:
-  version "0.7.9"
-  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.7.9.tgz#0268e3734b413c9ed6f3510201f42372821b875c"
-  integrity sha512-6t9LrLk3FhqTS+GW3IqlITtfRB5JAVr5MMNjpBECfK827W+Vh5Ilw/LhTcHWrt6b3hkeBvcbjx4Ti7QVFzmcww==
+ufo@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.5.tgz#e367b4205ece9d9723f2fa54f887d43ed1bce5d0"
+  integrity sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==
 
 uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.14.1"