-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathclient-api.html
73 lines (70 loc) · 55.8 KB
/
client-api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.20" />
<style>
:root {
--vp-c-bg: #fff;
}
[data-theme='dark'] {
--vp-c-bg: #1b1b1f;
}
html,
body {
background-color: var(--vp-c-bg);
}
</style>
<script>
const useChoice = localStorage.getItem('vuepress-color-scheme')
const systemStatus =
'matchMedia' in window
? window.matchMedia('(prefers-color-scheme: dark)').matches
: false
if (useChoice === 'light') {
document.documentElement.dataset.theme = 'light'
} else if (useChoice === 'dark' || systemStatus) {
document.documentElement.dataset.theme = 'dark'
}
</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"Client API","image":[""],"dateModified":"2025-02-24T05:12:10.000Z","author":[]}</script><meta property="og:url" content="https://vuepress.vuejs.org/reference/client-api.html"><meta property="og:site_name" content="VuePress"><meta property="og:title" content="Client API"><meta property="og:description" content="Client API Client API can be imported from vuepress/client. Composition API useClientData Details: Returns all the client data ref objects. Each property can also be accessed by..."><meta property="og:type" content="article"><meta property="og:locale" content="en-US"><meta property="og:locale:alternate" content="zh-CN"><meta property="og:updated_time" content="2025-02-24T05:12:10.000Z"><meta property="article:modified_time" content="2025-02-24T05:12:10.000Z"><link rel="alternate" hreflang="zh-cn" href="https://vuepress.vuejs.org/zh/reference/client-api.html"><link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png"><link rel="manifest" href="/manifest.webmanifest"><meta name="application-name" content="VuePress"><meta name="apple-mobile-web-app-title" content="VuePress"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png"><link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#3eaf7c"><meta name="msapplication-TileColor" content="#3eaf7c"><meta name="theme-color" content="#3eaf7c"><title>Client API | VuePress</title><meta name="description" content="Client API Client API can be imported from vuepress/client. Composition API useClientData Details: Returns all the client data ref objects. Each property can also be accessed by...">
<link rel="preload" href="/assets/style-BodexH2g.css" as="style"><link rel="stylesheet" href="/assets/style-BodexH2g.css">
<link rel="modulepreload" href="/assets/app-Co8nLnwj.js"><link rel="modulepreload" href="/assets/client-api.html-D8WKB2j-.js">
<link rel="prefetch" href="/assets/index.html-BfJ0OwFR.js" as="script"><link rel="prefetch" href="/assets/architecture.html-B1bkGmie.js" as="script"><link rel="prefetch" href="/assets/plugin.html-DkbLUhO8.js" as="script"><link rel="prefetch" href="/assets/theme.html-CoYgnUtr.js" as="script"><link rel="prefetch" href="/assets/assets.html-QXvhVf31.js" as="script"><link rel="prefetch" href="/assets/bundler.html-BBIxg_OA.js" as="script"><link rel="prefetch" href="/assets/configuration.html-bvAUGwM5.js" as="script"><link rel="prefetch" href="/assets/deployment.html-CZkd05W1.js" as="script"><link rel="prefetch" href="/assets/getting-started.html-CFbr9Bex.js" as="script"><link rel="prefetch" href="/assets/i18n.html-C0o4G9Oo.js" as="script"><link rel="prefetch" href="/assets/introduction.html-CLBP2aRX.js" as="script"><link rel="prefetch" href="/assets/markdown.html-DyW3GBa6.js" as="script"><link rel="prefetch" href="/assets/migration.html-C_75iYMG.js" as="script"><link rel="prefetch" href="/assets/page.html-m-YY03Sh.js" as="script"><link rel="prefetch" href="/assets/plugin.html-wq2rUsXc.js" as="script"><link rel="prefetch" href="/assets/theme.html-XOBqKxgq.js" as="script"><link rel="prefetch" href="/assets/troubleshooting.html-CmcfO2Rt.js" as="script"><link rel="prefetch" href="/assets/cli.html-chN6i9hN.js" as="script"><link rel="prefetch" href="/assets/components.html-DE-NS8We.js" as="script"><link rel="prefetch" href="/assets/config.html-CR9gIDzh.js" as="script"><link rel="prefetch" href="/assets/frontmatter.html-B1PeW3cJ.js" as="script"><link rel="prefetch" href="/assets/node-api.html-CXMYuRfD.js" as="script"><link rel="prefetch" href="/assets/plugin-api.html-CxaX7jxB.js" as="script"><link rel="prefetch" href="/assets/theme-api.html-C0fuxB10.js" as="script"><link rel="prefetch" href="/assets/index.html-Fc-_Mk3O.js" as="script"><link rel="prefetch" href="/assets/index.html-N6BG3MiI.js" as="script"><link rel="prefetch" href="/assets/adding-extra-pages.html-Bv1LqTtD.js" as="script"><link rel="prefetch" href="/assets/making-a-theme-extendable.html-C_fTpsb9.js" as="script"><link rel="prefetch" href="/assets/markdown-and-vue-sfc.html-BfF9oO3J.js" as="script"><link rel="prefetch" href="/assets/passing-data-to-client-code.html-TTOVo6lR.js" as="script"><link rel="prefetch" href="/assets/resolving-routes.html-DEtWhjir.js" as="script"><link rel="prefetch" href="/assets/usage-of-client-config.html-JhYBCdyu.js" as="script"><link rel="prefetch" href="/assets/vite.html-CCXnXzfk.js" as="script"><link rel="prefetch" href="/assets/webpack.html-QzTwNuGF.js" as="script"><link rel="prefetch" href="/assets/architecture.html-C3RGlvCU.js" as="script"><link rel="prefetch" href="/assets/plugin.html-BUV0kKhL.js" as="script"><link rel="prefetch" href="/assets/theme.html-BVXCsayW.js" as="script"><link rel="prefetch" href="/assets/assets.html-BVVCvGET.js" as="script"><link rel="prefetch" href="/assets/bundler.html-D3ng-GTK.js" as="script"><link rel="prefetch" href="/assets/configuration.html-C6Z0Q7p4.js" as="script"><link rel="prefetch" href="/assets/deployment.html-iEZ4hYVv.js" as="script"><link rel="prefetch" href="/assets/getting-started.html-C7POQ-AQ.js" as="script"><link rel="prefetch" href="/assets/i18n.html-CU3cBapG.js" as="script"><link rel="prefetch" href="/assets/introduction.html-CHyXBHyd.js" as="script"><link rel="prefetch" href="/assets/markdown.html-98euOuSx.js" as="script"><link rel="prefetch" href="/assets/migration.html-pwJ6Vcyf.js" as="script"><link rel="prefetch" href="/assets/page.html-HaqD5GLE.js" as="script"><link rel="prefetch" href="/assets/plugin.html-Dh9pcCp8.js" as="script"><link rel="prefetch" href="/assets/theme.html-7FOq1bjM.js" as="script"><link rel="prefetch" href="/assets/troubleshooting.html-CzY1DbmI.js" as="script"><link rel="prefetch" href="/assets/cli.html-BfbTl4EI.js" as="script"><link rel="prefetch" href="/assets/client-api.html-DXCcAaB4.js" as="script"><link rel="prefetch" href="/assets/components.html-on3L-yUn.js" as="script"><link rel="prefetch" href="/assets/config.html-DkJB_0dU.js" as="script"><link rel="prefetch" href="/assets/frontmatter.html-_OlS2TW9.js" as="script"><link rel="prefetch" href="/assets/node-api.html-B5Z1snTv.js" as="script"><link rel="prefetch" href="/assets/plugin-api.html-DnYOSprI.js" as="script"><link rel="prefetch" href="/assets/theme-api.html-DG2V4xRX.js" as="script"><link rel="prefetch" href="/assets/index.html-BivSdaWo.js" as="script"><link rel="prefetch" href="/assets/adding-extra-pages.html-ixUZhA_p.js" as="script"><link rel="prefetch" href="/assets/making-a-theme-extendable.html-CgFhkAAx.js" as="script"><link rel="prefetch" href="/assets/markdown-and-vue-sfc.html-DLK73ACs.js" as="script"><link rel="prefetch" href="/assets/passing-data-to-client-code.html-s9R_2uVQ.js" as="script"><link rel="prefetch" href="/assets/resolving-routes.html-DbGgRjPk.js" as="script"><link rel="prefetch" href="/assets/usage-of-client-config.html-nM5qzxMV.js" as="script"><link rel="prefetch" href="/assets/vite.html-ME2au2x0.js" as="script"><link rel="prefetch" href="/assets/webpack.html-Cc7dGlag.js" as="script"><link rel="prefetch" href="/assets/404.html-Dc5KZGCw.js" as="script"><link rel="prefetch" href="/assets/index-B-M8YVCw.js" as="script"><link rel="prefetch" href="/assets/NpmBadge-BvhQVNCA.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon" vp-container><!--[--><header class="vp-navbar" vp-navbar><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/"><img class="vp-site-logo" src="/images/hero.png" alt="VuePress"><span class="vp-site-name vp-hide-mobile" aria-hidden="true">VuePress</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Guide"><span class="title">Guide</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Guide"><span class="title">Guide</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/introduction.html" aria-label="Introduction"><!--[--><!--[--><!--]--><!--]-->Introduction<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/getting-started.html" aria-label="Getting Started"><!--[--><!--[--><!--]--><!--]-->Getting Started<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/configuration.html" aria-label="Configuration"><!--[--><!--[--><!--]--><!--]-->Configuration<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/page.html" aria-label="Page"><!--[--><!--[--><!--]--><!--]-->Page<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/markdown.html" aria-label="Markdown"><!--[--><!--[--><!--]--><!--]-->Markdown<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/assets.html" aria-label="Assets"><!--[--><!--[--><!--]--><!--]-->Assets<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/i18n.html" aria-label="I18n"><!--[--><!--[--><!--]--><!--]-->I18n<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/deployment.html" aria-label="Deployment"><!--[--><!--[--><!--]--><!--]-->Deployment<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/theme.html" aria-label="Theme"><!--[--><!--[--><!--]--><!--]-->Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/plugin.html" aria-label="Plugin"><!--[--><!--[--><!--]--><!--]-->Plugin<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/bundler.html" aria-label="Bundler"><!--[--><!--[--><!--]--><!--]-->Bundler<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/migration.html" aria-label="Migrating from v1"><!--[--><!--[--><!--]--><!--]-->Migrating from v1<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/troubleshooting.html" aria-label="Troubleshooting"><!--[--><!--[--><!--]--><!--]-->Troubleshooting<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Reference"><span class="title">Reference</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Reference"><span class="title">Reference</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Core</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/cli.html" aria-label="CLI"><!--[--><!--[--><!--]--><!--]-->CLI<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/config.html" aria-label="Config"><!--[--><!--[--><!--]--><!--]-->Config<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/frontmatter.html" aria-label="Frontmatter"><!--[--><!--[--><!--]--><!--]-->Frontmatter<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/components.html" aria-label="Built-in Components"><!--[--><!--[--><!--]--><!--]-->Built-in Components<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/plugin-api.html" aria-label="Plugin API"><!--[--><!--[--><!--]--><!--]-->Plugin API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/theme-api.html" aria-label="Theme API"><!--[--><!--[--><!--]--><!--]-->Theme API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link route-link-active auto-link" href="/reference/client-api.html" aria-label="Client API"><!--[--><!--[--><!--]--><!--]-->Client API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/node-api.html" aria-label="Node API"><!--[--><!--[--><!--]--><!--]-->Node API<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Bundlers</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/bundler/vite.html" aria-label="Vite"><!--[--><!--[--><!--]--><!--]-->Vite<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/bundler/webpack.html" aria-label="Webpack"><!--[--><!--[--><!--]--><!--]-->Webpack<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Ecosystem</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/themes/default/" aria-label="Default Theme" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Default Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/plugins/" aria-label="Plugins" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Plugins<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Learn More"><span class="title">Learn More</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Learn More"><span class="title">Learn More</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Advanced</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/architecture.html" aria-label="Architecture"><!--[--><!--[--><!--]--><!--]-->Architecture<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/plugin.html" aria-label="Writing a Plugin"><!--[--><!--[--><!--]--><!--]-->Writing a Plugin<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/theme.html" aria-label="Writing a Theme"><!--[--><!--[--><!--]--><!--]-->Writing a Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/cookbook/" aria-label="Cookbook"><!--[--><!--[--><!--]--><!--]-->Cookbook<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Resources</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/" aria-label="Ecosystem" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Ecosystem<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://marketplace.vuejs.press" aria-label="MarketPlace" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->MarketPlace<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://github.com/vuepress/core/blob/main/CONTRIBUTING.md" aria-label="Contributing Guide" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Contributing Guide<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="v2.0.0-rc.20"><span class="title">v2.0.0-rc.20</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="v2.0.0-rc.20"><span class="title">v2.0.0-rc.20</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://github.com/vuepress/core/blob/main/CHANGELOG.md" aria-label="Changelog" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Changelog<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://v1.vuepress.vuejs.org" aria-label="v1.x" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->v1.x<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://v0.vuepress.vuejs.org" aria-label="v0.x" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->v0.x<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Select language"><span class="title">Languages</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Select language"><span class="title">Languages</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link route-link-active auto-link" href="/reference/client-api.html" aria-label="English"><!--[--><!--[--><!--]--><!--]-->English<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/zh/reference/client-api.html" aria-label="简体中文"><!--[--><!--[--><!--]--><!--]-->简体中文<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/vuepress/core" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button type="button" class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><div id="docsearch-container" style="display:none;"></div><div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar" vp-sidebar><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Guide"><span class="title">Guide</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Guide"><span class="title">Guide</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/introduction.html" aria-label="Introduction"><!--[--><!--[--><!--]--><!--]-->Introduction<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/getting-started.html" aria-label="Getting Started"><!--[--><!--[--><!--]--><!--]-->Getting Started<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/configuration.html" aria-label="Configuration"><!--[--><!--[--><!--]--><!--]-->Configuration<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/page.html" aria-label="Page"><!--[--><!--[--><!--]--><!--]-->Page<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/markdown.html" aria-label="Markdown"><!--[--><!--[--><!--]--><!--]-->Markdown<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/assets.html" aria-label="Assets"><!--[--><!--[--><!--]--><!--]-->Assets<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/i18n.html" aria-label="I18n"><!--[--><!--[--><!--]--><!--]-->I18n<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/deployment.html" aria-label="Deployment"><!--[--><!--[--><!--]--><!--]-->Deployment<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/theme.html" aria-label="Theme"><!--[--><!--[--><!--]--><!--]-->Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/plugin.html" aria-label="Plugin"><!--[--><!--[--><!--]--><!--]-->Plugin<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/bundler.html" aria-label="Bundler"><!--[--><!--[--><!--]--><!--]-->Bundler<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/migration.html" aria-label="Migrating from v1"><!--[--><!--[--><!--]--><!--]-->Migrating from v1<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guide/troubleshooting.html" aria-label="Troubleshooting"><!--[--><!--[--><!--]--><!--]-->Troubleshooting<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Reference"><span class="title">Reference</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Reference"><span class="title">Reference</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Core</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/cli.html" aria-label="CLI"><!--[--><!--[--><!--]--><!--]-->CLI<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/config.html" aria-label="Config"><!--[--><!--[--><!--]--><!--]-->Config<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/frontmatter.html" aria-label="Frontmatter"><!--[--><!--[--><!--]--><!--]-->Frontmatter<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/components.html" aria-label="Built-in Components"><!--[--><!--[--><!--]--><!--]-->Built-in Components<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/plugin-api.html" aria-label="Plugin API"><!--[--><!--[--><!--]--><!--]-->Plugin API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/theme-api.html" aria-label="Theme API"><!--[--><!--[--><!--]--><!--]-->Theme API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link route-link-active auto-link" href="/reference/client-api.html" aria-label="Client API"><!--[--><!--[--><!--]--><!--]-->Client API<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/node-api.html" aria-label="Node API"><!--[--><!--[--><!--]--><!--]-->Node API<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Bundlers</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/bundler/vite.html" aria-label="Vite"><!--[--><!--[--><!--]--><!--]-->Vite<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/reference/bundler/webpack.html" aria-label="Webpack"><!--[--><!--[--><!--]--><!--]-->Webpack<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Ecosystem</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/themes/default/" aria-label="Default Theme" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Default Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/plugins/" aria-label="Plugins" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Plugins<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Learn More"><span class="title">Learn More</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Learn More"><span class="title">Learn More</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Advanced</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/architecture.html" aria-label="Architecture"><!--[--><!--[--><!--]--><!--]-->Architecture<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/plugin.html" aria-label="Writing a Plugin"><!--[--><!--[--><!--]--><!--]-->Writing a Plugin<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/theme.html" aria-label="Writing a Theme"><!--[--><!--[--><!--]--><!--]-->Writing a Theme<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="route-link auto-link" href="/advanced/cookbook/" aria-label="Cookbook"><!--[--><!--[--><!--]--><!--]-->Cookbook<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><li class="vp-navbar-dropdown-item"><!--[--><h4 class="vp-navbar-dropdown-subtitle"><span>Resources</span></h4><ul class="vp-navbar-dropdown-subitem-wrapper"><!--[--><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://ecosystem.vuejs.press/" aria-label="Ecosystem" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Ecosystem<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://marketplace.vuejs.press" aria-label="MarketPlace" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->MarketPlace<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-subitem"><a class="auto-link external-link" href="https://github.com/vuepress/core/blob/main/CONTRIBUTING.md" aria-label="Contributing Guide" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Contributing Guide<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="v2.0.0-rc.20"><span class="title">v2.0.0-rc.20</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="v2.0.0-rc.20"><span class="title">v2.0.0-rc.20</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://github.com/vuepress/core/blob/main/CHANGELOG.md" aria-label="Changelog" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Changelog<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://v1.vuepress.vuejs.org" aria-label="v1.x" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->v1.x<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="auto-link external-link" href="https://v0.vuepress.vuejs.org" aria-label="v0.x" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->v0.x<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="Select language"><span class="title">Languages</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="Select language"><span class="title">Languages</span><span class="right arrow"></span></button><ul class="vp-navbar-dropdown" style="display:none;"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link route-link-active auto-link" href="/reference/client-api.html" aria-label="English"><!--[--><!--[--><!--]--><!--]-->English<!--[--><!--[--><!--]--><!--]--></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/zh/reference/client-api.html" aria-label="简体中文"><!--[--><!--[--><!--]--><!--]-->简体中文<!--[--><!--[--><!--]--><!--]--></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/vuepress/core" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active collapsible">Core <span class="down arrow"></span></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/reference/cli.html" aria-label="Command Line Interface"><!--[--><!--[--><!--]--><!--]-->Command Line Interface<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/config.html" aria-label="Config"><!--[--><!--[--><!--]--><!--]-->Config<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/frontmatter.html" aria-label="Frontmatter"><!--[--><!--[--><!--]--><!--]-->Frontmatter<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/components.html" aria-label="Built-in Components"><!--[--><!--[--><!--]--><!--]-->Built-in Components<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/plugin-api.html" aria-label="Plugin API"><!--[--><!--[--><!--]--><!--]-->Plugin API<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/theme-api.html" aria-label="Theme API"><!--[--><!--[--><!--]--><!--]-->Theme API<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/reference/client-api.html" aria-label="Client API"><!--[--><!--[--><!--]--><!--]-->Client API<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/node-api.html" aria-label="Node API"><!--[--><!--[--><!--]--><!--]-->Node API<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">Bundlers <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/reference/bundler/vite.html" aria-label="Vite"><!--[--><!--[--><!--]--><!--]-->Vite<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/reference/bundler/webpack.html" aria-label="Webpack"><!--[--><!--[--><!--]--><!--]-->Webpack<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">Ecosystem <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="auto-link external-link vp-sidebar-item" href="https://ecosystem.vuejs.press/themes/default/" aria-label="Default Theme" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Default Theme<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="auto-link external-link vp-sidebar-item" href="https://ecosystem.vuejs.press/plugins/" aria-label="Plugins" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->Plugins<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div vp-content><!--[--><!--]--><div><h1 id="client-api" tabindex="-1"><a class="header-anchor" href="#client-api"><span>Client API</span></a></h1><p>Client API can be imported from <code>vuepress/client</code>.</p><h2 id="composition-api" tabindex="-1"><a class="header-anchor" href="#composition-api"><span>Composition API</span></a></h2><h3 id="useclientdata" tabindex="-1"><a class="header-anchor" href="#useclientdata"><span>useClientData</span></a></h3><ul><li><p>Details:</p><p>Returns all the client data ref objects.</p><p>Each property can also be accessed by the following composition APIs.</p></li><li><p>Example:</p></li></ul><div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" style="background-color:#1E1E1E;color:#D4D4D4;"><pre class="shiki dark-plus vp-code"><code><span class="line"><span style="color:#808080;"><</span><span style="color:#569CD6;">script</span><span style="color:#9CDCFE;"> setup</span><span style="color:#9CDCFE;"> lang</span><span style="color:#D4D4D4;">=</span><span style="color:#CE9178;">"ts"</span><span style="color:#808080;">></span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">useClientData</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> {</span></span>
<span class="line"><span style="color:#4FC1FF;"> pageData</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> pageFrontmatter</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> pageHead</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> pageHeadTitle</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> pageLang</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> routeLocale</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> siteData</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#4FC1FF;"> siteLocaleData</span><span style="color:#D4D4D4;">,</span></span>
<span class="line"><span style="color:#D4D4D4;">} = </span><span style="color:#DCDCAA;">useClientData</span><span style="color:#D4D4D4;">()</span></span>
<span class="line"><span style="color:#808080;"></</span><span style="color:#569CD6;">script</span><span style="color:#808080;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="usepagedata" tabindex="-1"><a class="header-anchor" href="#usepagedata"><span>usePageData</span></a></h3><ul><li><p>Details:</p><p>Returns the page data ref object of current page.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/reference/node-api.html#data">Node API > Page Properties > data</a></li><li><a class="route-link" href="/reference/plugin-api.html#extendspage">Plugin API > extendsPage</a></li></ul></li></ul><h3 id="usepagefrontmatter" tabindex="-1"><a class="header-anchor" href="#usepagefrontmatter"><span>usePageFrontmatter</span></a></h3><ul><li><p>Details:</p><p>Returns the frontmatter ref object of current page.</p><p>The value is the <code>frontmatter</code> property of the page data.</p></li></ul><h3 id="usepagehead" tabindex="-1"><a class="header-anchor" href="#usepagehead"><span>usePageHead</span></a></h3><ul><li><p>Details:</p><p>Returns the head config ref object of current page.</p><p>The value is obtained by merging and deduplicating <a class="route-link" href="/reference/frontmatter.html#head">head</a> frontmatter and <a class="route-link" href="/reference/config.html#head">head</a> config.</p></li></ul><h3 id="usepageheadtitle" tabindex="-1"><a class="header-anchor" href="#usepageheadtitle"><span>usePageHeadTitle</span></a></h3><ul><li><p>Details:</p><p>Returns the head title ref object of current page.</p><p>The value is obtained by joining the page title and site title.</p></li></ul><h3 id="usepagelang" tabindex="-1"><a class="header-anchor" href="#usepagelang"><span>usePageLang</span></a></h3><ul><li><p>Details:</p><p>Returns the language ref object of current page.</p><p>The value is the <code>lang</code> property of the page data.</p></li></ul><h3 id="useroutes" tabindex="-1"><a class="header-anchor" href="#useroutes"><span>useRoutes</span></a></h3><ul><li><p>Details:</p><p>Returns the routes ref object.</p><p>The value is the <code>routes</code> property of the site data.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/advanced/cookbook/resolving-routes.html">Advanced > Cookbook > Resolving Routes</a></li></ul></li></ul><h3 id="useroutelocale" tabindex="-1"><a class="header-anchor" href="#useroutelocale"><span>useRouteLocale</span></a></h3><ul><li><p>Details:</p><p>Returns the locale path ref object of current route.</p><p>The value is one of the keys of the <a class="route-link" href="/reference/config.html#locales">locales</a> config.</p></li></ul><h3 id="usesitedata" tabindex="-1"><a class="header-anchor" href="#usesitedata"><span>useSiteData</span></a></h3><ul><li><p>Details:</p><p>Returns the site data ref object.</p></li></ul><h3 id="usesitelocaledata" tabindex="-1"><a class="header-anchor" href="#usesitelocaledata"><span>useSiteLocaleData</span></a></h3><ul><li><p>Details:</p><p>Returns the site data ref object of current locale.</p><p>The properties of current locale have been merged into the root-level properties.</p></li></ul><h3 id="oncontentupdated" tabindex="-1"><a class="header-anchor" href="#oncontentupdated"><span>onContentUpdated</span></a></h3><ul><li><p>Details:</p><p>When the content of the markdown file changes, the callback is triggered.</p><p>This function can only be called during the <code>setup</code> phase of the component.</p><div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" style="background-color:#1E1E1E;color:#D4D4D4;"><pre class="shiki dark-plus vp-code"><code><span class="line"><span style="color:#808080;"><</span><span style="color:#569CD6;">script</span><span style="color:#9CDCFE;"> setup</span><span style="color:#808080;">></span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">onContentUpdated</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#DCDCAA;">onContentUpdated</span><span style="color:#D4D4D4;">((</span><span style="color:#9CDCFE;">reason</span><span style="color:#D4D4D4;">) </span><span style="color:#569CD6;">=></span><span style="color:#D4D4D4;"> {</span></span>
<span class="line"><span style="color:#9CDCFE;"> console</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">log</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">`content updated reason: </span><span style="color:#569CD6;">${</span><span style="color:#9CDCFE;">reason</span><span style="color:#569CD6;">}</span><span style="color:#CE9178;">`</span><span style="color:#D4D4D4;">)</span></span>
<span class="line"><span style="color:#D4D4D4;">})</span></span>
<span class="line"><span style="color:#808080;"></</span><span style="color:#569CD6;">script</span><span style="color:#808080;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ul><h2 id="helpers" tabindex="-1"><a class="header-anchor" href="#helpers"><span>Helpers</span></a></h2><h3 id="defineclientconfig" tabindex="-1"><a class="header-anchor" href="#defineclientconfig"><span>defineClientConfig</span></a></h3><ul><li><p>Details:</p><p>Helper for creating <a class="route-link" href="/reference/plugin-api.html#clientconfigfile">clientConfigFile</a>.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/advanced/cookbook/usage-of-client-config.html">Advanced > Cookbook > Usage of Client Config</a></li></ul></li></ul><h3 id="resolveroute" tabindex="-1"><a class="header-anchor" href="#resolveroute"><span>resolveRoute</span></a></h3><ul><li><p>Details:</p><p>Parses the route of the given link.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/advanced/cookbook/resolving-routes.html">Advanced > Cookbook > Resolving Routes</a></li></ul></li></ul><h3 id="resolveroutepath" tabindex="-1"><a class="header-anchor" href="#resolveroutepath"><span>resolveRoutePath</span></a></h3><ul><li><p>Details:</p><p>Parses the route path of the given link.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/advanced/cookbook/resolving-routes.html">Advanced > Cookbook > Resolving Routes</a></li></ul></li></ul><h3 id="withbase" tabindex="-1"><a class="header-anchor" href="#withbase"><span>withBase</span></a></h3><ul><li><p>Details:</p><p>Prefix URL with site <a class="route-link" href="/reference/config.html#base">base</a>.</p></li><li><p>Also see:</p><ul><li><a class="route-link" href="/guide/assets.html#base-helper">Guide > Assets > Base Helper</a></li></ul></li></ul><h2 id="constants" tabindex="-1"><a class="header-anchor" href="#constants"><span>Constants</span></a></h2><p>There are some constants that available in the client side code.</p><p>To shim the types of these constants in client side code, add <code>vuepress/client-types</code> to your <code>tsconfig.json</code>:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" style="background-color:#1E1E1E;color:#D4D4D4;"><pre class="shiki dark-plus vp-code"><code><span class="line"><span style="color:#D4D4D4;">{</span></span>
<span class="line"><span style="color:#9CDCFE;"> "compilerOptions"</span><span style="color:#D4D4D4;">: {</span></span>
<span class="line"><span style="color:#9CDCFE;"> "types"</span><span style="color:#D4D4D4;">: [</span><span style="color:#CE9178;">"vuepress/client-types"</span><span style="color:#D4D4D4;">]</span></span>
<span class="line"><span style="color:#D4D4D4;"> }</span></span>
<span class="line"><span style="color:#D4D4D4;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vuepress-version" tabindex="-1"><a class="header-anchor" href="#vuepress-version"><span><code>__VUEPRESS_VERSION__</code></span></a></h3><ul><li><p>Type: <code>string</code></p></li><li><p>Details:</p><p>Version of VuePress core package.</p></li></ul><h3 id="vuepress-base" tabindex="-1"><a class="header-anchor" href="#vuepress-base"><span><code>__VUEPRESS_BASE__</code></span></a></h3><ul><li><p>Type: <code>string</code></p></li><li><p>Details:</p><p>The <a class="route-link" href="/reference/config.html#base">base</a> option from config.</p></li></ul><h3 id="vuepress-dev" tabindex="-1"><a class="header-anchor" href="#vuepress-dev"><span><code>__VUEPRESS_DEV__</code></span></a></h3><ul><li><p>Type: <code>boolean</code></p></li><li><p>Details:</p><p>An environment flag indicating whether it is currently running in <code>dev</code> mode.</p></li></ul><h3 id="vuepress-ssr" tabindex="-1"><a class="header-anchor" href="#vuepress-ssr"><span><code>__VUEPRESS_SSR__</code></span></a></h3><ul><li><p>Type: <code>boolean</code></p></li><li><p>Details:</p><p>An environment flag indicating whether it is currently running in server-side-rendering (SSR) build.</p></li></ul><h2 id="advanced" tabindex="-1"><a class="header-anchor" href="#advanced"><span>Advanced</span></a></h2><h3 id="resolvers" tabindex="-1"><a class="header-anchor" href="#resolvers"><span>resolvers <span class="vp-badge tip" style=""><!--[-->experimental<!--]--></span></span></a></h3><ul><li><p>Type: <code>Record<string, Function></code></p></li><li><p>Details:</p><p>An reactive object, methods of which determining how to resolve global computed.</p></li><li><p>Example:</p></li></ul><p>Customizing the format of <code><title></code> in client config file:</p><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="background-color:#1E1E1E;color:#D4D4D4;"><pre class="shiki dark-plus vp-code"><code><span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">defineClientConfig</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">resolvers</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C586C0;">export</span><span style="color:#C586C0;"> default</span><span style="color:#DCDCAA;"> defineClientConfig</span><span style="color:#D4D4D4;">({</span></span>
<span class="line"><span style="color:#DCDCAA;"> enhance</span><span style="color:#D4D4D4;">({ </span><span style="color:#9CDCFE;">app</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">router</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">siteData</span><span style="color:#D4D4D4;"> }) {</span></span>
<span class="line"><span style="color:#9CDCFE;"> resolvers</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">resolvePageHeadTitle</span><span style="color:#D4D4D4;"> = (</span><span style="color:#9CDCFE;">page</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">siteLocale</span><span style="color:#D4D4D4;">) </span><span style="color:#569CD6;">=></span></span>
<span class="line"><span style="color:#CE9178;"> `</span><span style="color:#569CD6;">${</span><span style="color:#9CDCFE;">siteLocale</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">title</span><span style="color:#569CD6;">}</span><span style="color:#CE9178;"> > </span><span style="color:#569CD6;">${</span><span style="color:#9CDCFE;">page</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">title</span><span style="color:#569CD6;">}</span><span style="color:#CE9178;">`</span></span>
<span class="line"><span style="color:#D4D4D4;"> },</span></span>
<span class="line"><span style="color:#D4D4D4;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="hint-container caution"><p class="hint-container-title">Caution</p><p><code>resolvers</code> will affect the basic functionality of VuePress. Please make sure you have fully understood its purpose before modifying it.</p></div></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/vuepress/docs/edit/main/docs/reference/client-api.md" aria-label="Edit this page on GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]--><!--]-->Edit this page on GitHub<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated:: </span><time class="meta-item-info" datetime="2025-02-24T05:12:10.000Z" data-allow-mismatch>2/24/25, 5:12 AM</time></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: [email protected]">meteorlxy</span><!--[-->, <!--]--><!--]--><!--[--><span class="contributor" title="email: [email protected]">Mister-Hope</span><!--[-->, <!--]--><!--]--><!--[--><span class="contributor" title="email: [email protected]">pengzhanbo</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/reference/theme-api.html" aria-label="Theme API"><!--[--><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span class="external-link">Theme API</span></div><!--]--></a><a class="route-link auto-link next" href="/reference/node-api.html" aria-label="Node API"><!--[--><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span class="external-link">Node API</span></div><!--]--></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!--]--><!--]--></div>
<script type="module" src="/assets/app-Co8nLnwj.js" defer></script>
</body>
</html>