31 lines
12 KiB
HTML
31 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Global Component | VitePress</title>
|
|
<meta name="description" content="Vite & Vue powered static site generator.">
|
|
<link rel="stylesheet" href="/assets/style.82fdbeb8.css">
|
|
<link rel="modulepreload" href="/assets/chunks/ui-custom.1a068566.js">
|
|
<link rel="modulepreload" href="/assets/chunks/ui-custom.30ce3a39.js">
|
|
<link rel="modulepreload" href="/assets/chunks/AlgoliaSearchBox.e5144af4.js">
|
|
<link rel="modulepreload" href="/assets/app.54944ef9.js">
|
|
<link rel="modulepreload" href="/assets/guide_global-component.md.01405ea5.lean.js">
|
|
|
|
<meta name="twitter:title" content="Global Component | VitePress">
|
|
<meta property="og:title" content="Global Component | VitePress">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VitePress, back to home" data-v-675d8756 data-v-cc01ef16><!----> VitePress</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/">What is VitePress?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/getting-started">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/configuration">Configuration</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/assets">Asset Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/markdown">Markdown Extensions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/using-vue">Using Vue in Markdown</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/deploy">Deploying</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/theming">Theming</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/api">API Reference</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/differences-from-vuepress">Differences from Vuepress</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" data-v-5941b830></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><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></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/vuejs/vitepress/edit/main/docs/guide/global-component.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><p class="last-updated" data-v-07c132fc data-v-abce3432><span class="prefix" data-v-abce3432>Last Updated:</span><span class="datetime" data-v-abce3432></span></p></div></footer><!----><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17><div class="bsa-cpc" data-v-4ce5ad17></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_algolia-search.md\":\"da33e9e2\",\"config_basics.md\":\"8b6d1758\",\"config_carbon-ads.md\":\"2699d04a\",\"config_homepage.md\":\"2f01ca2d\",\"guide_api.md\":\"03e88529\",\"guide_assets.md\":\"aae76804\",\"guide_configuration.md\":\"bb340dd8\",\"guide_deploy.md\":\"661eacb4\",\"guide_differences-from-vuepress.md\":\"459a9c4a\",\"guide_frontmatter.md\":\"07dc76f0\",\"guide_getting-started.md\":\"f9753073\",\"guide_global-component.md\":\"01405ea5\",\"guide_markdown.md\":\"6ff83e9e\",\"guide_theming.md\":\"b28ff51e\",\"guide_using-vue.md\":\"74e82a4f\",\"index.md\":\"9a001cbe\"}")</script>
|
|
<script type="module" async src="/assets/app.54944ef9.js"></script>
|
|
|
|
</body>
|
|
</html> |