fix: add no-ssr for vue-live

Author: elevatebart

enhanceAppFiles.js

@@ -14,7 +14,9 @@ module.exports = function enhanceAppFiles() {
     "}",
     // and in order for the loading to happen after we assign the variable,
     // we load vue-live as a require instead of an import
-    `Vue.component("VueLive", () => import(${JSON.stringify(vueLivePath)}))`
+    `Vue.component("VueLive", () => import(${JSON.stringify(
+      vueLivePath
+    )}));Vue.component("NoSsr", () => import('vue-no-ssr')) `
   ].join("\n");
   return { name: "vue-live-enhancer", content };
 };

markDownPlugin.js

@@ -40,9 +40,9 @@ const addVueLive = md => {
       .replace(/\$/g, "\\$");
     const editorProps = langArray.find(l => /^\{.+\}$/.test(l));
     const jsx = langArray.length > 2 && langArray[1] === "jsx" ? "jsx " : ""; // to enable jsx, we want ```vue jsx live or ```jsx jsx live
-    return `<vue-live ${jsx}:layoutProps="{lang:'${langClean}'}" :code="\`${codeClean}\`" :requires="{${requires.join(
+    return `<no-ssr><vue-live ${jsx}:layoutProps="{lang:'${langClean}'}" :code="\`${codeClean}\`" :requires="{${requires.join(
       ","
-    )}}"${editorProps ? ` :editorProps="${editorProps}"` : ""} />`;
+    )}}"${editorProps ? ` :editorProps="${editorProps}"` : ""} /></no-ssr>`;
   };
 };
 

package-lock.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "acorn": "^6.1.1",
     "vue-live": "^1.6.0",
+    "vue-no-ssr": "^1.1.1",
     "walkes": "^0.2.1"
   }
 }