chore(docs): dynamically import webvitals

docs/components/home/flows/Intro.vue

@@ -2,7 +2,6 @@
 import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { Background } from '@vue-flow/background'
-import { onBeforeUnmount } from 'vue'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -57,7 +56,7 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, nodes } = useVueFlow({
+const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -181,9 +180,11 @@ const setElements = useDebounceFn(
   () => (currentBreakpoint.value === null ? 5 : 50),
 )
 
-const { stop } = useResizeObserver(el, setElements)
+onNodesInitialized(() => {
+  setElements()
+})
 
-onBeforeUnmount(stop)
+useResizeObserver(el, setElements)
 
 function scrollTo() {
   const el = document.getElementById('acknowledgement')

docs/src/.vitepress/theme/layouts/default.vue

@@ -2,14 +2,16 @@
 import { watch } from 'vue'
 import { useRoute } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { webVitals } from '../../plugins/vercel-web-vitals-api'
 
 const { Layout: ParentLayout } = DefaultTheme
 
 const route = useRoute()
 
-onMounted(() => {
-  webVitals({ analyticsId: '__ANALYTICS_ID__', debug: false })
+onMounted(async () => {
+  if (!import.meta.env.DEV) {
+    const { webVitals } = await import('../../plugins/vercel-web-vitals-api')
+    webVitals({ analyticsId: '__ANALYTICS_ID__', debug: false })
+  }
 })
 
 watch(