From 6673237de4de33ef812752959614119c1e85d38a Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Mon, 14 Apr 2025 08:30:26 +0800
Subject: [PATCH 1/3] feat(client)!: shorten data keys

---
 .../.vuepress/theme/client/layouts/Layout.vue |   6 +-
 packages/client/src/app.ts                    |   4 +-
 packages/client/src/components/AutoLink.ts    |   6 +-
 packages/client/src/components/Content.ts     |   5 +-
 packages/client/src/composables/clientData.ts |  24 -----
 .../client/src/composables/clientDataUtils.ts |  48 ---------
 packages/client/src/composables/data.ts       |  29 +++++
 packages/client/src/composables/dataUtils.ts  | 100 ++++++++++++++++++
 packages/client/src/composables/index.ts      |   4 +-
 packages/client/src/devtools/constants.ts     |  12 +--
 packages/client/src/devtools/setupDevtools.ts |  24 ++---
 packages/client/src/devtools/types.ts         |   8 +-
 packages/client/src/resolvers.ts              |  14 ++-
 packages/client/src/setupGlobalComputed.ts    |  88 ++++++++-------
 packages/client/src/setupUpdateHead.ts        |   9 +-
 packages/client/src/types/clientConfig.ts     |   2 +-
 .../src/types/{clientData.ts => data.ts}      |  35 +++---
 packages/client/src/types/index.ts            |   4 +-
 18 files changed, 242 insertions(+), 180 deletions(-)
 delete mode 100644 packages/client/src/composables/clientData.ts
 delete mode 100644 packages/client/src/composables/clientDataUtils.ts
 create mode 100644 packages/client/src/composables/data.ts
 create mode 100644 packages/client/src/composables/dataUtils.ts
 rename packages/client/src/types/{clientData.ts => data.ts} (82%)

diff --git a/e2e/docs/.vuepress/theme/client/layouts/Layout.vue b/e2e/docs/.vuepress/theme/client/layouts/Layout.vue
index 07519db48d..93c0fb9f71 100644
--- a/e2e/docs/.vuepress/theme/client/layouts/Layout.vue
+++ b/e2e/docs/.vuepress/theme/client/layouts/Layout.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { Content, useSiteData } from 'vuepress/client'
-
-const siteData = useSiteData()
+import { Content } from 'vuepress/client'
 </script>
 
 <template>
@@ -9,7 +7,7 @@ const siteData = useSiteData()
     <nav class="e2e-theme-nav">
       <div>Languages</div>
       <ul>
-        <li v-for="[key, value] in Object.entries(siteData.locales)" :key="key">
+        <li v-for="[key, value] in Object.entries($site.locales)" :key="key">
           <RouterLink :to="key">{{ value.lang }}</RouterLink>
         </li>
       </ul>
diff --git a/packages/client/src/app.ts b/packages/client/src/app.ts
index fcacfbebb5..61ef7e1c19 100644
--- a/packages/client/src/app.ts
+++ b/packages/client/src/app.ts
@@ -1,6 +1,6 @@
 import { clientConfigs } from '@internal/clientConfigs'
 import { createApp, createSSRApp, h } from 'vue'
-import { usePageLayout } from './composables/index.js'
+import { useData } from './composables/index.js'
 import { siteData } from './internal/siteData.js'
 import { createVueRouter } from './router/createVueRouter.js'
 import { setupGlobalComponents } from './setupGlobalComponents.js'
@@ -35,7 +35,7 @@ export const createVueApp: CreateVueAppFunction = async () => {
       )
 
       // get page layout
-      const pageLayout = usePageLayout()
+      const { pageLayout } = useData()
 
       // render layout and root components
       return () => [h(pageLayout.value), clientRootComponents]
diff --git a/packages/client/src/components/AutoLink.ts b/packages/client/src/components/AutoLink.ts
index 948a39e066..9414a6c01c 100644
--- a/packages/client/src/components/AutoLink.ts
+++ b/packages/client/src/components/AutoLink.ts
@@ -2,7 +2,7 @@ import { isLinkWithProtocol } from '@vuepress/shared'
 import type { PropType, SlotsType, VNode } from 'vue'
 import { computed, defineComponent, h, toRef } from 'vue'
 import { useRoute } from 'vue-router'
