fix: restore demo

Author: elevatebart

demo/App.vue

@@ -1,7 +1,84 @@
 <template>
   <main style="text-align: center">
-		<VueLive :editorProps="{ lineNumbers: true }" :code="codeTemplate" :layout="CustomLayout"
-		  :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
+    <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>
 
     <github-corners href="https://github.com/vue-styleguidist/vue-live" gitColor="#FFFFFF" />
   </main>

src/Preview.vue

@@ -86,7 +86,9 @@ export default defineComponent({
   data() {
     return {
       scope: this.generateScope(),
-      previewedComponent: {},
+      previewedComponent: markRaw({
+				render: () => h("div"),
+			}),
       iteration: 0,
       error: false,
       removeScopedStyle: () => { },