-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathusage-of-client-config.html-JhYBCdyu.js
78 lines (78 loc) · 30.1 KB
/
usage-of-client-config.html-JhYBCdyu.js
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
74
75
76
77
78
import{_ as t,c as r,b as e,a as p,d as n,e as a,w as o,r as i,o as c}from"./app-Co8nLnwj.js";const d={};function D(u,s){const l=i("RouteLink");return c(),r("div",null,[s[44]||(s[44]=e("h1",{id:"usage-of-client-config",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#usage-of-client-config"},[e("span",null,"Usage of Client Config")])],-1)),e("p",null,[s[2]||(s[2]=n("You can make use of the ")),a(l,{to:"/guide/configuration.html#client-config-file"},{default:o(()=>s[0]||(s[0]=[n("client config file")])),_:1}),s[3]||(s[3]=n(" directly in your project, or specify the file path in your plugin or theme via ")),a(l,{to:"/reference/plugin-api.html#clientconfigfile"},{default:o(()=>s[1]||(s[1]=[n("clientConfigFile")])),_:1}),s[4]||(s[4]=n(" hook:"))]),s[45]||(s[45]=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;">getDirname</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">path</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/utils'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#569CD6;">const</span><span style="color:#4FC1FF;"> __dirname</span><span style="color:#D4D4D4;"> = </span><span style="color:#DCDCAA;">getDirname</span><span style="color:#D4D4D4;">(</span><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">meta</span><span style="color:#D4D4D4;">.</span><span style="color:#9CDCFE;">url</span><span style="color:#D4D4D4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#569CD6;">const</span><span style="color:#4FC1FF;"> pluginOrTheme</span><span style="color:#D4D4D4;"> = {</span></span>
<span class="line"><span style="color:#9CDCFE;"> clientConfigFile:</span><span style="color:#9CDCFE;"> path</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">resolve</span><span style="color:#D4D4D4;">(</span><span style="color:#9CDCFE;">__dirname</span><span style="color:#D4D4D4;">, </span><span style="color:#CE9178;">'./path/to/clientConfig.ts'</span><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></div>`,1)),e("p",null,[s[6]||(s[6]=n("Inside the client config file, ")),s[7]||(s[7]=e("code",null,"vuepress/client",-1)),s[8]||(s[8]=n(" provides a helper function ")),a(l,{to:"/reference/client-api.html#defineclientconfig"},{default:o(()=>s[5]||(s[5]=[n("defineClientConfig")])),_:1}),s[9]||(s[9]=n(" to help you define the client config:"))]),s[46]||(s[46]=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:#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:#DCDCAA;"> setup</span><span style="color:#D4D4D4;">() {},</span></span>
<span class="line"><span style="color:#9CDCFE;"> layouts:</span><span style="color:#D4D4D4;"> {},</span></span>
<span class="line"><span style="color:#9CDCFE;"> rootComponents:</span><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><h2 id="enhance" tabindex="-1"><a class="header-anchor" href="#enhance"><span>enhance</span></a></h2><p>The <code>enhance</code> function could be either synchronous or asynchronous. It accepts a context param with following properties:</p>`,3)),e("ul",null,[s[24]||(s[24]=e("li",null,[e("code",null,"app"),n(" is the Vue application instance that created by "),e("a",{href:"https://vuejs.org/api/application.html#createapp",target:"_blank",rel:"noopener noreferrer"},"createApp"),n(".")],-1)),s[25]||(s[25]=e("li",null,[e("code",null,"router"),n(" is the Vue Router instance that created by "),e("a",{href:"https://router.vuejs.org/api/#createrouter",target:"_blank",rel:"noopener noreferrer"},"createRouter"),n(".")],-1)),e("li",null,[s[16]||(s[16]=e("code",null,"siteData",-1)),s[17]||(s[17]=n(" is a ref of an object that generated from user config, including ")),a(l,{to:"/reference/config.html#base"},{default:o(()=>s[10]||(s[10]=[n("base")])),_:1}),s[18]||(s[18]=n(", ")),a(l,{to:"/reference/config.html#lang"},{default:o(()=>s[11]||(s[11]=[n("lang")])),_:1}),s[19]||(s[19]=n(", ")),a(l,{to:"/reference/config.html#title"},{default:o(()=>s[12]||(s[12]=[n("title")])),_:1}),s[20]||(s[20]=n(", ")),a(l,{to:"/reference/config.html#description"},{default:o(()=>s[13]||(s[13]=[n("description")])),_:1}),s[21]||(s[21]=n(", ")),a(l,{to:"/reference/config.html#head"},{default:o(()=>s[14]||(s[14]=[n("head")])),_:1}),s[22]||(s[22]=n(" and ")),a(l,{to:"/reference/config.html#locales"},{default:o(()=>s[15]||(s[15]=[n("locales")])),_:1}),s[23]||(s[23]=n("."))])]),s[47]||(s[47]=p(`<p>The <code>enhance</code> function will be invoked after the client app is created. It's possible to implement any enhancements to the Vue application.</p><h3 id="register-vue-components" tabindex="-1"><a class="header-anchor" href="#register-vue-components"><span>Register Vue Components</span></a></h3><p>You can register global Vue components via the <a href="https://vuejs.org/api/application.html#app-component" target="_blank" rel="noopener noreferrer">app.component</a> method:</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:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#9CDCFE;"> MyComponent</span><span style="color:#C586C0;"> from</span><span style="color:#CE9178;"> './MyComponent.vue'</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>
<span class="line"><span style="color:#9CDCFE;"> app</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">component</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">'MyComponent'</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">MyComponent</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="use-non-ssr-friendly-features" tabindex="-1"><a class="header-anchor" href="#use-non-ssr-friendly-features"><span>Use Non-SSR-Friendly Features</span></a></h3><p>VuePress will generate a SSR application to pre-render pages during build. Generally speaking, if a code snippet is using Browser / DOM APIs before client app is mounted, we call it non-SSR-friendly.</p>`,6)),e("p",null,[s[27]||(s[27]=n("We already provides a ")),a(l,{to:"/reference/components.html#clientonly"},{default:o(()=>s[26]||(s[26]=[n("ClientOnly")])),_:1}),s[28]||(s[28]=n(" component to wrap non-SSR-friendly content."))]),e("p",null,[s[30]||(s[30]=n("In the ")),s[31]||(s[31]=e("code",null,"enhance",-1)),s[32]||(s[32]=n(" function, you can make use of the ")),a(l,{to:"/reference/client-api.html#ssr"},{default:o(()=>s[29]||(s[29]=[e("code",null,"__VUEPRESS_SSR__",-1)])),_:1}),s[33]||(s[33]=n(" flag for that purpose."))]),s[48]||(s[48]=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:#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:#569CD6;"> async</span><span style="color:#DCDCAA;"> enhance</span><span style="color:#D4D4D4;">() {</span></span>
<span class="line"><span style="color:#C586C0;"> if</span><span style="color:#D4D4D4;"> (!</span><span style="color:#9CDCFE;">__VUEPRESS_SSR__</span><span style="color:#D4D4D4;">) {</span></span>
<span class="line"><span style="color:#569CD6;"> const</span><span style="color:#4FC1FF;"> nonSsrFriendlyModule</span><span style="color:#D4D4D4;"> = </span><span style="color:#C586C0;">await</span><span style="color:#569CD6;"> import</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">'non-ssr-friendly-module'</span><span style="color:#D4D4D4;">)</span></span>
<span class="line"><span style="color:#6A9955;"> // ...</span></span>
<span class="line"><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 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="use-router-methods" tabindex="-1"><a class="header-anchor" href="#use-router-methods"><span>Use Router Methods</span></a></h3><p>You can make use of the <a href="https://router.vuejs.org/api/#router-methods" target="_blank" rel="noopener noreferrer">Router Methods</a> that provided by vue-router. For example, add navigation guard:</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:#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;">router</span><span style="color:#D4D4D4;"> }) {</span></span>
<span class="line"><span style="color:#9CDCFE;"> router</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">beforeEach</span><span style="color:#D4D4D4;">((</span><span style="color:#9CDCFE;">to</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;">'before navigation'</span><span style="color:#D4D4D4;">)</span></span>
<span class="line"><span style="color:#D4D4D4;"> })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#9CDCFE;"> router</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">afterEach</span><span style="color:#D4D4D4;">((</span><span style="color:#9CDCFE;">to</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;">'after navigation'</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>
<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 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 warning"><p class="hint-container-title">Warning</p><p>It's not recommended to use <code>addRoute</code> method to add dynamic routes here, because those routes will <strong>NOT</strong> be pre-rendered in build mode.</p><p>But you can still do that if you understand the drawback.</p></div><h2 id="setup" tabindex="-1"><a class="header-anchor" href="#setup"><span>setup</span></a></h2><p>The <code>setup</code> function would be invoked inside the <a href="https://vuejs.org/api/composition-api-setup.html" target="_blank" rel="noopener noreferrer">setup</a> hook of the client vue app.</p><h3 id="use-composition-api" tabindex="-1"><a class="header-anchor" href="#use-composition-api"><span>Use Composition API</span></a></h3><p>You can take the <code>setup</code> function as part of the <a href="https://vuejs.org/api/composition-api-setup.html" target="_blank" rel="noopener noreferrer">setup</a> hook of the root component. Thus, all composition APIs are available here.</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;">provide</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">ref</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vue'</span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">useRoute</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">useRouter</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vue-router'</span></span>
<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:#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;"> setup</span><span style="color:#D4D4D4;">() {</span></span>
<span class="line"><span style="color:#6A9955;"> // get the current route location</span></span>
<span class="line"><span style="color:#569CD6;"> const</span><span style="color:#4FC1FF;"> route</span><span style="color:#D4D4D4;"> = </span><span style="color:#DCDCAA;">useRoute</span><span style="color:#D4D4D4;">()</span></span>
<span class="line"><span style="color:#6A9955;"> // get the vue-router instance</span></span>
<span class="line"><span style="color:#569CD6;"> const</span><span style="color:#4FC1FF;"> router</span><span style="color:#D4D4D4;"> = </span><span style="color:#DCDCAA;">useRouter</span><span style="color:#D4D4D4;">()</span></span>
<span class="line"><span style="color:#6A9955;"> // provide a value that can be injected by layouts, pages and other components</span></span>
<span class="line"><span style="color:#569CD6;"> const</span><span style="color:#4FC1FF;"> count</span><span style="color:#D4D4D4;"> = </span><span style="color:#DCDCAA;">ref</span><span style="color:#D4D4D4;">(</span><span style="color:#B5CEA8;">0</span><span style="color:#D4D4D4;">)</span></span>
<span class="line"><span style="color:#DCDCAA;"> provide</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">'count'</span><span style="color:#D4D4D4;">, </span><span style="color:#9CDCFE;">count</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 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="use-non-ssr-friendly-features-1" tabindex="-1"><a class="header-anchor" href="#use-non-ssr-friendly-features-1"><span>Use Non-SSR-Friendly Features</span></a></h3>`,11)),e("p",null,[s[35]||(s[35]=n("In the ")),s[36]||(s[36]=e("code",null,"setup",-1)),s[37]||(s[37]=n(" function, the ")),a(l,{to:"/reference/client-api.html#ssr"},{default:o(()=>s[34]||(s[34]=[e("code",null,"__VUEPRESS_SSR__",-1)])),_:1}),s[38]||(s[38]=n(" flag is also available."))]),s[49]||(s[49]=p(`<p>Another way to use non-ssr-friendly features is to put them inside the <a href="https://vuejs.org/api/composition-api-lifecycle.html#onmounted" target="_blank" rel="noopener noreferrer">onMounted</a> hook:</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;">onMounted</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#CE9178;"> 'vue'</span></span>
<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:#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;"> setup</span><span style="color:#D4D4D4;">() {</span></span>
<span class="line"><span style="color:#DCDCAA;"> onMounted</span><span style="color:#D4D4D4;">(() </span><span style="color:#569CD6;">=></span><span style="color:#D4D4D4;"> {</span></span>
<span class="line"><span style="color:#6A9955;"> // use DOM API after mounted</span></span>
<span class="line"><span style="color:#9CDCFE;"> document</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">querySelector</span><span style="color:#D4D4D4;">(</span><span style="color:#CE9178;">'#app'</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>
<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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="layouts" tabindex="-1"><a class="header-anchor" href="#layouts"><span>layouts</span></a></h2>`,3)),e("p",null,[s[40]||(s[40]=n("The ")),s[41]||(s[41]=e("code",null,"layouts",-1)),s[42]||(s[42]=n(" options is to set layout components. After layout components are registered here, users can use it via ")),a(l,{to:"/reference/frontmatter.html#layout"},{default:o(()=>s[39]||(s[39]=[n("layout")])),_:1}),s[43]||(s[43]=n(" frontmatter."))]),s[50]||(s[50]=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:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#9CDCFE;"> MyLayout</span><span style="color:#C586C0;"> from</span><span style="color:#CE9178;"> './layouts/MyLayout.vue'</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:#9CDCFE;"> layouts:</span><span style="color:#D4D4D4;"> {</span></span>
<span class="line"><span style="color:#9CDCFE;"> MyLayout</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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="rootcomponents" tabindex="-1"><a class="header-anchor" href="#rootcomponents"><span>rootComponents</span></a></h2><p>The <code>rootComponents</code> is a components array to be placed directly into the root node of the client vue app.</p><p>Typical usage of this option is to put some global UI components, like global popup or so:</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:#C586C0;">from</span><span style="color:#CE9178;"> 'vuepress/client'</span></span>
<span class="line"><span style="color:#C586C0;">import</span><span style="color:#9CDCFE;"> GlobalPopup</span><span style="color:#C586C0;"> from</span><span style="color:#CE9178;"> './components/GlobalPopup.vue'</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:#9CDCFE;"> rootComponents:</span><span style="color:#D4D4D4;"> [</span><span style="color:#9CDCFE;">GlobalPopup</span><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></div>`,5))])}const C=t(d,[["render",D]]),m=JSON.parse('{"path":"/advanced/cookbook/usage-of-client-config.html","title":"Usage of Client Config","lang":"en-US","frontmatter":{"description":"Usage of Client Config You can make use of the directly in your project, or specify the file path in your plugin or theme via hook: Inside the client config file, vuepress/clien...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Usage of Client Config\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-08-31T07:59:53.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://vuepress.vuejs.org/advanced/cookbook/usage-of-client-config.html"}],["meta",{"property":"og:site_name","content":"VuePress"}],["meta",{"property":"og:title","content":"Usage of Client Config"}],["meta",{"property":"og:description","content":"Usage of Client Config You can make use of the directly in your project, or specify the file path in your plugin or theme via hook: Inside the client config file, vuepress/clien..."}],["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":"2024-08-31T07:59:53.000Z"}],["meta",{"property":"article:modified_time","content":"2024-08-31T07:59:53.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://vuepress.vuejs.org/zh/advanced/cookbook/usage-of-client-config.html"}]]},"headers":[{"level":2,"title":"enhance","slug":"enhance","link":"#enhance","children":[{"level":3,"title":"Register Vue Components","slug":"register-vue-components","link":"#register-vue-components","children":[]},{"level":3,"title":"Use Non-SSR-Friendly Features","slug":"use-non-ssr-friendly-features","link":"#use-non-ssr-friendly-features","children":[]},{"level":3,"title":"Use Router Methods","slug":"use-router-methods","link":"#use-router-methods","children":[]}]},{"level":2,"title":"setup","slug":"setup","link":"#setup","children":[{"level":3,"title":"Use Composition API","slug":"use-composition-api","link":"#use-composition-api","children":[]},{"level":3,"title":"Use Non-SSR-Friendly Features","slug":"use-non-ssr-friendly-features-1","link":"#use-non-ssr-friendly-features-1","children":[]}]},{"level":2,"title":"layouts","slug":"layouts","link":"#layouts","children":[]},{"level":2,"title":"rootComponents","slug":"rootcomponents","link":"#rootcomponents","children":[]}],"git":{"updatedTime":1725091193000,"contributors":[{"name":"meteorlxy","username":"meteorlxy","email":"[email protected]","commits":3,"url":"https://github.com/meteorlxy"},{"name":"Mr.Hope","username":"","email":"[email protected]","commits":1},{"name":"Xinyu Liu","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"c50d39999bf77e769c24d46e37d3780fe48e621b","time":1725091193000,"email":"[email protected]","author":"meteorlxy","message":"style: fix lint errors"},{"hash":"d65303182f5d8861d9001bfd7681407a3900b050","time":1703740814000,"email":"[email protected]","author":"meteorlxy","message":"docs: update imports usage"},{"hash":"7c7989891cb87959d90c82ce18c7a5bb650ee46b","time":1702213846000,"email":"[email protected]","author":"Mr.Hope","message":"build: set up lint and format scripts (#4)","coAuthors":[{"name":"Xinyu Liu","email":"[email protected]"}]},{"hash":"4b4cfcd626bc3920c689cf7ac85e2706700cc928","time":1701614677000,"email":"[email protected]","author":"meteorlxy","message":"build: migrate docs into a separate repo"}]},"autoDesc":true,"filePathRelative":"advanced/cookbook/usage-of-client-config.md"}');export{C as comp,m as data};