https://vue-modal-demo.netlify.app/usage/

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=3a24f988-a313-4b86-9340-88a955a9d53d
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width,initial-scale=1">
9    <title>Register | vue-modal</title>
10    <meta name="generator" content="VuePress 1.9.10">
11    <link rel="shortcut icon" href="/favicons/favicon.ico">
12    <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">
13    <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png">
14    <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png">
15    <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png">
16    <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png">
17    <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png">
18    <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png">
19    <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png">
20    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png">
21    <link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png">
22    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
23    <link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
24    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
25    <link rel="manifest" href="/favicons/manifest.json">
26    

26<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.from"></script>

26
27    

27<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></script>

27
28    

28<script src="https://polyfill.io/v3/polyfill.min.js?features=NodeList.prototype.forEach"></script>

28
29    

29<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign"></script>

29
30    <meta name="description" content="A modal plugin for Vue">
31    <meta name="msapplication-TileColor" content="#ffffff">
32    <meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png">
33    <meta name="theme-color" content="#ffffff">
34    
35    <link rel="preload" href="/assets/css/0.styles.8e65dbe0.css" as="style"><link rel="preload" href="/assets/js/app.607b9f36.js" as="script"><link rel="preload" href="/assets/js/2.54b562f6.js" as="script"><link rel="preload" href="/assets/js/1.8e474bc4.js" as="script"><link rel="preload" href="/assets/js/43.f30f351b.js" as="script"><link rel="preload" href="/assets/js/34.13e60e6a.js" as="script"><link rel="prefetch" href="/assets/js/11.5328fa19.js"><link rel="prefetch" href="/assets/js/12.d1f0ce41.js"><link rel="prefetch" href="/assets/js/13.706e2e78.js"><link rel="prefetch" href="/assets/js/14.ac5cf2dd.js"><link rel="prefetch" href="/assets/js/15.69e23bba.js"><link rel="prefetch" href="/assets/js/16.887b0afb.js"><link rel="prefetch" href="/assets/js/17.42b91bc8.js"><link rel="prefetch" href="/assets/js/18.ec7cd680.js"><link rel="prefetch" href="/assets/js/19.4df0036b.js"><link rel="prefetch" href="/assets/js/20.9daad0aa.js"><link rel="prefetch" href="/assets/js/21.ee3280e6.js"><link rel="prefetch" href="/assets/js/22.474ae4b7.js"><link rel="prefetch" href="/assets/js/23.75372655.js"><link rel="prefetch" href="/assets/js/24.f1914d14.js"><link rel="prefetch" href="/assets/js/25.61574392.js"><link rel="prefetch" href="/assets/js/26.2c78cb73.js"><link rel="prefetch" href="/assets/js/27.74cb99f1.js"><link rel="prefetch" href="/assets/js/28.b2461142.js"><link rel="prefetch" href="/assets/js/29.e20edd12.js"><link rel="prefetch" href="/assets/js/3.d49a632f.js"><link rel="prefetch" href="/assets/js/30.836cab27.js"><link rel="prefetch" href="/assets/js/31.f9e6680d.js"><link rel="prefetch" href="/assets/js/32.01402a92.js"><link rel="prefetch" href="/assets/js/33.a2cfefb6.js"><link rel="prefetch" href="/assets/js/35.28d5a8c6.js"><link rel="prefetch" href="/assets/js/36.60bc6fba.js"><link rel="prefetch" href="/assets/js/37.222404fd.js"><link rel="prefetch" href="/assets/js/38.2c5f0e5c.js"><link rel="prefetch" href="/assets/js/39.44e1210a.js"><link rel="prefetch" href="/assets/js/4.739af890.js"><link rel="prefetch" href="/assets/js/40.aa505ed6.js"><link rel="prefetch" href="/assets/js/41.927e0ed4.js"><link rel="prefetch" href="/assets/js/42.2f83c938.js"><link rel="prefetch" href="/assets/js/5.6ef5b655.js"><link rel="prefetch" href="/assets/js/6.49aa5867.js"><link rel="prefetch" href="/assets/js/7.ebf1184d.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.50988454.js"><link rel="prefetch" href="/assets/js/vue-examples-source.89f649e7.js">
36    <link rel="stylesheet" href="/assets/css/0.styles.8e65dbe0.css">
37  </head>
38  <body>
39    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><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"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">vue-modal</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/kouts/vue-modal" target="_blank" rel="noopener noreferrer" class="nav-link external">
40  Github
41  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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>

41 <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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/kouts/vue-modal" target="_blank" rel="noopener noreferrer" class="nav-link external">
42  Github
43  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/installation/" class="sidebar-link">Installation</a></li><li><a href="/usage/" aria-current="page" class="active sidebar-link">Usage</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/usage/#register" class="sidebar-link">Register</a></li><li class="sidebar-sub-header"><a href="/usage/#use" class="sidebar-link">Use</a></li></ul></li><li><a href="/options/" class="sidebar-link">Options</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Examples</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="register"><a href="#register" class="header-anchor">#</a> Register</h2> <p>Register <code>vue-modal</code> in your application globbaly</p> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'Modal'</span><span class="token punctuation">,</span> VueModal<span class="token punctuation">)</span>
44</code></pre></div><p>or locally</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
45  <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
46  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
47    <span class="token string-property property">'Modal'</span><span class="token operator">:</span> VueModal
48  <span class="token punctuation">}</span>
49<span class="token punctuation">}</span><span class="token punctuation">)</span>
50</code></pre></div><h2 id="use"><a href="#use" class="header-anchor">#</a> Use</h2> <h3 id="template"><a href="#template" class="header-anchor">#</a> Template</h3> <p>with <code>v-model</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal=true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
51  Open a modal
52<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
53
54<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>

54Modal</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>My first modal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
55  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Modal content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
56<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Modal</span><span class="token punctuation">&gt;</span></span>
57</code></pre></div><p>or
58with <code>based-on</code> value and event</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Modal</span> <span class="token attr-name">:based-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>My first modal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showModal = false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
59  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>

59Modal content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
60<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Modal</span><span class="token punctuation">&gt;</span></span>
61</code></pre></div><h3 id="script"><a href="#script" class="header-anchor">#</a> Script</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
62  <span class="token operator">...</span>
63  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
64    <span class="token literal-property property">showModal</span><span class="token operator">:</span> <span class="token boolean">false</span>
65  <span class="token punctuation">}</span>
66  <span class="token operator">...</span>
67<span class="token punctuation">}</span><span class="token punctuation">)</span>
68</code></pre></div><h3 id="result"><a href="#result" class="header-anchor">#</a> Result</h3> <div class="mt-3"><div class="row mb-3"><div class="col"><button type="button" class="btn btn-primary">Open a modal</button></div></div> <!----></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
69      ←
70      <a href="/installation/" class="prev">
71        Installation
72      </a></span> <span class="next"><a href="/options/">
73        Options
74      </a>
75      →
76    </span></p></div> </main></div><div class="global-ui"></div></div>
77    

77<script src="/assets/js/app.607b9f36.js" defer></script>

77<script src="/assets/js/2.54b562f6.js" defer></script>

77<script src="/assets/js/1.8e474bc4.js" defer></script>

77<script src="/assets/js/43.f30f351b.js" defer></script>

77<script src="/assets/js/34.13e60e6a.js" defer></script>

77
78  </body>
79</html>