fix: first compiling version

Author: elevatebart

demo/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <main style="text-align: center;">
+  <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
@@ -35,9 +35,7 @@
       <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>
+      <h2>Extra dependencies</h2>
       <p>
         Use the <b>requires</b> prop to make libraries and packages available in
         the browser
@@ -60,7 +58,7 @@
       />
 
       <h2>Default Layout</h2>
-      <div style="width: 950px; max-width: 95vw; margin: 20px auto;">
+      <div style="width: 950px; max-width: 95vw; margin: 20px auto">
         <VueLive :code="`<input type='button' value='I am Groot' />`" />
       </div>
       <h2>Custom Layout</h2>
@@ -86,7 +84,7 @@
         <div class="preview-separate">
           <VueLivePreview :code="separateCode" />
         </div>
-        <hr style="width: 950px;" />
+        <hr style="width: 950px" />
         <p>Edit the code here</p>
         <VueLiveEditor :code="separateCode" @change="updateCode" />
         <div class="button-bar"><button>Save</button></div>
@@ -100,6 +98,7 @@
   </main>
 </template>
 <script>
+import { markRaw } from "vue";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 import CustomLayout from "./CustomLayout";
 import DatePicker from "vuejs-datepicker";
@@ -118,12 +117,12 @@ export default {
   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
   data() {
     return {
-      registeredComponents: { DatePicker },
+      registeredComponents: { DatePicker: markRaw(DatePicker) },
       codeSfc,
       codeTemplate,
       codeJs,
       codeChicago,
-      CustomLayout,
+      CustomLayout: markRaw(CustomLayout),
       chicagoRequires: { "./chicagoNeighbourhoods": all },
       realjsx,
       separateCode: codeSfc,

demo/main.js

@@ -1,10 +1,5 @@
 import "./find.polyfill";
-import Vue from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 
-Vue.config.productionTip = false;
-Vue.config.devtools = true;
-
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+createApp(App).mount("#app");