chore: add debug logger

themes/theme-default/src/client/components/VPPage.vue

@@ -1,15 +1,34 @@
 <script setup lang="ts">
 import VPPageMeta from '@theme/VPPageMeta.vue'
 import VPPageNav from '@theme/VPPageNav.vue'
+import { watchImmediate } from '@vueuse/core'
 import type { VNode } from 'vue'
-import { Content } from 'vuepress/client'
+import { h } from 'vue'
+import { Content, useRoutePath } from 'vuepress/client'
 
 defineSlots<{
   'top'?: (props: Record<never, never>) => VNode | VNode[] | null
   'bottom'?: (props: Record<never, never>) => VNode | VNode[] | null
   'content-top'?: (props: Record<never, never>) => VNode | VNode[] | null
   'content-bottom'?: (props: Record<never, never>) => VNode | VNode[] | null
 }>()
+
+watchImmediate(useRoutePath(), () => {
+  console.log('page route path changed')
+})
+watchImmediate(
+  useRoutePath(),
+  () => {
+    console.log('page route path changed post')
+  },
+  { flush: 'post' },
+)
+
+const MarkdownContent = () => {
+  console.log('render')
+
+  return h(Content)
+}
 </script>
 
 <template>
@@ -19,7 +38,7 @@ defineSlots<{
     <div vp-content>
       <slot name="content-top" />
 
-      <Content />
+      <MarkdownContent />
 
       <slot name="content-bottom" />
     </div>

themes/theme-default/src/client/config.ts

@@ -3,7 +3,8 @@ import { setupHeaders } from '@theme/useHeaders'
 import { useScrollPromise } from '@theme/useScrollPromise'
 import { setupSidebarItems } from '@theme/useSidebarItems'
 import { hasGlobalComponent } from '@vuepress/helper/client'
-import { defineClientConfig } from 'vuepress/client'
+import { watchImmediate } from '@vueuse/core'
+import { defineClientConfig, useRoutePath } from 'vuepress/client'
 import { Badge } from './components/global/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
@@ -28,6 +29,17 @@ export default defineClientConfig({
     setupDarkMode()
     setupHeaders()
     setupSidebarItems()
+
+    watchImmediate(useRoutePath(), () => {
+      console.log('root route path changed')
+    })
+    watchImmediate(
+      useRoutePath(),
+      () => {
+        console.log('root route path changed post')
+      },
+      { flush: 'post' },
+    )
   },
 
   layouts: {

themes/theme-default/src/client/layouts/Layout.vue

@@ -6,9 +6,15 @@ import VPSidebar from '@theme/VPSidebar.vue'
 import { useScrollPromise } from '@theme/useScrollPromise'
 import { useSidebarItems } from '@theme/useSidebarItems'
 import { useThemeLocaleData } from '@theme/useThemeData'
+import { watchImmediate } from '@vueuse/core'
 import type { VNode } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { usePageData, usePageFrontmatter, useRouter } from 'vuepress/client'
+import {
+  usePageData,
+  usePageFrontmatter,
+  useRoutePath,
+  useRouter,
+} from 'vuepress/client'
 import type { DefaultThemePageFrontmatter } from '../../shared/index.js'
 
 defineSlots<{
@@ -91,6 +97,17 @@ onUnmounted(() => {
   unregisterRouterHook()
 })
 
+watchImmediate(useRoutePath(), () => {
+  console.log('layout route path changed')
+})
+watchImmediate(
+  useRoutePath(),
+  () => {
+    console.log('layout route path changed post')
+  },
+  { flush: 'post' },
+)
+
 // handle scrollBehavior with transition
 const scrollPromise = useScrollPromise()
 const onBeforeEnter = scrollPromise.resolve