From 40c350cd9071e71a4ee473270c42bac858041194 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Fri, 21 Feb 2025 17:30:40 +0800
Subject: [PATCH] refactor(theme-default): add useData and prefer useData

---
 .../src/client/components/VPHomeFeatures.vue  |  4 +-
 .../src/client/components/VPHomeHero.vue      | 11 +--
 .../src/client/components/VPNavbar.vue        |  4 +-
 .../src/client/components/VPNavbarBrand.vue   | 14 +---
 .../src/client/components/VPNavbarItems.vue   |  4 +-
 .../src/client/components/VPPageMeta.vue      |  4 +-
 .../src/client/components/VPPageNav.vue       |  4 +-
 .../components/VPToggleColorModeButton.vue    |  4 +-
 .../components/VPToggleSidebarButton.vue      |  4 +-
 .../src/client/composables/index.ts           |  2 +-
 .../src/client/composables/useContributors.ts | 12 +--
 .../src/client/composables/useDarkMode.ts     |  4 +-
 .../src/client/composables/useData.ts         | 77 +++++++++++++++++++
 .../src/client/composables/useEditLink.ts     | 11 +--
 .../src/client/composables/useHeaders.ts      | 10 +--
 .../src/client/composables/useLastUpdated.ts  | 11 +--
 .../src/client/composables/useNavbarConfig.ts |  4 +-
 .../src/client/composables/useNavbarRepo.ts   |  4 +-
 .../composables/useNavbarSelectLanguage.ts    | 15 +---
 .../src/client/composables/useRelatedLinks.ts | 12 +--
 .../src/client/composables/useSidebarItems.ts | 14 +---
 .../src/client/composables/useThemeData.ts    | 14 ----
 .../src/client/layouts/Layout.vue             | 12 ++-
 .../src/client/layouts/NotFound.vue           | 18 +++--
 24 files changed, 139 insertions(+), 134 deletions(-)
 create mode 100644 themes/theme-default/src/client/composables/useData.ts
 delete mode 100644 themes/theme-default/src/client/composables/useThemeData.ts

