9 lines
3.3 KiB
JavaScript
9 lines
3.3 KiB
JavaScript
import{_ as n,c as t,o as e,a}from"./app.54944ef9.js";const k='{"title":"Global Component","description":"","frontmatter":{},"headers":[{"level":2,"title":"Content","slug":"content"},{"level":2,"title":"ClientOnly","slug":"clientonly"},{"level":2,"title":"OutboundLink","slug":"outboundlink"}],"relativePath":"guide/global-component.md","lastUpdated":1652768268000}',s={},o=a(`<h1 id="global-component" tabindex="-1">Global Component <a class="header-anchor" href="#global-component" aria-hidden="true">#</a></h1><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><h2 id="content" tabindex="-1">Content <a class="header-anchor" href="#content" aria-hidden="true">#</a></h2><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><h2 id="clientonly" tabindex="-1">ClientOnly <a class="header-anchor" href="#clientonly" aria-hidden="true">#</a></h2><p>The <code>ClientOnly</code> component renderes 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><h2 id="outboundlink" tabindex="-1">OutboundLink <a class="header-anchor" href="#outboundlink" aria-hidden="true">#</a></h2><p>The indicator <code>OutboundLink</code> is used to denote external links. In VitePress, this component has been followed by every external link.</p>`,12),l=[o];function p(c,i,r,u,d,h){return e(),t("div",null,l)}var m=n(s,[["render",p]]);export{k as __pageData,m as default};
|