docs: 📝 fixes docs

docs/.vuepress/components/BasicExample.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="example clearfix">
+  <div class="example">
     <VueEditor v-model="content" use-markdown-shortcuts />
   </div>
 </template>
 
 <script>
-if (typeof process === undefined) {
+let VueEditor;
+if (typeof window !== "undefined") {
   console.log("GOT WINDOW");
+  console.log("TCL: window", window);
+
+  VueEditor = window.Vue2Editor.VueEditor;
 }
-const VueEditor = Vue2Editor.VueEditor;
+// const VueEditor = window.Vue2Editor.VueEditor;
 export default {
   components: { VueEditor },
   data() {
     return {
-      content: "null"
+      content: "Starting Content"
     };
   }
 };

docs/.vuepress/config.js

@@ -13,15 +13,15 @@ module.exports = {
       {
         src: "https://unpkg.com/quill"
       }
-    ],    
+    ],
     [
       "script",
       {
         src: "https://unpkg.com/vue2-editor@alpha"
       }
     ]
   ],
-  plugins: [require("./plugin.js")],
+  plugins: [require("./plugin.js"), "live"],
   locales: {
     "/": {
       lang: "en-US",

docs/.vuepress/enhanceApp.js

@@ -4,6 +4,23 @@ export default ({
   router, // the router instance for the app
   siteData // site metadata
 }) => {
+  // NOTE: Works in DEV mode
+  if (typeof window !== "undefined") {
+    console.log("FROM ENHANCEAPP - GOT WINDOW");
+    console.log("TCFROM ENHANCEAPP - window", window);
+
+    Vue.use(window.Vue2Editor);
+  }
+  Vue.mixin({
+    data: () => ({
+      editorContent: "Content From Mixin"
+    }),
+    mounted() {
+      // import('vue2-editor').then(module => {
+      //     console.log('editor module', module);
+      // })
+    }
+  });
   // if (window !== undefined) {
   // console.log("FROM ENHANCE: ", Vue2Editor);
   // Vue.use(Vue2Editor);

docs/usage.md

@@ -3,9 +3,22 @@
 ## Basic Example
 
 <ClientOnly>
-<basic-example />
+<BasicExample />
 </ClientOnly>
 
+```vue live
+<BasicExample />
+<pre>{{editorContent}}</pre>
+```
+
+### Testing `Vue.use`
+
+```vue live
+<VueEditor v-model="editorContent" />
+<pre>{{editorContent}}</pre>
+
+```
+
 <!-- ## Customized Example
 
 <customized /> -->

package.json

@@ -17,6 +17,7 @@
     "docs": "npm run docs:serve",
     "docs:build": "vue-cli-service docs --mode build",
     "docs:serve": "vue-cli-service docs --mode serve",
+    "docs:preview": "http-server docs/.vuepress/dist",
     "postbuild:plugin": "rm dist/demo.html",
     "release": "standard-version",
     "release:alpha": "standard-version --prerelease alpha",
@@ -94,6 +95,7 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",
     "highlight.js": "^9.15.6",
+    "http-server": "^0.11.1",
     "node-sass": "^4.12.0",
     "querystringify": "^2.1.1",
     "quill-image-drop-module": "^1.0.3",
@@ -104,7 +106,8 @@
     "vue": "^2.6.10",
     "vue-cli-plugin-vplugin": "davidroyer/vue-cli-plugin-vplugin",
     "vue-router": "^3.0.6",
-    "vue-template-compiler": "^2.5.21"
+    "vue-template-compiler": "^2.5.21",
+    "vuepress-plugin-live": "^1.1.0"
   },
   "peerDependencies": {},
   "eslintIgnore": [

src/plugin.js

@@ -5,11 +5,11 @@
 
 import Vue from "vue";
 import plugin from "./index";
+const { Quill, version } = plugin;
+
 console.log("TCL: plugin", plugin);
-import { VueEditor, Quill, version } from "./index";
 console.log("TCL: version", version);
 console.log("TCL: Quill", Quill);
-console.log("TCL: VueEditor", VueEditor);
 
 Vue.use(plugin);