|
|
import{_ as e,c as p,ag as t,j as i,a,G as l,B as h,o as k}from"./chunks/framework.C1C4sYC0.js";const v=JSON.parse('{"title":"Runtime API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/runtime-api.md","filePath":"en/reference/runtime-api.md","lastUpdated":1736186893000}'),r={name:"reference/runtime-api.md"},d={id:"usedata",tabindex:"-1"},g={id:"useroute",tabindex:"-1"},E={id:"userouter",tabindex:"-1"},o={id:"withbase",tabindex:"-1"},y={id:"content",tabindex:"-1"},F={id:"clientonly",tabindex:"-1"},A={id:"frontmatter",tabindex:"-1"},u={id:"params",tabindex:"-1"};function c(C,s,D,m,B,f){const n=h("Badge");return k(),p("div",null,[s[32]||(s[32]=t('<h1 id="runtime-api" tabindex="-1">Runtime API <a class="header-anchor" href="#runtime-api" aria-label="Permalink to "Runtime API""></a></h1><p>VitePress offers several built-in APIs to let you access app data. VitePress also comes with a few built-in components that can be used globally.</p><p>The helper methods are globally importable from <code>vitepress</code> and are typically used in custom theme Vue components. However, they are also usable inside <code>.md</code> pages because markdown files are compiled into Vue <a href="https://vuejs.org/guide/scaling-up/sfc.html" target="_blank" rel="noreferrer">Single-File Components</a>.</p><p>Methods that start with <code>use*</code> indicates that it is a <a href="https://vuejs.org/guide/introduction.html#composition-api" target="_blank" rel="noreferrer">Vue 3 Composition API</a> function ("Composable") that can only be used inside <code>setup()</code> or <code><script setup></code>.</p>',4)),i("h2",d,[s[0]||(s[0]=i("code",null,"useData",-1)),s[1]||(s[1]=a()),l(n,{type:"info",text:"composable"}),s[2]||(s[2]=a()),s[3]||(s[3]=i("a",{class:"header-anchor",href:"#usedata","aria-label":'Permalink to "`useData` <Badge type="info" text="composable" />"'},"",-1))]),s[33]||(s[33]=t(`<p>Returns page-specific data. The returned object has the following type:</p><div class="language-ts vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VitePressData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Site-level metadata</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> site</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SiteData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * themeConfig from .vitepress/config.js</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Page-level metadata</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> page</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">PageData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Page frontmatter</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> frontmatter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">PageData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'frontmatter'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Dynamic route params</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> params</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">PageData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'params'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> description</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> isDark</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> dir</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> localeIndex</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Current location hash</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> hash</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PageData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> titleTemplate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> description</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> relativePath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> filePath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> headers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> frontmatter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> params</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> isNotFound</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> lastUpdated</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Example:</strong></p><div class="language-vue vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ theme.footer.copyright }}</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,4)),i("h2",g,[s[4]||(s[4]=i("code",null,"useRoute",-1)),s[5]||(s[5]=a()),l(n,{type:"info",text:"composable"}),s[6]||(s[6]=a()),s[7]||(s[7]=i("a",{class:"header-anchor",href:"#useroute","aria-label":'Permalink to "`useRoute` <Badge type="info" text="composable" />"'},"",-1))]),s[34]||(s[34]=t(`<p>Returns the current route object with the following type:</p><div class="language-ts vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Route</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PageData</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,2)),i("h2",E,[s[8]||(s[8]=i("code",null,"useRouter",-1)),s[9]||(s[9]=a()),l(n,{type:"info",text:"composable"}),s[10]||(s[10]=a()),s[11]||(s[11]=i("a",{class:"header-anchor",href:"#userouter","aria-label":'Permalink to "`useRouter` <Badge type="info" text="composable" />"'},"",-1))]),s[35]||(s[35]=t(`<p>Returns the VitePress router instance so you can programmatically navigate to another page.</p><div class="language-ts vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Router</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Current route.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> route</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Route</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Navigate to a new URL.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> go</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Called before the route changes. Return \`false\` to cancel the navigation.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onBeforeRouteChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Awaitable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Called before the page component is loaded (after the history state is updated).</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Return \`false\` to cancel the navigation.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onBeforePageLoad</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Awaitable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Called after the page component is loaded (before the page component is updated).</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onAfterPageLoad</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Awaitable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Called after the route changes.</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onAfterRouteChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Awaitable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,2)),i("h2",o,[s[12]||(s[12]=i("code",null,"withBase",-1)),s[13]||(s[13]=a()),l(n,{type:"info",text:"helper"}),s[14]||(s[14]=a()),s[15]||(s[15]=i("a",{class:"header-anchor",href:"#withbase","aria-label":'Permalink to "`withBase` <Badge type="info" text="helper" />"'},"",-1))]),s[36]||(s[36]=i("ul",null,[i("li",null,[i("strong",null,"Type"),a(": "),i("code",null,"(path: string) => string")])],-1)),s[37]||(s[37]=i("p",null,[a("Appends the configured "),i("a",{href:"./site-config#base"},[i("code",null,"base")]),a(" to a given URL path. Also see "),i("a",{href:"./../guide/asset-handling#base-url"},"Base URL"),a(".")],-1)),i("h2",y,[s[16]||(s[16]=i("code",null,"<Content />",-1)),s[17]||(s[17]=a()),l(n,{type:"info",text:"component"}),s[18]||(s[18]=a()),s[19]||(s[19]=i("a",{class:"header-anchor",href:"#content","aria-label":'Permalink to "`<Content />` <Badge type="info" text="component" />"'},"",-1))]),s[38]||(s[38]=t(`<p>The <code><Content /></code> component displays the rendered markdown contents. Useful <a href="./../guide/custom-theme">when creating your own theme</a>.</p><div class="language-vue vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Custom Layout!</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,2)),i("h2",F,[s[20]||(s[20]=i("code",null,"<ClientOnly />",-1)),s[21]||(s[21]=a()),l(n,{type:"info",text:"component"}),s[22]||(s[22]=a()),s[23]||(s[23]=i("a",{class:"header-anchor",href:"#clientonly","aria-label":'Permalink to "`<ClientOnly />` <Badge type="info" text="component" />"'},"",-1))]),s[39]||(s[39]=t(`<p>The <code><ClientOnly /></code> component renders its slot only at client side.</p><p>Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.</p><p>If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the <code>ClientOnly</code> component.</p><div class="language-template vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NonSSRFriendlyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><ul><li>Related: <a href="./../guide/ssr-compat">SSR Compatibility</a></li></ul>`,5)),i("h2",A,[s[24]||(s[24]=i("code",null,"$frontmatter",-1)),s[25]||(s[25]=a()),l(n,{type:"info",text:"template global"}),s[26]||(s[26]=a()),s[27]||(s[27]=i("a",{class:"header-anchor",href:"#frontmatter","aria-label":'Permalink to "`$frontmatter` <Badge type="info" text="template global" />"'},"",-1))]),s[40]||(s[40]=t(`<p>Directly access current page's <a href="./../guide/frontmatter">frontmatter</a> data in Vue expressions.</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Hello</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># {{ $frontmatter.title }}</span></span></code></pre></div>`,2)),i("h2",u,[s[28]||(s[28]=i("code",null,"$params",-1)),s[29]||(s[29]=a()),l(n,{type:"info",text:"template global"}),s[30]||(s[30]=a()),s[31]||(s[31]=i("a",{class:"header-anchor",href:"#params","aria-label":'Permalink to "`$params` <Badge type="info" text="template global" />"'},"",-1))]),s[41]||(s[41]=t(`<p>Directly access current page's <a href="./../guide/routing#dynamic-routes">dynamic route params</a> in Vue expressions.</p><div class="language-md vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> package name: {{ $params.pkg }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> version: {{ $params.version }}</span></span></code></pre></div>`,2))])}const T=e(r,[["render",c]]);export{v as __pageData,T as default};
|