-import { useSiteData } from '../composables/index.js'
+import { useSite } from '../composables/index.js'
 import { RouteLink } from './RouteLink.js'
 
 export interface AutoLinkConfig {
@@ -67,7 +67,7 @@ export const AutoLink = defineComponent({
   setup(props, { slots }) {
     const config = toRef(props, 'config')
     const route = useRoute()
-    const siteData = useSiteData()
+    const site = useSite()
 
     // If the link has non-http protocol
     const withProtocol = computed(() => isLinkWithProtocol(config.value.link))
@@ -102,7 +102,7 @@ export const AutoLink = defineComponent({
       // Should not be active in `exact` mode
       if (config.value.exact) return false
 
-      const localePaths = Object.keys(siteData.value.locales)
+      const localePaths = Object.keys(site.value.locales)
 
       return localePaths.length
         ? // Check all the locales
diff --git a/packages/client/src/components/Content.ts b/packages/client/src/components/Content.ts
index c4a6482da9..e4b0ea6571 100644
--- a/packages/client/src/components/Content.ts
+++ b/packages/client/src/components/Content.ts
@@ -1,5 +1,5 @@
 import { computed, defineAsyncComponent, defineComponent, h, watch } from 'vue'
-import { usePageComponent, usePageFrontmatter } from '../composables/index.js'
+import { useData } from '../composables/index.js'
 import { contentUpdatedCallbacks } from '../internal/contentUpdatedCallbacks'
 import { resolveRoute } from '../router/index.js'
 import type { ContentUpdatedReason } from '../types/index.js'
@@ -28,7 +28,7 @@ export const Content = defineComponent({
   },
 
   setup(props) {
-    const pageComponent = usePageComponent()
+    const { frontmatter, pageComponent } = useData()
     const ContentComponent = computed(() => {
       if (!props.path) return pageComponent.value
       const route = resolveRoute(props.path)
@@ -37,7 +37,6 @@ export const Content = defineComponent({
       )
     })
 
-    const frontmatter = usePageFrontmatter()
     watch(
       frontmatter,
       () => {
diff --git a/packages/client/src/composables/clientData.ts b/packages/client/src/composables/clientData.ts
deleted file mode 100644
index b5db09a92e..0000000000
--- a/packages/client/src/composables/clientData.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { InjectionKey } from 'vue'
-import { inject } from 'vue'
-import type { ClientData } from '../types/index.js'
-
-/**
- * Injection key for client data
- */
-export const clientDataSymbol: InjectionKey<ClientData> = Symbol(
-  __VUEPRESS_DEV__ ? 'clientData' : '',
-)
-
-/**
- * Returns client data
- */
-export const useClientData = <
-  Frontmatter extends Record<string, unknown> = Record<string, unknown>,
-  Data extends Record<string, unknown> = Record<string, unknown>,
->(): ClientData<Frontmatter, Data> => {
-  const clientData = inject<ClientData<Frontmatter, Data>>(clientDataSymbol)
-  if (!clientData) {
-    throw new Error('useClientData() is called without provider.')
-  }
-  return clientData
-}
diff --git a/packages/client/src/composables/clientDataUtils.ts b/packages/client/src/composables/clientDataUtils.ts
deleted file mode 100644
index 259abd464c..0000000000
--- a/packages/client/src/composables/clientDataUtils.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type {
-  LayoutsRef,
-  PageComponentRef,
-  PageDataRef,
-  PageFrontmatterRef,
-  PageHeadRef,
-  PageLangRef,
-  PageLayoutRef,
-  RedirectsRef,
-  RouteLocaleRef,
-  RoutePathRef,
-  RoutesRef,
-  SiteDataRef,
-  SiteLocaleDataRef,
-} from '../types/index.js'
-import { useClientData } from './clientData.js'
-
-export const useLayouts = (): LayoutsRef => useClientData().layouts
-
-export const usePageComponent = (): PageComponentRef =>
-  useClientData().pageComponent
-
-export const usePageData = <
-  T extends Record<string, unknown> = Record<string, unknown>,
->(): PageDataRef<T> => useClientData<Record<string, unknown>, T>().pageData
-
-export const usePageFrontmatter = <
-  T extends Record<string, unknown> = Record<string, unknown>,
->(): PageFrontmatterRef<T> => useClientData<T>().pageFrontmatter
-
-export const usePageHead = (): PageHeadRef => useClientData().pageHead
-
-export const usePageLang = (): PageLangRef => useClientData().pageLang
-
-export const usePageLayout = (): PageLayoutRef => useClientData().pageLayout
-
-export const useRedirects = (): RedirectsRef => useClientData().redirects
-
-export const useRouteLocale = (): RouteLocaleRef => useClientData().routeLocale
-
-export const useRoutePath = (): RoutePathRef => useClientData().routePath
-
-export const useRoutes = (): RoutesRef => useClientData().routes
-
-export const useSiteData = (): SiteDataRef => useClientData().siteData
-
-export const useSiteLocaleData = (): SiteLocaleDataRef =>
-  useClientData().siteLocaleData
diff --git a/packages/client/src/composables/data.ts b/packages/client/src/composables/data.ts
new file mode 100644
index 0000000000..e6655d7c72
--- /dev/null
+++ b/packages/client/src/composables/data.ts
@@ -0,0 +1,29 @@
+import type { InjectionKey } from 'vue'
+import { inject } from 'vue'
+import type { Data } from '../types/index.js'
+
+/**
+ * Injection key for vuepress data
+ */
+export const dataSymbol: InjectionKey<Data> = Symbol(
+  __VUEPRESS_DEV__ ? 'data' : '',
+)
+
+/**
+ * Returns VuePress data
+ */
+export const useData = <
+  Frontmatter extends Record<string, unknown> = Record<string, unknown>,
+  Page extends Record<string, unknown> = Record<string, unknown>,
+>(): Data<Frontmatter, Page> => {
+  const data = inject<Data<Frontmatter, Page>>(dataSymbol)
+  if (!data) {
+    throw new Error('useData() is called without provider.')
+  }
+  return data
+}
+
+// FIXME: remove this in stable
+
+/** @deprecated using `useData` instead */
+export const useClientData = useData
diff --git a/packages/client/src/composables/dataUtils.ts b/packages/client/src/composables/dataUtils.ts
new file mode 100644
index 0000000000..b55ee7f96d
--- /dev/null
+++ b/packages/client/src/composables/dataUtils.ts
@@ -0,0 +1,100 @@
+import type {
+  LayoutsRef,
+  PageComponentRef,
+  PageDataRef,
+  PageFrontmatterRef,
+  PageHeadRef,
+  PageLangRef,
+  PageLayoutRef,
+  RedirectsRef,
+  RouteLocaleRef,
+  RoutePathRef,
+  RoutesRef,
+  SiteDataRef,
+  SiteLocaleDataRef,
+} from '../types/index.js'
+import { useData } from './data.js'
+
+// page related
+
+/**
+ * Get page data
+ */
+export const usePage = <
+  T extends Record<string, unknown> = Record<string, unknown>,
+>(): PageDataRef<T> => useData<Record<string, unknown>, T>().page
+/**
+ * Get page frontmatter
+ */
+export const useFrontmatter = <
+  T extends Record<string, unknown> = Record<string, unknown>,
+>(): PageFrontmatterRef<T> => useData<T>().frontmatter
+/**
+ * Get page head
+ */
+export const useHead = (): PageHeadRef => useData().head
+/**
+ * Get page lang
+ */
+export const useLang = (): PageLangRef => useData().lang
+
+// route related
+
+/**
+ * Get routes map
+ */
+export const useRoutes = (): RoutesRef => useData().routes
+/**
+ * Get redirect records
+ */
+export const useRedirects = (): RedirectsRef => useData().redirects
+
+/**
+ * Get route locale
+ */
+export const useRouteLocale = (): RouteLocaleRef => useData().routeLocale
+/**
+ * Get route path
+ */
+export const useRoutePath = (): RoutePathRef => useData().routePath
+
+// site related
+/**
+ * Get site data
+ */
+export const useSite = (): SiteDataRef => useData().site
+/**
+ * Get site locale data
+ */
+export const useSiteLocale = (): SiteLocaleDataRef => useData().siteLocale
+
+// internal composables before `useData` was introduced, which are never expected to be called outside of vuePress/client
+// these are marked deprecated and kept for backward compatibility for now
+// FIXME: remove these in stable
+
+/** @deprecated use useData().pageComponent instead */
+export const usePageComponent = (): PageComponentRef => useData().pageComponent
+/** @deprecated use useData().pageLayout instead */
+export const usePageLayout = (): PageLayoutRef => useData().pageLayout
+/** @deprecated use useData().layouts instead */
+export const useLayouts = (): LayoutsRef => useData().layouts
+
+// original long composable names
+// these are kept for backward compatibility, and might not need to implicitly marked as deprecated
+
+/** Note: suggest using `usePage` instead */
+export const usePageData = <
+  T extends Record<string, unknown> = Record<string, unknown>,
+>(): PageDataRef<T> => useData<Record<string, unknown>, T>().page
+/** Note: suggest using `useFrontmatter` instead */
+export const usePageFrontmatter = <
+  T extends Record<string, unknown> = Record<string, unknown>,
+>(): PageFrontmatterRef<T> => useData<T>().frontmatter
+/** Note: suggest using `useHead` instead */
+export const usePageHead = (): PageHeadRef => useData().head
+/** Note: suggest using `useLang` instead */
+export const usePageLang = (): PageLangRef => useData().lang
+/** Note: suggest using `useSite` instead */
+export const useSiteData = (): SiteDataRef => useData().site
+/** Note: suggest using `useSiteLocale` instead */
+export const useSiteLocaleData = (): SiteLocaleDataRef => useData().siteLocale
diff --git a/packages/client/src/composables/index.ts b/packages/client/src/composables/index.ts
index b2a3e5ad54..e39aa80141 100644
--- a/packages/client/src/composables/index.ts
+++ b/packages/client/src/composables/index.ts
@@ -1,4 +1,4 @@
-export * from './clientData.js'
-export * from './clientDataUtils.js'
+export * from './data.js'
+export * from './dataUtils.js'
 export * from './onContentUpdated.js'
 export * from './updateHead.js'
diff --git a/packages/client/src/devtools/constants.ts b/packages/client/src/devtools/constants.ts
index 4e6cc168ff..fd9b262d2a 100644
--- a/packages/client/src/devtools/constants.ts
+++ b/packages/client/src/devtools/constants.ts
@@ -17,7 +17,7 @@ const INSPECTOR_NODE_INTERNAL = {
 const INSPECTOR_NODE_SITE = {
   id: 'SITE',
   label: 'Site',
-  keys: ['siteData', 'siteLocaleData'],
+  keys: ['site', 'siteLocale'],
 } as const satisfies InspectorNodeConfig
 
 const INSPECTOR_NODE_ROUTE = {
@@ -30,11 +30,11 @@ const INSPECTOR_NODE_PAGE = {
   id: 'PAGE',
   label: 'Page',
   keys: [
-    'pageData',
-    'pageFrontmatter',
-    'pageLang',
-    'pageHead',
-    'pageHeadTitle',
+    'page',
+    'frontmatter',
+    'lang',
+    'head',
+    'headTitle',
     'pageLayout',
     'pageComponent',
   ],
diff --git a/packages/client/src/devtools/setupDevtools.ts b/packages/client/src/devtools/setupDevtools.ts
index dba3cdb4a0..bb998990fe 100644
--- a/packages/client/src/devtools/setupDevtools.ts
+++ b/packages/client/src/devtools/setupDevtools.ts
@@ -1,15 +1,11 @@
 import { setupDevtoolsPlugin } from '@vue/devtools-api'
 import type { App } from 'vue'
 import { watch } from 'vue'
-import type { ClientData } from '../types/index.js'
+import type { Data } from '../types/index.js'
 import * as DEVTOOLS from './constants.js'
-import type {
-  ClientDataKey,
-  ClientDataValue,
-  InspectorNodeConfig,
-} from './types.js'
+import type { DataKey, DataValue, InspectorNodeConfig } from './types.js'
 
-export const setupDevtools = (app: App, clientData: ClientData): void => {
+export const setupDevtools = (app: App, clientData: Data): void => {
   setupDevtoolsPlugin(
     {
       // fix recursive reference
@@ -23,11 +19,11 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
     },
     (api) => {
       const clientDataEntries = Object.entries(clientData) as [
-        ClientDataKey,
-        ClientDataValue,
+        DataKey,
+        DataValue,
       ][]
-      const clientDataKeys = Object.keys(clientData) as ClientDataKey[]
-      const clientDataValues = Object.values(clientData) as ClientDataValue[]
+      const clientDataKeys = Object.keys(clientData) as DataKey[]
+      const clientDataValues = Object.values(clientData) as DataValue[]
 
       // setup component state
       api.on.inspectComponent((payload) => {
@@ -55,7 +51,7 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
           (node) => ({
             id: node.id,
             label: node.label,
-            children: node.keys.map((key: ClientDataKey) => ({
+            children: node.keys.map((key: DataKey) => ({
               id: key,
               label: key,
             })),
@@ -81,12 +77,12 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
         }
 
         // root nodes children state
-        if (clientDataKeys.includes(payload.nodeId as ClientDataKey)) {
+        if (clientDataKeys.includes(payload.nodeId as DataKey)) {
           payload.state = {
             [DEVTOOLS.INSPECTOR_STATE_SECTION_NAME]: [
               {
                 key: payload.nodeId,
-                value: clientData[payload.nodeId as ClientDataKey].value,
+                value: clientData[payload.nodeId as DataKey].value,
               },
             ],
           }
diff --git a/packages/client/src/devtools/types.ts b/packages/client/src/devtools/types.ts
index bcc8b005fa..6d262299ca 100644
--- a/packages/client/src/devtools/types.ts
+++ b/packages/client/src/devtools/types.ts
@@ -1,10 +1,10 @@
 import type { CustomInspectorNode } from '@vue/devtools-kit'
-import type { ClientData } from '../types/index.js'
+import type { Data } from '../types/index.js'
 
-export type ClientDataKey = keyof ClientData
-export type ClientDataValue = ClientData[ClientDataKey]
+export type DataKey = keyof Data
+export type DataValue = Data[DataKey]
 
 export interface InspectorNodeConfig
   extends Pick<CustomInspectorNode, 'id' | 'label'> {
-  keys: ClientDataKey[]
+  keys: DataKey[]
 }
diff --git a/packages/client/src/resolvers.ts b/packages/client/src/resolvers.ts
index 46e85c8da3..84b51b566c 100644
--- a/packages/client/src/resolvers.ts
+++ b/packages/client/src/resolvers.ts
@@ -40,7 +40,7 @@ export const resolvers = reactive({
    *
    * Frontmatter should take priority over site locale
    */
-  resolvePageHead: (
+  resolveHead: (
     pageHeadTitle: PageHeadTitle,
     pageFrontmatter: PageFrontmatter,
     siteLocaleDate: SiteLocaleData,
@@ -62,7 +62,7 @@ export const resolvers = reactive({
    *
    * It would be used as the content of the `<title>` tag
    */
-  resolvePageHeadTitle: (
+  resolveHeadTitle: (
     pageData: PageData,
     siteLocaleDate: SiteLocaleData,
   ): PageHeadTitle =>
@@ -73,15 +73,13 @@ export const resolvers = reactive({
    *
    * It would be used as the `lang` attribute of `<html>` tag
    */
-  resolvePageLang: (
-    pageData: PageData,
-    siteLocaleData: SiteLocaleData,
-  ): PageLang => pageData.lang || siteLocaleData.lang || LANG_DEFAULT,
+  resolveLang: (pageData: PageData, siteLocaleData: SiteLocaleData): PageLang =>
+    pageData.lang || siteLocaleData.lang || LANG_DEFAULT,
 
   /**
    * Resolve layout component of current page
    */
-  resolvePageLayout: (pageData: PageData, layouts: Layouts): PageLayout => {
+  resolveLayout: (pageData: PageData, layouts: Layouts): PageLayout => {
     const layoutName = isString(pageData.frontmatter.layout)
       ? pageData.frontmatter.layout
       : LAYOUT_NAME_DEFAULT
@@ -105,7 +103,7 @@ export const resolvers = reactive({
    *
    * It would merge the locales fields to the root fields
    */
-  resolveSiteLocaleData: (
+  resolveSiteLocale: (
     { base, locales, ...siteData }: SiteData,
     routeLocale: RouteLocale,
   ): SiteLocaleData => ({
diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts
index e258cb7673..7a8e4fd3e8 100644
--- a/packages/client/src/setupGlobalComputed.ts
+++ b/packages/client/src/setupGlobalComputed.ts
@@ -1,13 +1,13 @@
 import type { App } from 'vue'
 import { computed, customRef } from 'vue'
 import type { Router } from 'vue-router'
-import { clientDataSymbol } from './composables/index.js'
+import { dataSymbol } from './composables/index.js'
 import { redirects, routes } from './internal/routes.js'
 import { siteData } from './internal/siteData.js'
 import { resolvers } from './resolvers.js'
 import type {
   ClientConfig,
-  ClientData,
+  Data,
   PageChunk,
   PageData,
   PageFrontmatter,
@@ -27,7 +27,7 @@ export const setupGlobalComputed = (
   app: App,
   router: Router,
   clientConfigs: ClientConfig[],
-): ClientData => {
+): Data => {
   // route path of current page
   const routePath = computed(() => router.currentRoute.value.path)
 
@@ -64,58 +64,68 @@ export const setupGlobalComputed = (
   const routeLocale = computed(() =>
     resolvers.resolveRouteLocale(siteData.value.locales, routePath.value),
   )
-  const siteLocaleData = computed(() =>
-    resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value),
+  const siteLocale = computed(() =>
+    resolvers.resolveSiteLocale(siteData.value, routeLocale.value),
   )
-  const pageComponent = computed(() => pageChunk.value.comp)
-  const pageData = computed(() => pageChunk.value.data)
-  const pageFrontmatter = computed(() => pageData.value.frontmatter)
-  const pageHeadTitle = computed(() =>
-    resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value),
+  const page = computed(() => pageChunk.value.data)
+  const frontmatter = computed(() => page.value.frontmatter)
+  const lang = computed(() =>
+    resolvers.resolveLang(page.value, siteLocale.value),
   )
-  const pageHead = computed(() =>
-    resolvers.resolvePageHead(
-      pageHeadTitle.value,
-      pageFrontmatter.value,
-      siteLocaleData.value,
-    ),
+  const headTitle = computed(() =>
+    resolvers.resolveHeadTitle(page.value, siteLocale.value),
   )
-  const pageLang = computed(() =>
-    resolvers.resolvePageLang(pageData.value, siteLocaleData.value),
+  const head = computed(() =>
+    resolvers.resolveHead(headTitle.value, frontmatter.value, siteLocale.value),
   )
+  const pageComponent = computed(() => pageChunk.value.comp)
   const pageLayout = computed(() =>
-    resolvers.resolvePageLayout(pageData.value, layouts.value),
+    resolvers.resolveLayout(page.value, layouts.value),
   )
 
   // provide global computed in clientData
-  const clientData: ClientData = {
-    layouts,
-    pageData,
-    pageComponent,
-    pageFrontmatter,
-    pageHead,
-    pageHeadTitle,
-    pageLang,
-    pageLayout,
+  const clientData: Data = {
+    // site
+    site: siteData,
+    siteLocale,
+
+    // route
+    routes,
     redirects,
     routeLocale,
     routePath,
-    routes,
-    siteData,
-    siteLocaleData,
+
+    // page
+    frontmatter,
+    head,
+    headTitle,
+    lang,
+    page,
+
+    // internal
+    layouts,
+    pageComponent,
+    pageLayout,
   }
-  app.provide(clientDataSymbol, clientData)
+  app.provide(dataSymbol, clientData)
 
   // provide global helpers
   Object.defineProperties(app.config.globalProperties, {
-    $frontmatter: { get: () => pageFrontmatter.value },
-    $head: { get: () => pageHead.value },
-    $headTitle: { get: () => pageHeadTitle.value },
-    $lang: { get: () => pageLang.value },
-    $page: { get: () => pageData.value },
-    $routeLocale: { get: () => routeLocale.value },
+    // site
     $site: { get: () => siteData.value },
-    $siteLocale: { get: () => siteLocaleData.value },
+    $siteLocale: { get: () => siteLocale.value },
+
+    // route
+    // $router and $route are provided by vue-router
+    $routeLocale: { get: () => routeLocale.value },
+
+    // page
+    $frontmatter: { get: () => frontmatter.value },
+    $head: { get: () => head.value },
+    $lang: { get: () => lang.value },
+    $page: { get: () => page.value },
+
+    // helper
     $withBase: { get: () => withBase },
   })
 
diff --git a/packages/client/src/setupUpdateHead.ts b/packages/client/src/setupUpdateHead.ts
index 2ad189ae52..1be7624283 100644
--- a/packages/client/src/setupUpdateHead.ts
+++ b/packages/client/src/setupUpdateHead.ts
@@ -2,11 +2,7 @@ import type { HeadConfig, VuepressSSRContext } from '@vuepress/shared'
 import { isPlainObject, isString } from '@vuepress/shared'
 import { onMounted, provide, useSSRContext, watch } from 'vue'
 import type { UpdateHead } from './composables/index.js'
-import {
-  updateHeadSymbol,
-  usePageHead,
-  usePageLang,
-} from './composables/index.js'
+import { updateHeadSymbol, useData } from './composables/index.js'
 
 /**
  * Query the matched head element of head config
@@ -76,8 +72,7 @@ export const createHeadElement = ([
  * Auto update head and provide as global util
  */
 export const setupUpdateHead = (): void => {
-  const head = usePageHead()
-  const lang = usePageLang()
+  const { head, lang } = useData()
 
   // ssr-only, extract page meta info to ssrContext
   if (__VUEPRESS_SSR__) {
diff --git a/packages/client/src/types/clientConfig.ts b/packages/client/src/types/clientConfig.ts
index ad2a73eca9..221b348b4b 100644
--- a/packages/client/src/types/clientConfig.ts
+++ b/packages/client/src/types/clientConfig.ts
@@ -1,6 +1,6 @@
 import type { App, Component } from 'vue'
 import type { Router } from 'vue-router'
-import type { Layouts, SiteDataRef } from './clientData.js'
+import type { Layouts, SiteDataRef } from './data.js'
 
 /**
  * Configure vuepress client
diff --git a/packages/client/src/types/clientData.ts b/packages/client/src/types/data.ts
similarity index 82%
rename from packages/client/src/types/clientData.ts
rename to packages/client/src/types/data.ts
index 98dd20c7c8..8cec284257 100644
--- a/packages/client/src/types/clientData.ts
+++ b/packages/client/src/types/data.ts
@@ -54,22 +54,31 @@ export type RoutesRef = Ref<Routes>
 export type SiteDataRef = Ref<SiteData>
 export type SiteLocaleDataRef = ComputedRef<SiteLocaleData>
 
-export interface ClientData<
+export interface Data<
   Frontmatter extends Record<string, unknown> = Record<string, unknown>,
-  Data extends Record<string, unknown> = Record<string, unknown>,
+  Page extends Record<string, unknown> = Record<string, unknown>,
 > {
-  layouts: LayoutsRef
-  pageComponent: PageComponentRef
-  pageData: PageDataRef<Data>
-  pageFrontmatter: PageFrontmatterRef<Frontmatter>
-  pageHead: PageHeadRef
-  pageHeadTitle: PageHeadTitleRef
-  pageLang: PageLangRef
-  pageLayout: PageLayoutRef
+  // site
+  site: SiteDataRef
+  siteLocale: SiteLocaleDataRef
+
+  // route
+  routes: RoutesRef
   redirects: RedirectsRef
   routePath: RoutePathRef
   routeLocale: RouteLocaleRef
-  routes: RoutesRef
-  siteData: SiteDataRef
-  siteLocaleData: SiteLocaleDataRef
+
+  // page
+  frontmatter: PageFrontmatterRef<Frontmatter>
+  head: PageHeadRef
+  headTitle: PageHeadTitleRef
+  lang: PageLangRef
+  page: PageDataRef<Page>
+
+  // internal
+  layouts: LayoutsRef
+  pageComponent: PageComponentRef
+  pageLayout: PageLayoutRef
 }
+/** @deprecated use Data instead */
+export type ClientData = Data
diff --git a/packages/client/src/types/index.ts b/packages/client/src/types/index.ts
index a1d85e5487..ad20b9a7d4 100644
--- a/packages/client/src/types/index.ts
+++ b/packages/client/src/types/index.ts
@@ -1,5 +1,5 @@
 export type * from './clientConfig.js'
-export type * from './clientData.js'
-export type * from './onContentUpdated.js'
 export type * from './createVueAppFunction.js'
+export type * from './data.js'
+export type * from './onContentUpdated.js'
 export type * from './routes.js'

From 44c2fb9ae4e1146ba45bd2c3dbc55a376e7b12d0 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Mon, 14 Apr 2025 08:35:12 +0800
Subject: [PATCH 2/3] chore: tweaks

---
 packages/client/src/composables/dataUtils.ts | 61 +++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/composables/dataUtils.ts b/packages/client/src/composables/dataUtils.ts
index b55ee7f96d..5c0dc6e856 100644
--- a/packages/client/src/composables/dataUtils.ts
+++ b/packages/client/src/composables/dataUtils.ts
@@ -20,23 +20,40 @@ import { useData } from './data.js'
 /**
  * Get page data
  */
-export const usePage = <
+export const usePageData = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageDataRef<T> => useData<Record<string, unknown>, T>().page
+/**
+ * Shorthand for `usePageData()`
+ */
+export const usePage = usePageData
 /**
  * Get page frontmatter
  */
-export const useFrontmatter = <
+/** Note: suggest using `useFrontmatter` instead */
+export const usePageFrontmatter = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageFrontmatterRef<T> => useData<T>().frontmatter
+/**
+ * Shorthand for `usePageFrontmatter()`
+ */
+export const useFrontmatter = usePageFrontmatter
 /**
  * Get page head
  */
-export const useHead = (): PageHeadRef => useData().head
+export const usePageHead = (): PageHeadRef => useData().head
+/**
+ * Shorthand for `usePageHead()`
+ */
+export const useHead = usePageHead
 /**
  * Get page lang
  */
-export const useLang = (): PageLangRef => useData().lang
+export const usePageLang = (): PageLangRef => useData().lang
+/**
+ * Shorthand for `usePageLang()`
+ */
+export const useLang = usePageLang
 
 // route related
 
@@ -62,15 +79,23 @@ export const useRoutePath = (): RoutePathRef => useData().routePath
 /**
  * Get site data
  */
-export const useSite = (): SiteDataRef => useData().site
+export const useSiteData = (): SiteDataRef => useData().site
+/**
+ * Shorthand for `useSiteData()`
+ */
+export const useSite = useSiteData
 /**
  * Get site locale data
  */
-export const useSiteLocale = (): SiteLocaleDataRef => useData().siteLocale
+export const useSiteLocaleData = (): SiteLocaleDataRef => useData().siteLocale
+/**
+ * Shorthand for `useSiteLocaleData()`
+ */
+export const useSiteLocale = useSiteLocaleData
 
-// internal composables before `useData` was introduced, which are never expected to be called outside of vuePress/client
-// these are marked deprecated and kept for backward compatibility for now
 // FIXME: remove these in stable
+// Internal composables before `useData` was introduced, which are never expected to be called outside of vuePress/client
+// These are marked deprecated and kept for backward compatibility for now
 
 /** @deprecated use useData().pageComponent instead */
 export const usePageComponent = (): PageComponentRef => useData().pageComponent
@@ -78,23 +103,3 @@ export const usePageComponent = (): PageComponentRef => useData().pageComponent
 export const usePageLayout = (): PageLayoutRef => useData().pageLayout
 /** @deprecated use useData().layouts instead */
 export const useLayouts = (): LayoutsRef => useData().layouts
-
-// original long composable names
-// these are kept for backward compatibility, and might not need to implicitly marked as deprecated
-
-/** Note: suggest using `usePage` instead */
-export const usePageData = <
-  T extends Record<string, unknown> = Record<string, unknown>,
->(): PageDataRef<T> => useData<Record<string, unknown>, T>().page
-/** Note: suggest using `useFrontmatter` instead */
-export const usePageFrontmatter = <
-  T extends Record<string, unknown> = Record<string, unknown>,
->(): PageFrontmatterRef<T> => useData<T>().frontmatter
-/** Note: suggest using `useHead` instead */
-export const usePageHead = (): PageHeadRef => useData().head
-/** Note: suggest using `useLang` instead */
-export const usePageLang = (): PageLangRef => useData().lang
-/** Note: suggest using `useSite` instead */
-export const useSiteData = (): SiteDataRef => useData().site
-/** Note: suggest using `useSiteLocale` instead */
-export const useSiteLocaleData = (): SiteLocaleDataRef => useData().siteLocale

From a59309dcf34f6247826ce073bb1b64c3cdb27ebd Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Mon, 14 Apr 2025 14:24:22 +0800
Subject: [PATCH 3/3] chore: tweaks

---
 packages/client/src/composables/dataUtils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/composables/dataUtils.ts b/packages/client/src/composables/dataUtils.ts
index 5c0dc6e856..a749121d39 100644
--- a/packages/client/src/composables/dataUtils.ts
+++ b/packages/client/src/composables/dataUtils.ts
@@ -30,7 +30,6 @@ export const usePage = usePageData
 /**
  * Get page frontmatter
  */
-/** Note: suggest using `useFrontmatter` instead */
 export const usePageFrontmatter = <
   T extends Record<string, unknown> = Record<string, unknown>,
 >(): PageFrontmatterRef<T> => useData<T>().frontmatter