fix: avoid initial warning for preview

Author: elevatebart

demo/App.vue

@@ -1,84 +1,7 @@
 <template>
   <main style="text-align: center">
-    <h1>Vue Live renders vue code in the browser</h1>
-    <p class="description">
-      <em>vue-live</em> is a VueJs component. It renders the code passed in prop
-      using the VueJs compiler - yes exactly like the vuejs compiler. But wait!
-      it has a <b>super-power</b>! It keeps the rendered code reactive in the
-      browser.
-    </p>
-    <p class="description">
-      If you edit the code in the editor on the left, the preview on the right
-      will update automatically.
-    </p>
-
-    <div class="livebox">
-      <div class="hint">You can edit this <span>-></span></div>
-      <VueLive :editorProps="{ lineNumbers: true }" :code="codeTemplate" :layout="CustomLayout"
-        :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
-    </div>
-
-    <span v-if="!openExamples">+</span><span v-else>-</span>&nbsp;
-    <a href="#" @click="openExamples = !openExamples">More examples</a>
-    <div v-if="openExamples">
-      <h2>Vue SFC</h2>
-      <p>
-        If this format is not fitting for you, vue-live renders VueJs single
-        file components as well
-      </p>
-      <VueLive :code="codeSfc" :layout="CustomLayout" />
-			<h2>SFC with setup</h2>
-      <VueLive :code="codeSfcSetup" :layout="CustomLayout" />
-      <h2>Pure JavaScript code</h2>
-      <p>Or if you prefer to, use the <b>new Vue()</b> format</p>
-      <VueLive :code="codeJs" :layout="CustomLayout" />
-      <h2>Extra dependencies</h2>
-      <p>
-        Use the <b>requires</b> prop to make libraries and packages available in
-        the browser
-      </p>
-      <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires" />
-      <h2>Custom delay</h2>
-      <p>
-        When updates should not happen too often, for instance when a component
-        need a lot of computing power to render, one can change the standard
-        throttle timing.
-      </p>
-      <VueLive :code="`<input type='button' value='update me' />`" :layout="CustomLayout" :delay="2000" />
-
-      <h2>Default Layout</h2>
-      <div style="width: 950px; max-width: 95vw; margin: 20px auto">
-        <VueLive :code="`<input type='button' value='I am Groot' />`" />
-      </div>
-      <h2>Custom Layout</h2>
-      <div>
-        <p>Attributes available for custom layout:</p>
-        <p>
-          <code>code: String</code>, <code>language: String</code>,
-          <code>components: Object</code>, <code>requires: Object</code>, ...
-          all props passed in the
-          <code>layoutProps</code>
-        </p>
-        <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout" />
-      </div>
-
-      <h2>JSX</h2>
-      <VueLive :code="realjsx" :layout="CustomLayout" :jsx="true" />
-
-      <h2>Double Root</h2>
-      <VueLive :code="doubleRoot" :layout="CustomLayout" />
-
-      <h2>Separate components for Editor and Preview</h2>
-      <div class="separate">
-        <div class="preview-separate">
-          <VueLivePreview :code="separateCode" @error="(e: any) => (error = e)" @success="error = undefined" />
-        </div>
-        <hr style="width: 950px" />
-        <p>Edit the code here</p>
-        <VueLiveEditor :code="separateCode" @change="updateCode" :error="error" />
-        <div class="button-bar"><button>Save</button></div>
-      </div>
-    </div>
+		<VueLive :editorProps="{ lineNumbers: true }" :code="codeTemplate" :layout="CustomLayout"
+		  :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
 
     <github-corners href="https://github.com/vue-styleguidist/vue-live" gitColor="#FFFFFF" />
   </main>