36 lines
9.7 KiB
JavaScript
36 lines
9.7 KiB
JavaScript
import{_ as a,c as n,o as s,a as e}from"./app.54944ef9.js";const h='{"title":"API Reference","description":"","frontmatter":{},"headers":[{"level":2,"title":"Helper Methods","slug":"helper-methods"},{"level":3,"title":"useData","slug":"usedata"},{"level":3,"title":"useRoute","slug":"useroute"},{"level":3,"title":"useRouter","slug":"userouter"},{"level":3,"title":"withBase","slug":"withbase"},{"level":2,"title":"Global Components","slug":"global-components"},{"level":3,"title":"<Content/>","slug":"content"},{"level":3,"title":"<ClientOnly/>","slug":"clientonly"}],"relativePath":"guide/api.md","lastUpdated":1652768268000}',t={},o=e(`<h1 id="api-reference" tabindex="-1">API Reference <a class="header-anchor" href="#api-reference" aria-hidden="true">#</a></h1><h2 id="helper-methods" tabindex="-1">Helper Methods <a class="header-anchor" href="#helper-methods" aria-hidden="true">#</a></h2><p>The following 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 single-file components.</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="noopener noreferrer">Vue 3 Composition API</a> function that can only be used inside <code>setup()</code> or <code><script setup></code>.</p><h3 id="usedata" tabindex="-1"><code>useData</code> <a class="header-anchor" href="#usedata" aria-hidden="true">#</a></h3><p>Returns page-specific data. The returned object has the following type:</p><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">VitePressData</span> <span class="token punctuation">{</span>
|
|
site<span class="token operator">:</span> Ref<span class="token operator"><</span>SiteData<span class="token operator">></span>
|
|
page<span class="token operator">:</span> Ref<span class="token operator"><</span>PageData<span class="token operator">></span>
|
|
theme<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span> <span class="token comment">// themeConfig from .vitepress/config.js</span>
|
|
frontmatter<span class="token operator">:</span> Ref<span class="token operator"><</span>PageData<span class="token punctuation">[</span><span class="token string">'frontmatter'</span><span class="token punctuation">]</span><span class="token operator">></span>
|
|
title<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
|
description<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
|
lang<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
|
localePath<span class="token operator">:</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p><strong>Example:</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> useData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vitepress'</span>
|
|
<span class="token keyword">const</span> <span class="token punctuation">{</span> theme <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ theme.heroText }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><h3 id="useroute" tabindex="-1"><code>useRoute</code> <a class="header-anchor" href="#useroute" aria-hidden="true">#</a></h3><p>Returns the current route object with the following type:</p><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">Route</span> <span class="token punctuation">{</span>
|
|
path<span class="token operator">:</span> <span class="token builtin">string</span>
|
|
data<span class="token operator">:</span> PageData
|
|
component<span class="token operator">:</span> Component <span class="token operator">|</span> <span class="token keyword">null</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><h3 id="userouter" tabindex="-1"><code>useRouter</code> <a class="header-anchor" href="#userouter" aria-hidden="true">#</a></h3><p>Returns the VitePress router instance so you can programmatically navigate to another page.</p><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">Router</span> <span class="token punctuation">{</span>
|
|
route<span class="token operator">:</span> Route
|
|
<span class="token function-variable function">go</span><span class="token operator">:</span> <span class="token punctuation">(</span>href<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator"><</span><span class="token keyword">void</span><span class="token operator">></span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><h3 id="withbase" tabindex="-1"><code>withBase</code> <a class="header-anchor" href="#withbase" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>(path: string) => string</code></p><p>Appends the configured <a href="./../config/basics.html#base"><code>base</code></a> to a given URL path. Also see <a href="./assets.html#base-url">Base URL</a>.</p></li></ul><h2 id="global-components" tabindex="-1">Global Components <a class="header-anchor" href="#global-components" aria-hidden="true">#</a></h2><p>VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.</p><h3 id="content" tabindex="-1"><code><Content/></code> <a class="header-anchor" href="#content" aria-hidden="true">#</a></h3><p>The <code><Content/></code> component displays the rendered markdown contents. Useful <a href="./theming.html">when creating your own theme</a>.</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Custom Layout!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Content</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><h3 id="clientonly" tabindex="-1"><code><ClientOnly/></code> <a class="header-anchor" href="#clientonly" aria-hidden="true">#</a></h3><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-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ClientOnly</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NonSSRFriendlyComponent</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ClientOnly</span><span class="token punctuation">></span></span>
|
|
</code></pre></div>`,27),p=[o];function c(l,r,i,u,d,k){return s(),n("div",null,p)}var m=a(t,[["render",c]]);export{h as __pageData,m as default};
|