fix(theme-default): fix setupHeaders, close #326

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

@@ -3,16 +3,13 @@ import VPPageMeta from '@theme/VPPageMeta.vue'
 import VPPageNav from '@theme/VPPageNav.vue'
 import type { VNode } from 'vue'
 import { Content } from 'vuepress/client'
-import { setupHeaders } from '../composables/index.js'
 
 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
 }>()
-
-setupHeaders()
 </script>
 
 <template>

themes/theme-default/src/client/composables/useHeaders.ts

@@ -0,0 +1,53 @@
+import { useThemeLocaleData } from '@theme/useThemeData'
+import type { MenuItem } from '@vuepress/helper/client'
+import { getHeaders } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
+import type { InjectionKey, Ref } from 'vue'
+import { computed, inject, onMounted, provide, ref } from 'vue'
+import { usePageFrontmatter, useRoutePath } from 'vuepress/client'
+import type { DefaultThemeNormalPageFrontmatter } from '../../shared/index.js'
+
+export type HeadersRef = Ref<MenuItem[]>
+
+export const headersSymbol: InjectionKey<HeadersRef> = Symbol('headers')
+
+/**
+ * Inject headers
+ */
+export const useHeaders = (): HeadersRef => {
+  const headers = inject(headersSymbol)
+
+  if (!headers) {
+    throw new Error('useHeaders() is called without provider.')
+  }
+  return headers
+}
+
+export const setupHeaders = (): void => {
+  const headersRef: HeadersRef = ref([])
+
+  const routePath = useRoutePath()
+  const themeLocale = useThemeLocaleData()
+  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
+  const levels = computed(
+    () => frontmatter.value.sidebarDepth ?? themeLocale.value.sidebarDepth ?? 2,
+  )
+
+  const updateHeaders = (): void => {
+    if (levels.value <= 0) {
+      headersRef.value = []
+      return
+    }
+
+    headersRef.value = getHeaders({
+      levels: [2, levels.value + 1],
+      ignore: ['.vp-badge'],
+    })
+  }
+
+  provide(headersSymbol, headersRef)
+
+  onMounted(() => {
+    watchImmediate([levels, routePath], updateHeaders)
+  })
+}

themes/theme-default/src/client/composables/useSidebarItems.ts

@@ -1,22 +1,17 @@
 import { resolveAutoLink } from '@theme/resolveAutoLink'
 import { resolvePrefix } from '@theme/resolvePrefix'
+import { useHeaders } from '@theme/useHeaders'
 import { useThemeLocaleData } from '@theme/useThemeData'
 import type { MenuItem } from '@vuepress/helper/client'
-import {
-  getHeaders,
-  isLinkRelative,
-  keys,
-  startsWith,
-} from '@vuepress/helper/client'
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
-import { computed, inject, onMounted, provide, ref, watch } from 'vue'
+import { isLinkRelative, keys, startsWith } from '@vuepress/helper/client'
+import type { ComputedRef, InjectionKey } from 'vue'
+import { computed, inject, provide } from 'vue'
 import type { PageData } from 'vuepress/client'
 import {
   usePageData,
   usePageFrontmatter,
   useRoute,
   useRouteLocale,
-  useRouter,
 } from 'vuepress/client'
 import { isPlainObject, isString } from 'vuepress/shared'
 import type {
@@ -29,43 +24,6 @@ import type {
 } from '../../shared/index.js'
 import type { SidebarHeaderItem, SidebarItem } from '../typings.js'
 
-export type HeadersRef = Ref<MenuItem[]>
-
-export const headersRef: HeadersRef = ref([])
-
-export const setupHeaders = (): void => {
-  const router = useRouter()
-  const themeLocale = useThemeLocaleData()
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
-  const levels = computed(
-    () => frontmatter.value.sidebarDepth ?? themeLocale.value.sidebarDepth ?? 2,
-  )
-
-  router.beforeEach((to, from) => {
-    if (to.path !== from.path) {
-      headersRef.value = []
-    }
-  })
-
-  const updateHeaders = (): void => {
-    if (levels.value <= 0) {
-      headersRef.value = []
-      return
-    }
-
-    headersRef.value = getHeaders({
-      levels: [2, levels.value + 1],
-      ignore: ['.vp-badge'],
-    })
-  }
-
-  watch(levels, updateHeaders)
-
-  onMounted(updateHeaders)
-}
-
-export const useHeaders = (): HeadersRef => headersRef
-
 /**
  * Util to transform page header to sidebar item
  */

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

@@ -1,4 +1,5 @@
 import { setupDarkMode } from '@theme/useDarkMode'
+import { setupHeaders } from '@theme/useHeaders'
 import { useScrollPromise } from '@theme/useScrollPromise'
 import { setupSidebarItems } from '@theme/useSidebarItems'
 import { hasGlobalComponent } from '@vuepress/helper/client'
@@ -25,6 +26,7 @@ export default defineClientConfig({
 
   setup() {
     setupDarkMode()
+    setupHeaders()
     setupSidebarItems()
   },