Deploy to GitHub Pages

assets/guide.md.77d8480e.js

@@ -0,0 +1,76 @@
+import{M as l,s as e}from"./chunks/screen.9127d83c.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.1b5fc780.js";var d="/assets/screen.273a9703.mp4";const C=n(`<h1 id="guide" tabindex="-1">Guide <a class="header-anchor" href="#guide" aria-hidden="true">#</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h2><div class="language-bash"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm install vue-three-d-mockup</span></span>
+<span class="line"></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-hidden="true">#</a></h2>`,4),h=n(`<h3 id="simple-example" tabindex="-1">Simple example <a class="header-anchor" href="#simple-example" aria-hidden="true">#</a></h3><p><code>screen.png</code> is a static asset in the public folder.</p><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">screen.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre></div><h3 id="using-assets-as-the-screen" tabindex="-1">Using assets as the screen <a class="header-anchor" href="#using-assets-as-the-screen" aria-hidden="true">#</a></h3><ul><li><h4 id="in-vite-powered-projects" tabindex="-1">In vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre></div><ul><li><h4 id="in-vue-cli-powered-projects" tabindex="-1">In vue-cli powered projects <a class="header-anchor" href="#in-vue-cli-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre></div><h3 id="multiple-phones" tabindex="-1">Multiple phones <a class="header-anchor" href="#multiple-phones" aria-hidden="true">#</a></h3>`,9),u=n(`<div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
+<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">, </span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">]</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">position</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span></span>
+<span class="line"><span style="color:#89DDFF;">      {</span></span>
+<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">50</span></span>
+<span class="line"><span style="color:#89DDFF;">      },</span></span>
+<span class="line"><span style="color:#89DDFF;">      {</span></span>
+<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: </span><span style="color:#F78C6C;">50</span></span>
+<span class="line"><span style="color:#89DDFF;">      },</span></span>
+<span class="line"><span style="color:#89DDFF;">    ]</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">rotation</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[{}, {</span></span>
+<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#F07178;">y</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.3</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#F07178;">z</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.06</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#89DDFF;">    }]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
+<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre></div><h3 id="video" tabindex="-1">Video <a class="header-anchor" href="#video" aria-hidden="true">#</a></h3>`,2),A=["src"],g=n(`<div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">video</span></span>
+<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">canplay</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">muted</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">autoplay</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">loop</span></span>
+<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#C3E88D;">      position: fixed;</span></span>
+<span class="line"><span style="color:#C3E88D;">      top: 0;</span></span>
+<span class="line"><span style="color:#C3E88D;">      left: 0;</span></span>
+<span class="line"><span style="color:#C3E88D;">      visibility: hidden;</span></span>
+<span class="line"><span style="color:#C3E88D;">    </span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#89DDFF;">  &gt;&lt;/</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ref</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenVideo </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"></span></code></pre></div><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code>&lt;video&gt;</code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul>`,5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md"}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

assets/guide.md.77d8480e.lean.js

@@ -0,0 +1 @@
+import{M as l,s as e}from"./chunks/screen.9127d83c.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.1b5fc780.js";var d="/assets/screen.273a9703.mp4";const C=n("",4),h=n("",9),u=n("",2),A=["src"],g=n("",5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md"}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

assets/index.md.e8d327de.js

@@ -0,0 +1 @@
+import{M as e,s as a}from"./chunks/screen.9127d83c.js";import{o as t,c as s,a as _,b as o,u as n,_ as c,f as r}from"./app.1b5fc780.js";const d=r('<h1 class="heading" data-v-7b43e306> Vue 3D Mockup </h1><p class="tagline" data-v-7b43e306> Create interactive 3D mockups with ease. </p><div class="buttons" data-v-7b43e306><a href="/guide" class="buttons__button" data-v-7b43e306> Guide </a><a href="https://github.com/anatolykopyl/vue-three-d-mockup" class="buttons__button buttons__button--secondary" data-v-7b43e306> Github </a></div>',3),v=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md"}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:n(a)},null,8,["screen"]),d])]))}});var f=c(i,[["__scopeId","data-v-7b43e306"]]);export{v as __pageData,f as default};

assets/index.md.e8d327de.lean.js

@@ -0,0 +1 @@
+import{M as e,s as a}from"./chunks/screen.9127d83c.js";import{o as t,c as s,a as _,b as o,u as n,_ as c,f as r}from"./app.1b5fc780.js";const d=r("",3),v=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md"}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:n(a)},null,8,["screen"]),d])]))}});var f=c(i,[["__scopeId","data-v-7b43e306"]]);export{v as __pageData,f as default};

hashmap.json

@@ -0,0 +1 @@
+{"guide.md":"77d8480e","index.md":"e8d327de"}