chore(theme-default): add useData and prefer useData

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { useData } from '@theme/useData'
 import { computed } from 'vue'
-import { usePageFrontmatter } from 'vuepress/client'
 import type { DefaultThemeHomePageFrontmatter } from '../../shared/index.js'
 
-const frontmatter = usePageFrontmatter<DefaultThemeHomePageFrontmatter>()
+const { frontmatter } = useData<DefaultThemeHomePageFrontmatter>()
 
 const features = computed(() => frontmatter.value.features ?? [])
 </script>

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

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import VPAutoLink from '@theme/VPAutoLink.vue'
 import { useDarkMode } from '@theme/useDarkMode'
+import { useData } from '@theme/useData'
 import type { FunctionalComponent } from 'vue'
 import { computed, h } from 'vue'
-import {
-  ClientOnly,
-  usePageFrontmatter,
-  useSiteLocaleData,
-  withBase,
-} from 'vuepress/client'
+import { ClientOnly, withBase } from 'vuepress/client'
 import type { DefaultThemeHomePageFrontmatter } from '../../shared/index.js'
 
-const frontmatter = usePageFrontmatter<DefaultThemeHomePageFrontmatter>()
-const siteLocale = useSiteLocaleData()
+const { frontmatter, siteLocale } = useData<DefaultThemeHomePageFrontmatter>()
 const isDarkMode = useDarkMode()
 
 const heroText = computed(() => {

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

@@ -3,7 +3,7 @@ import VPNavbarBrand from '@theme/VPNavbarBrand.vue'
 import VPNavbarItems from '@theme/VPNavbarItems.vue'
 import VPToggleColorModeButton from '@theme/VPToggleColorModeButton.vue'
 import VPToggleSidebarButton from '@theme/VPToggleSidebarButton.vue'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import { DeviceType, useUpdateDeviceStatus } from '@theme/useUpdateDeviceStatus'
 import { hasGlobalComponent } from '@vuepress/helper/client'
 import type { VNode } from 'vue'
@@ -22,7 +22,7 @@ const SearchBox = hasGlobalComponent('SearchBox')
   ? resolveComponent('SearchBox')
   : (): null => null
 
-const themeLocale = useThemeLocaleData()
+const { themeLocale } = useData()
 
 const navbar = useTemplateRef<HTMLElement | null>('navbar')
 const navbarBrand = useTemplateRef<HTMLElement | null>('navbar-brand')

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

@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { useDarkMode } from '@theme/useDarkMode'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { FunctionalComponent } from 'vue'
 import { computed, h } from 'vue'
-import {
-  ClientOnly,
-  RouteLink,
-  useRouteLocale,
-  useSiteLocaleData,
-  withBase,
-} from 'vuepress/client'
+import { ClientOnly, RouteLink, withBase } from 'vuepress/client'
 
-const routeLocale = useRouteLocale()
-const siteLocale = useSiteLocaleData()
-const themeLocale = useThemeLocaleData()
+const { routeLocale, siteLocale, themeLocale } = useData()
 const isDarkMode = useDarkMode()
 
 const navbarBrandLink = computed(

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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import VPAutoLink from '@theme/VPAutoLink.vue'
 import VPNavbarDropdown from '@theme/VPNavbarDropdown.vue'
+import { useData } from '@theme/useData'
 import { useNavbarConfig } from '@theme/useNavbarConfig'
 import { useNavbarRepo } from '@theme/useNavbarRepo'
 import { useNavbarSelectLanguage } from '@theme/useNavbarSelectLanguage'
-import { useThemeLocaleData } from '@theme/useThemeData'
 import { DeviceType, useUpdateDeviceStatus } from '@theme/useUpdateDeviceStatus'
 import { computed, ref } from 'vue'
 
+const { themeLocale } = useData()
 const navbarConfig = useNavbarConfig()
 const navbarSelectLanguage = useNavbarSelectLanguage()
 const navbarRepo = useNavbarRepo()
 
 const isMobile = ref(false)
 
 const navbarLabel = computed(() => {
-  const themeLocale = useThemeLocaleData()
   return themeLocale.value.navbarLabel ?? 'site navigation'
 })
 

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

@@ -2,11 +2,11 @@
 import VPAutoLink from '@theme/VPAutoLink.vue'
 import VPEditIcon from '@theme/VPEditIcon.vue'
 import { useContributors } from '@theme/useContributors'
+import { useData } from '@theme/useData'
 import { useEditLink } from '@theme/useEditLink'
 import { useLastUpdated } from '@theme/useLastUpdated'
-import { useThemeLocaleData } from '@theme/useThemeData'
 
-const themeLocale = useThemeLocaleData()
+const { themeLocale } = useData()
 const editLink = useEditLink()
 const lastUpdated = useLastUpdated()
 const contributors = useContributors()

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import VPAutoLink from '@theme/VPAutoLink.vue'
+import { useData } from '@theme/useData'
 import { useNavigate } from '@theme/useNavigate'
 import { useRelatedLinks } from '@theme/useRelatedLinks'
-import { useThemeLocaleData } from '@theme/useThemeData'
 import { useEventListener } from '@vueuse/core'
 import { computed } from 'vue'
 
-const themeLocale = useThemeLocaleData()
+const { themeLocale } = useData()
 const navigate = useNavigate()
 
 const { prevLink, nextLink } = useRelatedLinks()

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

@@ -2,9 +2,9 @@
 import VPDarkIcon from '@theme/VPDarkIcon.vue'
 import VPLightIcon from '@theme/VPLightIcon.vue'
 import { useDarkMode } from '@theme/useDarkMode'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 
-const themeLocale = useThemeLocaleData()
+const { themeLocale } = useData()
 const isDarkMode = useDarkMode()
 
 const toggleColorMode = (): void => {

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 
 defineEmits<{ toggle: [] }>()
 
-const themeLocale = useThemeLocaleData()
+const { themeLocale } = useData()
 </script>
 
 <template>

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

@@ -1,5 +1,6 @@
 export * from './useContributors.js'
 export * from './useDarkMode.js'
+export * from './useData.js'
 export * from './useEditLink.js'
 export * from './useLastUpdated.js'
 export * from './useNavigate.js'
@@ -9,5 +10,4 @@ export * from './useNavbarSelectLanguage.js'
 export * from './useRelatedLinks.js'
 export * from './useScrollPromise.js'
 export * from './useSidebarItems.js'
-export * from './useThemeData.js'
 export * from './useUpdateDeviceStatus.js'

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

@@ -1,18 +1,12 @@
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import { usePageData, usePageFrontmatter } from 'vuepress/client'
-import type {
-  DefaultThemeNormalPageFrontmatter,
-  DefaultThemePageData,
-} from '../../shared/index.js'
+import type { DefaultThemePageData } from '../../shared/index.js'
 
 export const useContributors = (): ComputedRef<
   Exclude<DefaultThemePageData['git'], undefined>['contributors'] | null
 > => {
-  const themeLocale = useThemeLocaleData()
-  const page = usePageData<DefaultThemePageData>()
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
+  const { themeLocale, page, frontmatter } = useData()
 
   return computed(() => {
     const showContributors =

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

@@ -1,4 +1,4 @@
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import { usePreferredDark, useStorage, watchImmediate } from '@vueuse/core'
 import type { InjectionKey, WritableComputedRef } from 'vue'
 import { computed, inject, onMounted, onUnmounted, provide } from 'vue'
@@ -42,7 +42,7 @@ export const useDarkMode = (): DarkModeRef => {
  * Create dark mode ref and provide as global computed in setup
  */
 export const setupDarkMode = (): void => {
-  const themeLocale = useThemeLocaleData()
+  const { themeLocale } = useData()
   const isDarkPreferred = usePreferredDark()
   const darkStorage = useStorage(
     'vuepress-color-scheme',

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

@@ -0,0 +1,77 @@
+import type {
+  ThemeDataRef,
+  ThemeLocaleDataRef,
+} from '@vuepress/plugin-theme-data/client'
+import {
+  useThemeData,
+  useThemeLocaleData,
+} from '@vuepress/plugin-theme-data/client'
+import type {
+  ClientData,
+  PageDataRef,
+  PageFrontmatterRef,
+  PageLangRef,
+  SiteDataRef,
+  SiteLocaleDataRef,
+} from 'vuepress/client'
+import { useClientData } from 'vuepress/client'
+import type {
+  DefaultThemeData,
+  DefaultThemeNormalPageFrontmatter,
+  DefaultThemePageData,
+} from '../../shared/index.js'
+
+export interface Data<
+  PageFrontmatter extends Record<
+    string,
+    unknown
+  > = DefaultThemeNormalPageFrontmatter,
+  PageData extends Record<string, unknown> = DefaultThemePageData,
+> extends Pick<
+    ClientData,
+    | 'layouts'
+    | 'pageComponent'
+    | 'pageHead'
+    | 'pageHeadTitle'
+    | 'pageLayout'
+    | 'redirects'
+    | 'routeLocale'
+    | 'routePath'
+    | 'routes'
+  > {
+  page: PageDataRef<PageData>
+  frontmatter: PageFrontmatterRef<PageFrontmatter>
+  lang: PageLangRef
+  site: SiteDataRef
+  siteLocale: SiteLocaleDataRef
+  theme: ThemeDataRef<DefaultThemeData>
+  themeLocale: ThemeLocaleDataRef<DefaultThemeData>
+}
+
+export const useData = <
+  PageFrontmatter extends Record<
+    string,
+    unknown
+  > = DefaultThemeNormalPageFrontmatter,
+  PageData extends Record<string, unknown> = DefaultThemePageData,
+>(): Data<PageFrontmatter, PageData> => {
+  const {
+    pageData,
+    pageFrontmatter,
+    pageLang,
+    siteData,
+    siteLocaleData,
+    ...rest
+  } = useClientData()
+
+  return {
+    ...rest,
+    page: pageData as PageDataRef<PageData>,
+    frontmatter: pageFrontmatter as PageFrontmatterRef<PageFrontmatter>,
+    lang: pageLang,
+    site: siteData,
+    siteLocale: siteLocaleData,
+    theme: useThemeData<DefaultThemeData>(),
+    themeLocale: useThemeLocaleData<DefaultThemeData>(),
+  }
+}

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

@@ -1,18 +1,11 @@
 import { resolveEditLink } from '@theme/resolveEditLink'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { AutoLinkConfig } from 'vuepress/client'
-import { usePageData, usePageFrontmatter } from 'vuepress/client'
-import type {
-  DefaultThemeNormalPageFrontmatter,
-  DefaultThemePageData,
-} from '../../shared/index.js'
 
 export const useEditLink = (): ComputedRef<AutoLinkConfig | null> => {
-  const themeLocale = useThemeLocaleData()
-  const page = usePageData<DefaultThemePageData>()
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
+  const { frontmatter, page, themeLocale } = useData()
 
   return computed(() => {
     const showEditLink =

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

@@ -1,11 +1,9 @@
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { HeaderItem } from '@vuepress/helper/client'
 import { getHeaders } from '@vuepress/helper/client'
 import { injectLocal, provideLocal, watchImmediate } from '@vueuse/core'
 import type { InjectionKey, Ref } from 'vue'
 import { computed, onMounted, ref } from 'vue'
-import { usePageFrontmatter, useRoutePath } from 'vuepress/client'
-import type { DefaultThemeNormalPageFrontmatter } from '../../shared/index.js'
 
 export type HeadersRef = Ref<HeaderItem[]>
 
@@ -24,11 +22,9 @@ export const useHeaders = (): HeadersRef => {
 }
 
 export const setupHeaders = (): void => {
-  const headersRef: HeadersRef = ref([])
+  const { frontmatter, routePath, themeLocale } = useData()
 
-  const routePath = useRoutePath()
-  const themeLocale = useThemeLocaleData()
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
+  const headersRef: HeadersRef = ref([])
   const levels = computed(
     () => frontmatter.value.sidebarDepth ?? themeLocale.value.sidebarDepth ?? 2,
   )

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

@@ -1,16 +1,9 @@
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import { usePageData, usePageFrontmatter } from 'vuepress/client'
-import type {
-  DefaultThemeNormalPageFrontmatter,
-  DefaultThemePageData,
-} from '../../shared/index.js'
 
 export const useLastUpdated = (): ComputedRef<string | null> => {
-  const themeLocale = useThemeLocaleData()
-  const page = usePageData<DefaultThemePageData>()
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
+  const { frontmatter, page, themeLocale } = useData()
 
   return computed(() => {
     const showLastUpdated =

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

@@ -1,6 +1,6 @@
 import { resolveAutoLink } from '@theme/resolveAutoLink'
 import { resolvePrefix } from '@theme/resolvePrefix'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import { isLinkRelative } from '@vuepress/helper/client'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
@@ -37,7 +37,7 @@ const resolveNavbarItem = (
 }
 
 export const useNavbarConfig = (): ComputedRef<NavbarItem[]> => {
-  const themeLocale = useThemeLocaleData()
+  const { themeLocale } = useData()
 
   return computed(() =>
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

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

@@ -1,5 +1,5 @@
 import { resolveRepoType } from '@theme/resolveRepoType'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import { isLinkHttp } from 'vuepress/shared'
@@ -9,7 +9,7 @@ import type { NavbarItem } from '../typings.js'
  * Get navbar config of repository link
  */
 export const useNavbarRepo = (): ComputedRef<NavbarItem[]> => {
-  const themeLocale = useThemeLocaleData()
+  const { themeLocale } = useData()
 
   const repo = computed(() => themeLocale.value.repo)
   const repoType = computed(() =>