Add Vue 3 compatibility

- Update docs
- Update tests
- Add Vue 2 to docs site
- Add Vue 2 & 3 dependencies for tests

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,33 +1,41 @@
 # Vue compatibility
 
-Docsify allows [Vue.js](https://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.
+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.
 
-To get started, load either the production (minified) or development (unminified) version of Vue in your `index.html`:
+To get started, load either the production or development version of Vue in your `index.html`:
+
+#### Vue 2.x
 
 ```html
-<!-- Production (minified) -->
+<!-- Production -->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 
-<!-- Development (unminified, with debugging info via console) -->
+<!-- Development (debugging and Vue.js devtools support) -->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
+#### Vue 3.x
+
+```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>
+```
+
 ## Basic rendering
 
 Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features.
 
 ```markdown
-<button v-on:click.native="this.alert('Hello, World!')">Say Hello</button>
-
 <ul>
   <li v-for="i in 3">{{ i }}</li>
 </ul>
 ```
 
 The HTML above will render the following:
 
-<button v-on:click="this.alert('Hello, World!')">Say Hello</button>
-
 <ul>
   <li v-for="i in 3">{{ i }}</li>
 </ul>
@@ -36,6 +44,8 @@ The HTML above will render the following:
 
 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.
 
+<!-- prettier-ignore-start -->
+
 ```markdown
 <div id="example-1">
   <p>{{ message }}</p>
@@ -48,13 +58,19 @@ Vue components and templates that require `data`, `methods`, computed properties
 </div>
 ```
 
+<!-- prettier-ignore-end -->
+
+#### Vue 2.x
+
 ```markdown
 <script>
   new Vue({
     el: "#example-1",
     data: function() {
-      counter: 0,
-      message: "Hello, World!"
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
     },
     methods: {
       hello: function() {
@@ -65,8 +81,30 @@ Vue components and templates that require `data`, `methods`, computed properties
 </script>
 ```
 
+#### Vue 3.x
+
+```markdown
+<script>
+  Vue.createApp({
+    data: function() {
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
+    },
+    methods: {
+      hello: function() {
+        alert(this.message);
+      }
+    }
+  }).mount("#example-1");
+</script>
+```
+
 The HTML & JavaScript above will render the following:
 
+<!-- prettier-ignore-start -->
+
 <div id="example-1">
   <p>{{ message }}</p>
 
@@ -77,64 +115,18 @@ The HTML & JavaScript above will render the following:
   <button v-on:click="counter += 1">+</button>
 </div>
 
-!> 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.
-
-## Vuep playgrounds
-
-[Vuep](https://github.com/QingWei-Li/vuep) is a Vue component that provides a live editor and preview for Vue content. See the [vuep documentation](https://qingwei-li.github.io/vuep/) for details.
-
-Add Vuep CSS and JavaScript to your `index.html`:
-
-```html
-<!-- Vuep CSS -->
-<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vuep/dist/vuep.css">
-
-<!-- Vuep JavaScript -->
-<script src="//cdn.jsdelivr.net/npm/vuep/dist/vuep.min.js"></script>
-```
-
-Add vuep markup to a markdown file (e.g. `README.md`):
-
-```markdown
-<vuep template="#example-2"></vuep>
-
-<script v-pre type="text/x-template" id="example-2">
-  <template>
-    <div>Hello, {{ name }}!</div>
-  </template>
+<!-- prettier-ignore-end -->
 
-  <script>
-    module.exports = {
-      data: function() {
-        return { name: 'Vue' }
-      }
-    }
-  </script>
-</script>
-```
-
-<vuep template="#example-2"></vuep>
-
-<script v-pre type="text/x-template" id="example-2">
-  <template>
-    <div>Hello, {{ name }}!</div>
-  </template>
-
-  <script>
-    module.exports = {
-      data: function() {
-        return { name: 'World' }
-      }
-    }
-  </script>
-</script>
+!> 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: {
-      counter: 0,
-      message: "Hello, World!"
+    data: function() {
+      return {
+        counter: 0,
+        message: "Hello, World!"
+      };
     },
     methods: {
       hello: function() {

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": [

package.json

@@ -62,18 +62,38 @@ function renderMain(html) {
   if ('Vue' in window) {
     const mainElm = document.querySelector('#main') || {};
     const childElms = mainElm.children || [];
+    const vueVersion =
+      window.Vue.version && Number(window.Vue.version.charAt(0));
 
     for (let i = 0, len = childElms.length; i < len; i++) {
       const elm = childElms[i];
       const isValid = elm.tagName !== 'SCRIPT';
-      const isVue = Boolean(elm.__vue__ && elm.__vue__._isVue);
 
-      if (isValid && !isVue) {
-        new window.Vue({
-          mounted: function() {
-            this.$destroy;
-          },
-        }).$mount(elm);
+      if (!isValid) {
+        continue;
+      }
+
+      // Vue 3
+      if (vueVersion === 3) {
+        const isAlreadyVue = Boolean(elm._vnode && elm._vnode.__v_skip);
+
+        if (!isAlreadyVue) {
+          const app = window.Vue.createApp({});
+
+          app.mount(elm);
+        }
+      }
+      // Vue 2
+      else if (vueVersion === 2) {
+        const isAlreadyVue = Boolean(elm.__vue__ && elm.__vue__._isVue);
+
+        if (!isAlreadyVue) {
+          new window.Vue({
+            mounted: function() {
+              this.$destroy();
+            },
+          }).$mount(elm);
+        }
       }
     }
   }