diff --git a/themes/theme-default/src/client/components/VPHomeFeatures.vue b/themes/theme-default/src/client/components/VPHomeFeatures.vue
index 9c5af30820..86828fd079 100644
--- a/themes/theme-default/src/client/components/VPHomeFeatures.vue
+++ b/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>
diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index 306f9875a3..14f79d4f03 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/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(() => {
diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index 74d149955f..5021ae5370 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/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')
diff --git a/themes/theme-default/src/client/components/VPNavbarBrand.vue b/themes/theme-default/src/client/components/VPNavbarBrand.vue
index 6b5daa91a8..a9844ad057 100644
--- a/themes/theme-default/src/client/components/VPNavbarBrand.vue
+++ b/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(
diff --git a/themes/theme-default/src/client/components/VPNavbarItems.vue b/themes/theme-default/src/client/components/VPNavbarItems.vue
index e9bd3f62a5..bbde2b7ed9 100644
--- a/themes/theme-default/src/client/components/VPNavbarItems.vue
+++ b/themes/theme-default/src/client/components/VPNavbarItems.vue
@@ -1,13 +1,14 @@
 <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()
@@ -15,7 +16,6 @@ const navbarRepo = useNavbarRepo()
 const isMobile = ref(false)
 
 const navbarLabel = computed(() => {
-  const themeLocale = useThemeLocaleData()
   return themeLocale.value.navbarLabel ?? 'site navigation'
 })
 
diff --git a/themes/theme-default/src/client/components/VPPageMeta.vue b/themes/theme-default/src/client/components/VPPageMeta.vue
index 26708b6d1c..486358d725 100644
--- a/themes/theme-default/src/client/components/VPPageMeta.vue
+++ b/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()
diff --git a/themes/theme-default/src/client/components/VPPageNav.vue b/themes/theme-default/src/client/components/VPPageNav.vue
index 8595d070ea..a03774486c 100644
--- a/themes/theme-default/src/client/components/VPPageNav.vue
+++ b/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()
diff --git a/themes/theme-default/src/client/components/VPToggleColorModeButton.vue b/themes/theme-default/src/client/components/VPToggleColorModeButton.vue
index 9819c42422..fadaa9c462 100644
--- a/themes/theme-default/src/client/components/VPToggleColorModeButton.vue
+++ b/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 => {
diff --git a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue b/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
index d586e2ad5f..50259cdb3a 100644
--- a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
+++ b/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>
diff --git a/themes/theme-default/src/client/composables/index.ts b/themes/theme-default/src/client/composables/index.ts
index 4af8884ea1..2397efefcc 100644
--- a/themes/theme-default/src/client/composables/index.ts
+++ b/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'
diff --git a/themes/theme-default/src/client/composables/useContributors.ts b/themes/theme-default/src/client/composables/useContributors.ts
index 925b262d50..c6b81b1898 100644
--- a/themes/theme-default/src/client/composables/useContributors.ts
+++ b/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 =
diff --git a/themes/theme-default/src/client/composables/useDarkMode.ts b/themes/theme-default/src/client/composables/useDarkMode.ts
index 80548d30c1..b0dede57d4 100644
--- a/themes/theme-default/src/client/composables/useDarkMode.ts
+++ b/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',
diff --git a/themes/theme-default/src/client/composables/useData.ts b/themes/theme-default/src/client/composables/useData.ts
new file mode 100644
index 0000000000..08dfc4234d
--- /dev/null
+++ b/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>(),
+  }
+}
diff --git a/themes/theme-default/src/client/composables/useEditLink.ts b/themes/theme-default/src/client/composables/useEditLink.ts
index 5a8c6868c3..f4a2ce6aef 100644
--- a/themes/theme-default/src/client/composables/useEditLink.ts
+++ b/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 =
diff --git a/themes/theme-default/src/client/composables/useHeaders.ts b/themes/theme-default/src/client/composables/useHeaders.ts
index 12e834d7db..1dd029aa8a 100644
--- a/themes/theme-default/src/client/composables/useHeaders.ts
+++ b/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,
   )
diff --git a/themes/theme-default/src/client/composables/useLastUpdated.ts b/themes/theme-default/src/client/composables/useLastUpdated.ts
index 860845715a..ce4ddeaab1 100644
--- a/themes/theme-default/src/client/composables/useLastUpdated.ts
+++ b/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 =
diff --git a/themes/theme-default/src/client/composables/useNavbarConfig.ts b/themes/theme-default/src/client/composables/useNavbarConfig.ts
index 979e652324..86c44b37c9 100644
--- a/themes/theme-default/src/client/composables/useNavbarConfig.ts
+++ b/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
diff --git a/themes/theme-default/src/client/composables/useNavbarRepo.ts b/themes/theme-default/src/client/composables/useNavbarRepo.ts
index c366251125..9a84bfcedb 100644
--- a/themes/theme-default/src/client/composables/useNavbarRepo.ts
+++ b/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(() =>
diff --git a/themes/theme-default/src/client/composables/useNavbarSelectLanguage.ts b/themes/theme-default/src/client/composables/useNavbarSelectLanguage.ts
index 0e63fb181d..32e34200e8 100644
--- a/themes/theme-default/src/client/composables/useNavbarSelectLanguage.ts
+++ b/themes/theme-default/src/client/composables/useNavbarSelectLanguage.ts
@@ -1,13 +1,8 @@
-import { useThemeData, useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import { useRoutePaths } from '@vuepress/helper/client'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import {
-  useRoute,
-  useRouteLocale,
-  useSiteData,
-  useSiteLocaleData,
-} from 'vuepress/client'
+import { useRoute } from 'vuepress/client'
 import type { NavbarItem } from '../typings.js'
 
 /**
@@ -16,11 +11,7 @@ import type { NavbarItem } from '../typings.js'
 export const useNavbarSelectLanguage = (): ComputedRef<NavbarItem[]> => {
   const route = useRoute()
   const routePaths = useRoutePaths()
-  const routeLocale = useRouteLocale()
-  const site = useSiteData()
-  const siteLocale = useSiteLocaleData()
-  const theme = useThemeData()
-  const themeLocale = useThemeLocaleData()
+  const { routeLocale, site, siteLocale, theme, themeLocale } = useData()
 
   return computed<NavbarItem[]>(() => {
     const localePaths = Object.keys(site.value.locales)
diff --git a/themes/theme-default/src/client/composables/useRelatedLinks.ts b/themes/theme-default/src/client/composables/useRelatedLinks.ts
index 3f37741097..f7fb97fa33 100644
--- a/themes/theme-default/src/client/composables/useRelatedLinks.ts
+++ b/themes/theme-default/src/client/composables/useRelatedLinks.ts
@@ -1,14 +1,11 @@
 import { resolveAutoLink } from '@theme/resolveAutoLink'
+import { useData } from '@theme/useData'
 import { useSidebarItems } from '@theme/useSidebarItems'
-import { useThemeLocaleData } from '@theme/useThemeData'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import { resolveRoute, usePageFrontmatter, useRoute } from 'vuepress/client'
+import { resolveRoute, useRoute } from 'vuepress/client'
 import { isPlainObject, isString } from 'vuepress/shared'
-import type {
-  AutoLinkOptions,
-  DefaultThemeNormalPageFrontmatter,
-} from '../../shared/index.js'
+import type { AutoLinkOptions } from '../../shared/index.js'
 import type { SidebarItem } from '../typings.js'
 
 const resolveFromFrontmatterConfig = (
@@ -105,8 +102,7 @@ interface RelatedLinks {
 }
 
 export const useRelatedLinks = (): RelatedLinks => {
-  const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
-  const themeLocale = useThemeLocaleData()
+  const { frontmatter, themeLocale } = useData()
   const sidebarItems = useSidebarItems()
   const route = useRoute()
 
diff --git a/themes/theme-default/src/client/composables/useSidebarItems.ts b/themes/theme-default/src/client/composables/useSidebarItems.ts
index 57c88799ec..73b977cef3 100644
--- a/themes/theme-default/src/client/composables/useSidebarItems.ts
+++ b/themes/theme-default/src/client/composables/useSidebarItems.ts
@@ -1,16 +1,11 @@
 import { resolveAutoLink } from '@theme/resolveAutoLink'
 import { resolvePrefix } from '@theme/resolvePrefix'
-import { useThemeLocaleData } from '@theme/useThemeData'
+import { useData } from '@theme/useData'
 import { isLinkRelative, keys, startsWith } from '@vuepress/helper/client'
 import type { ComputedRef, InjectionKey } from 'vue'
 import { computed, inject, provide } from 'vue'
 import type { PageData, PageHeader } from 'vuepress/client'
-import {
-  usePageData,
-  usePageFrontmatter,
-  useRoute,
-  useRouteLocale,
-} from 'vuepress/client'
+import { useRoute } from 'vuepress/client'
 import { isPlainObject, isString } from 'vuepress/shared'
 import type {
   DefaultThemeHomePageFrontmatter,
@@ -185,13 +180,10 @@ export const resolveSidebarItems = (
  * Create sidebar items ref and provide as global computed in setup
  */
 export const setupSidebarItems = (): void => {
-  const themeLocale = useThemeLocaleData()
-  const frontmatter = usePageFrontmatter<
+  const { frontmatter, page, routeLocale, themeLocale } = useData<
     DefaultThemeHomePageFrontmatter | DefaultThemeNormalPageFrontmatter
   >()
-  const page = usePageData()
   const route = useRoute()
-  const routeLocale = useRouteLocale()
 
   const sidebarConfig = computed<SidebarOptions | false>(() =>
     frontmatter.value.home
diff --git a/themes/theme-default/src/client/composables/useThemeData.ts b/themes/theme-default/src/client/composables/useThemeData.ts
deleted file mode 100644
index c061cc61ed..0000000000
--- a/themes/theme-default/src/client/composables/useThemeData.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {
-  ThemeDataRef,
-  ThemeLocaleDataRef,
-} from '@vuepress/plugin-theme-data/client'
-import {
-  useThemeData as _useThemeData,
-  useThemeLocaleData as _useThemeLocaleData,
-} from '@vuepress/plugin-theme-data/client'
-import type { DefaultThemeData } from '../../shared/index.js'
-
-export const useThemeData = (): ThemeDataRef<DefaultThemeData> =>
-  _useThemeData<DefaultThemeData>()
-export const useThemeLocaleData = (): ThemeLocaleDataRef<DefaultThemeData> =>
-  _useThemeLocaleData<DefaultThemeData>()
diff --git a/themes/theme-default/src/client/layouts/Layout.vue b/themes/theme-default/src/client/layouts/Layout.vue
index e97fe9f1e5..054ca68766 100644
--- a/themes/theme-default/src/client/layouts/Layout.vue
+++ b/themes/theme-default/src/client/layouts/Layout.vue
@@ -3,13 +3,12 @@ import VPHome from '@theme/VPHome.vue'
 import VPNavbar from '@theme/VPNavbar.vue'
 import VPPage from '@theme/VPPage.vue'
 import VPSidebar from '@theme/VPSidebar.vue'
+import { useData } from '@theme/useData'
 import { useScrollPromise } from '@theme/useScrollPromise'
 import { useSidebarItems } from '@theme/useSidebarItems'
-import { useThemeLocaleData } from '@theme/useThemeData'
 import type { VNode } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { usePageData, usePageFrontmatter, useRouter } from 'vuepress/client'
-import type { DefaultThemePageFrontmatter } from '../../shared/index.js'
+import { useRouter } from 'vuepress/client'
 
 defineSlots<{
   'navbar'?: (props: Record<never, never>) => VNode | VNode[] | null
@@ -27,9 +26,8 @@ defineSlots<{
   ) => VNode | VNode[] | null
 }>()
 
-const page = usePageData()
-const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
-const themeLocale = useThemeLocaleData()
+const { frontmatter, page, themeLocale } = useData()
+const router = useRouter()
 
 // navbar
 const shouldShowNavbar = computed(
@@ -81,8 +79,8 @@ const containerClass = computed(() => [
 
 // close sidebar after navigation
 let unregisterRouterHook: () => void
+
 onMounted(() => {
-  const router = useRouter()
   unregisterRouterHook = router.afterEach(() => {
     toggleSidebar(false)
   })
diff --git a/themes/theme-default/src/client/layouts/NotFound.vue b/themes/theme-default/src/client/layouts/NotFound.vue
index 6dc83b308c..d3ca111046 100644
--- a/themes/theme-default/src/client/layouts/NotFound.vue
+++ b/themes/theme-default/src/client/layouts/NotFound.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { useThemeLocaleData } from '@theme/useThemeData'
-import { RouteLink, useRouteLocale } from 'vuepress/client'
+import { useData } from '@theme/useData'
+import { computed } from 'vue'
+import { RouteLink } from 'vuepress/client'
 
-const routeLocale = useRouteLocale()
-const themeLocale = useThemeLocaleData()
+const { routeLocale, themeLocale } = useData()
+
+const messages = computed(() => themeLocale.value.notFound ?? ['Not Found'])
 
-const messages = themeLocale.value.notFound ?? ['Not Found']
 const getMsg = (): string =>
-  messages[Math.floor(Math.random() * messages.length)]
-const homeLink = themeLocale.value.home ?? routeLocale.value
-const homeText = themeLocale.value.backToHome ?? 'Back to home'
+  messages.value[Math.floor(Math.random() * messages.value.length)]
+
+const homeLink = computed(() => themeLocale.value.home ?? routeLocale.value)
+const homeText = computed(() => themeLocale.value.backToHome ?? 'Back to home')
 </script>
 
 <template>