Merge pull request #1271 from docsifyjs/fix-790

Fix Vue Reactivity

Author: jhildenbiddle

docs/index.html

@@ -162,5 +162,6 @@
         }
       })();
     </script>
+    <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
   </body>
 </html>

docs/vue.md

@@ -1,99 +1,137 @@
-# Compatible with Vue
+# Vue compatibility
 
-You can write Vue components directly in the Markdown file, and it will be parsed. You can use this feature to write vue demo and documentation together.
+Docsify allows Vue [v2.x](https://vuejs.org) and [v3.x](https://v3.vuejs.org) components to be added directly to you Markdown files. These components can greatly simplify working with data and adding reactivity to your content.
 
-## Basic usage
+To get started, load either the production or development version of Vue in your `index.html`:
 
-Load the Vue in `./index.html`.
+#### Vue 2.x
 
 ```html
-<script src="//cdn.jsdelivr.net/npm/vue"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify"></script>
+<!-- Production -->
+<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 
-<!-- Or use the compressed files -->
-<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+<!-- Development (debugging and Vue.js devtools support) -->
+<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
-Then you can immediately write Vue code at Markdown file. `new Vue({ el: '#main' })` script is executed by default to create instance.
+#### Vue 3.x
 
-*README.md*
+```html
+<!-- Production -->
+<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+
+<!-- Development (debugging and Vue.js devtools support) -->
+<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
+```
 
-````markdown
-# Vue guide
+## Basic rendering
 
-`v-for` usage.
+Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features.
 
-```html
+```markdown
 <ul>
-  <li v-for="i in 10">{{ i }}</li>
+  <li v-for="i in 3">{{ i }}</li>
 </ul>
 ```
 
+The HTML above will render the following:
+
 <ul>
-  <li v-for="i in 10">{{ i }}</li>
+  <li v-for="i in 3">{{ i }}</li>
 </ul>
-````
 
-You can manually initialize a Vue instance.
+## Advanced usage
+
+Vue components and templates that require `data`, `methods`, computed properties, lifecycle hooks, etc. require manually creating a new `Vue()` instance within a `<script>` tag in your markdown.
 
-*README.md*
+<!-- prettier-ignore-start -->
 
 ```markdown
-# Vue demo
+<div id="example-1">
+  <p>{{ message }}</p>
 
-<div id="main">hello {{ msg }}</div>
+  <button v-on:click="hello">Say Hello</button>
 
+  <button v-on:click="counter -= 1">-</button>
+  {{ counter }}
+  <button v-on:click="counter += 1">+</button>
+</div>
+```
+
+<!-- prettier-ignore-end -->
+
+#### Vue 2.x
+
+```markdown
 <script>
   new Vue({
-    el: '#main',
-    data: { msg: 'Vue' }
-  })
+    el: "#example-1",
+    data: function() {
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
+    },
+    methods: {
+      hello: function() {
+        alert(this.message);
+      }
+    }
+  });
 </script>
 ```
 
-!> In a Markdown file, only the script within the first script tag is executed.
+#### Vue 3.x
 
-## Combine Vuep to write playground
+```markdown
+<script>
+  Vue.createApp({
+    data: function() {
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
+    },
+    methods: {
+      hello: function() {
+        alert(this.message);
+      }
+    }
+  }).mount("#example-1");
+</script>
+```
 
-[Vuep](https://github.com/QingWei-Li/vuep) is a component for rendering Vue components with live editor and preview. Supports Vue component spec and JSX.
+The HTML & JavaScript above will render the following:
 
-*index.html*
+<!-- prettier-ignore-start -->
 
-```html
-<!-- Inject CSS file -->
-<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vuep/dist/vuep.css">
-
-<!-- Inject JavaScript file -->
-<script src="//cdn.jsdelivr.net/npm/vue"></script>
-<script src="//cdn.jsdelivr.net/npm/vuep"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify"></script>
-
-<!-- or use the compressed files -->
-<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/vuep/dist/vuep.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
-```
+<div id="example-1">
+  <p>{{ message }}</p>
 
-*README.md*
-```markdown
-# Vuep
+  <button v-on:click="hello">Say Hello</button>
 
-<vuep template="#example"></vuep>
+  <button v-on:click="counter -= 1">-</button>
+  {{ counter }}
+  <button v-on:click="counter += 1">+</button>
+</div>
 
-<script v-pre type="text/x-template" id="example">
-  <template>
-    <div>Hello, {{ name }}!</div>
-  </template>
+<!-- prettier-ignore-end -->
 
-  <script>
-    module.exports = {
-      data: function () {
-        return { name: 'Vue' }
+!> Only the first `<script>` tag in a markdown file is executed. If you are working with multiple Vue components, all `Vue` instances must be created within this tag.
+
+<script>
+  new Vue({
+    el: "#example-1",
+    data: function() {
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
+    },
+    methods: {
+      hello: function() {
+        alert(this.message);
       }
     }
-  </script>
+  });
 </script>
-```
-
-?> Example Refer to the [Vuep documentation](https://qingwei-li.github.io/vuep/).

jest.config.js

@@ -4,7 +4,7 @@ const { globals: serverGlobals } = require('./test/config/server.js');
 const sharedConfig = {
   errorOnDeprecated: true,
   globals: {
-    ...serverGlobals, // BLANK_URL, DOCS_URL, LIB_URL, TEST_HOST
+    ...serverGlobals, // BLANK_URL, DOCS_URL, LIB_URL, NODE_MODULES_URL, TEST_HOST
     DOCS_PATH: path.resolve(__dirname, 'docs'),
     LIB_PATH: path.resolve(__dirname, 'lib'),
     SRC_PATH: path.resolve(__dirname, 'src'),

package-lock.json

@@ -103,6 +103,8 @@
     "rollup-plugin-uglify": "^6.0.4",
     "serve-handler": "^6.1.2",
     "stylus": "^0.54.5",
+    "vue2": "npm:vue@^2.6.12",
+    "vue3": "npm:vue@^3.0.0",
     "xhr-mock": "^2.5.1"
   },
   "keywords": [