107 lines
31 KiB
HTML
107 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Using Vue in Markdown | 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_using-vue.md.74e82a4f.lean.js">
|
||
|
||
<meta name="twitter:title" content="Using Vue in Markdown | VitePress">
|
||
<meta property="og:title" content="Using Vue in Markdown | 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 active" href="/guide/using-vue">Using Vue in Markdown</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#templating">Templating</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#escaping">Escaping</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#using-components">Using Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#using-css-pre-processors">Using CSS Pre-processors</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#script-style-hoisting">Script & Style Hoisting</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#built-in-components">Built-In Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#browser-api-access-restrictions">Browser API Access Restrictions</a><!----></li></ul></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="using-vue-in-markdown" tabindex="-1">Using Vue in Markdown <a class="header-anchor" href="#using-vue-in-markdown" aria-hidden="true">#</a></h1><p>In VitePress, each markdown file is compiled into HTML and then processed as a Vue Single-File Component. This means you can use any Vue features inside the markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a <code><script></code> tag.</p><p>It is also important to know that VitePress leverages Vue 3's compiler to automatically detect and optimize the purely static parts of the markdown. Static contents are optimized into single placeholder nodes and eliminated from the page's JavaScript payload. They are also skipped during client-side hydration. In short, you only pay for the dynamic parts on any given page.</p><h2 id="templating" tabindex="-1">Templating <a class="header-anchor" href="#templating" aria-hidden="true">#</a></h2><h3 id="interpolation" tabindex="-1">Interpolation <a class="header-anchor" href="#interpolation" aria-hidden="true">#</a></h3><p>Each Markdown file is first compiled into HTML and then passed on as a Vue component to the Vite process pipeline. This means you can use Vue-style interpolation in text:</p><p><strong>Input</strong></p><div class="language-md"><pre><code>{{ 1 + 1 }}
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-text"><pre><code>2</code></pre></div><h3 id="directives" tabindex="-1">Directives <a class="header-anchor" href="#directives" aria-hidden="true">#</a></h3><p>Directives also work:</p><p><strong>Input</strong></p><div class="language-md"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i in 3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ i }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-text"><pre><code><!--[--><span>1 </span><span>2 </span><span>3 </span><!--]--></code></pre></div><h3 id="access-to-site-page-data" tabindex="-1">Access to Site & Page Data <a class="header-anchor" href="#access-to-site-page-data" aria-hidden="true">#</a></h3><p>You can use the <a href="./api.html#usedata"><code>useData</code> helper</a> in a <code><script></code> block and expose the data to the page.</p><p><strong>Input</strong></p><div class="language-md"><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> page <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>pre</span><span class="token punctuation">></span></span>{{ page }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-json"><pre><code><span class="token punctuation">{</span>
|
||
<span class="token property">"path"</span><span class="token operator">:</span> <span class="token string">"/using-vue.html"</span><span class="token punctuation">,</span>
|
||
<span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Using Vue in Markdown"</span><span class="token punctuation">,</span>
|
||
<span class="token property">"frontmatter"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h2 id="escaping" tabindex="-1">Escaping <a class="header-anchor" href="#escaping" aria-hidden="true">#</a></h2><p>By default, fenced code blocks are automatically wrapped with <code>v-pre</code>. To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the <code>v-pre</code> custom container:</p><p><strong>Input</strong></p><div class="language-md"><pre><code>::: v-pre
|
||
<span class="token code-snippet code keyword">`{{ This will be displayed as-is }}`</span>
|
||
:::
|
||
</code></pre></div><p><strong>Output</strong></p><div><p><code>{{ This will be displayed as-is }}</code></p></div><h2 id="using-components" tabindex="-1">Using Components <a class="header-anchor" href="#using-components" aria-hidden="true">#</a></h2><p>When you need to have more flexibility, VitePress allows you to extend your authoring toolbox with your own Vue Components.</p><h3 id="importing-components-in-markdown" tabindex="-1">Importing components in markdown <a class="header-anchor" href="#importing-components-in-markdown" aria-hidden="true">#</a></h3><p>If your components are going to be used in only a few places, the recommended way to use them is to importing the components in the file where it is used.</p><div class="language-md"><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> CustomComponent <span class="token keyword">from</span> <span class="token string">'../components/CustomComponent.vue'</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 title important"><span class="token punctuation">#</span> Docs</span>
|
||
|
||
This is a .md using a custom component
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CustomComponent</span> <span class="token punctuation">/></span></span>
|
||
|
||
<span class="token title important"><span class="token punctuation">##</span> More docs</span>
|
||
|
||
...
|
||
</code></pre></div><h3 id="registering-global-components-in-the-theme" tabindex="-1">Registering global components in the theme <a class="header-anchor" href="#registering-global-components-in-the-theme" aria-hidden="true">#</a></h3><p>If the components are going to be used across several pages in the docs, they can be registered globally in the theme (or as part of extending the default VitePress theme). Check out the <a href="./theming.html">Theming Guide</a> for more information.</p><p>In <code>.vitepress/theme/index.js</code>, the <code>enhanceApp</code> function receives the Vue <code>app</code> instance so you can <a href="https://vuejs.org/guide/components/registration.html" target="_blank" rel="noopener noreferrer">register components</a> as you would do in a regular Vue application.</p><div class="language-js"><pre><code><span class="token keyword">import</span> DefaultTheme <span class="token keyword">from</span> <span class="token string">'vitepress/theme'</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>DefaultTheme<span class="token punctuation">,</span>
|
||
<span class="token function">enhanceApp</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'VueClickAwayExample'</span><span class="token punctuation">,</span> VueClickAwayExample<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>Later in your markdown files, the component can be interleaved between the content</p><div class="language-md"><pre><code><span class="token title important"><span class="token punctuation">#</span> Vue Click Away</span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>VueClickAwayExample</span> <span class="token punctuation">/></span></span>
|
||
</code></pre></div><div class="warning custom-block"><p class="custom-block-title">IMPORTANT</p><p>Make sure a custom component’s name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a <code><p></code> tag, which will lead to hydration mismatch because <code><p></code> does not allow block elements to be placed inside it.</p></div><h3 id="using-components-in-headers" tabindex="-1">Using Components In Headers <span>⚡</span> <a class="header-anchor" href="#using-components-in-headers" aria-hidden="true">#</a></h3><p>You can use Vue components in the headers, but note the difference between the following syntaxes:</p><table><thead><tr><th>Markdown</th><th>Output HTML</th><th>Parsed Header</th></tr></thead><tbody><tr><td><pre><code> # text <Tag/> </code></pre></td><td><code><h1>text <Tag/></h1></code></td><td><code>text</code></td></tr><tr><td><pre><code> # text `<Tag/>` </code></pre></td><td><code><h1>text <code>&lt;Tag/&gt;</code></h1></code></td><td><code>text <Tag/></code></td></tr></tbody></table><p>The HTML wrapped by <code><code></code> will be displayed as-is; only the HTML that is <strong>not</strong> wrapped will be parsed by Vue.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>The output HTML is accomplished by <a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noopener noreferrer">markdown-it</a>, while the parsed headers are handled by VitePress (and used for both the sidebar and document title).</p></div><h2 id="using-css-pre-processors" tabindex="-1">Using CSS Pre-processors <a class="header-anchor" href="#using-css-pre-processors" aria-hidden="true">#</a></h2><p>VitePress has <a href="https://vitejs.dev/guide/features.html#css-pre-processors" target="_blank" rel="noopener noreferrer">built-in support</a> for CSS pre-processors: <code>.scss</code>, <code>.sass</code>, <code>.less</code>, <code>.styl</code> and <code>.stylus</code> files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:</p><div class="language-"><pre><code># .scss and .sass
|
||
npm install -D sass
|
||
|
||
# .less
|
||
npm install -D less
|
||
|
||
# .styl and .stylus
|
||
npm install -D stylus
|
||
</code></pre></div><p>Then you can use the following in Markdown and theme components:</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sass<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
.title
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><h2 id="script-style-hoisting" tabindex="-1">Script & Style Hoisting <a class="header-anchor" href="#script-style-hoisting" aria-hidden="true">#</a></h2><p>Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases, you can directly write root-level <code><script></code> or <code><style></code> blocks in the Markdown file. These will be hoisted out of the compiled HTML and used as the <code><script></code> and <code><style></code> blocks for the resulting Vue single-file component:</p><p class="_example_t4bci_2 demo"></p><h2 id="built-in-components" tabindex="-1">Built-In Components <a class="header-anchor" href="#built-in-components" aria-hidden="true">#</a></h2><p>VitePress provides Built-In Vue Components like <code>ClientOnly</code> and <code>OutboundLink</code>, check out the <a href="./global-component.html">Global Component Guide</a> for more information.</p><p><strong>Also see:</strong></p><ul><li><a href="#using-components-in-headers">Using Components In Headers</a></li></ul><h2 id="browser-api-access-restrictions" tabindex="-1">Browser API Access Restrictions <a class="header-anchor" href="#browser-api-access-restrictions" aria-hidden="true">#</a></h2><p>Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the <a href="https://vuejs.org/guide/scaling-up/ssr.html" target="_blank" rel="noopener noreferrer">universal code requirements</a>. In short, make sure to only access Browser / DOM APIs in <code>beforeMount</code> or <code>mounted</code> 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 built-in <code><ClientOnly></code> component:</p><div class="language-md"><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><p>Note this does not fix components or libraries that access Browser APIs <strong>on import</strong>. To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:</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 punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./lib-that-access-window-on-import'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">module</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// use code</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</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>
|
||
</code></pre></div><p>If your module <code>export default</code> a Vue component, you can register it dynamically:</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>component</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicComponent<span class="token punctuation">"</span></span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicComponent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>component</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>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">dynamicComponent</span><span class="token operator">:</span> <span class="token keyword">null</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./lib-that-access-window-on-import'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">module</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>dynamicComponent <span class="token operator">=</span> module<span class="token punctuation">.</span>default
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</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>
|
||
</code></pre></div><p><strong>Also see:</strong></p><ul><li><a href="https://vuejs.org/guide/essentials/component-basics.html#dynamic-components" target="_blank" rel="noopener noreferrer">Vue.js > Dynamic Components</a></li></ul></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/using-vue.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="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/guide/markdown" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Markdown Extensions</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/guide/deploy" data-v-38ede35f><span class="text" data-v-38ede35f>Deploying</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><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> |