From 35ad5c559b43f6d70fae054b1812edef9d2b7e4d Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 9 Oct 2020 23:14:57 -0500
Subject: [PATCH 01/41] Add vueOptions and vueGlobalOptions

Fixed #752
---
 src/core/render/index.js | 117 +++++++++++++++++++++++++++------------
 1 file changed, 82 insertions(+), 35 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index 42e62ba96..e21689090 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -13,6 +13,8 @@ import { Compiler } from './compiler';
 import * as tpl from './tpl';
 import { prerenderEmbed } from './embed';
 
+let vueGlobalData;
+
 function executeScript() {
   const script = dom
     .findAll('.markdown-section>script')
@@ -41,58 +43,103 @@ function formatUpdated(html, updated, fn) {
 }
 
 function renderMain(html) {
+  const docsifyConfig = this.config;
+  const markdownElm = dom.find('.markdown-section');
+  const vueVersion =
+    'Vue' in window &&
+    window.Vue.version &&
+    Number(window.Vue.version.charAt(0));
+
+  const isMountedVue = elm => {
+    const isVue2 = Boolean(elm.__vue__ && elm.__vue__._isVue);
+    const isVue3 = Boolean(elm._vnode && elm._vnode.__v_skip);
+
+    return isVue2 || isVue3;
+  };
+
   if (!html) {
     html = '<h1>404 - Not found</h1>';
   }
 
-  this._renderTo('.markdown-section', html);
+  if ('Vue' in window) {
+    const mountedElms = dom
+      .findAll('.markdown-section > *')
+      .filter(elm => isMountedVue(elm));
+
+    // Store global data() return value as shared data object
+    if (!vueGlobalData && docsifyConfig.vueGlobalOptions.data) {
+      vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+    }
+
+    // Destroy/unmount existing Vue instances
+    for (const mountedElm of mountedElms) {
+      if (vueVersion === 2) {
+        mountedElm.__vue__.$destroy();
+      } else if (vueVersion === 3) {
+        mountedElm.__vue_app__.unmount();
+      }
+    }
+  }
+
+  this._renderTo(markdownElm, html);
 
   // Render sidebar with the TOC
-  !this.config.loadSidebar && this._renderSidebar();
+  !docsifyConfig.loadSidebar && this._renderSidebar();
 
   // Execute markdown <script>
   if (
-    this.config.executeScript ||
-    ('Vue' in window && this.config.executeScript !== false)
+    docsifyConfig.executeScript ||
+    ('Vue' in window && docsifyConfig.executeScript !== false)
   ) {
     executeScript();
   }
 
-  // Handle Vue content not handled by markdown <script>
+  // Handle Vue content not mounted by markdown <script>
   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';
-
-      if (!isValid) {
-        continue;
-      }
+    const vueMountData = [];
+
+    if (docsifyConfig.vueOptions) {
+      vueMountData.push(
+        ...Object.entries(docsifyConfig.vueOptions || {})
+          .map(([cssSelector, vueConfig]) => [
+            dom.find(markdownElm, cssSelector),
+            vueConfig,
+          ])
+          .filter(([elm, vueConfig]) => elm)
+      );
+    }
 
-      // Vue 3
-      if (vueVersion === 3) {
-        const isAlreadyVue = Boolean(elm._vnode && elm._vnode.__v_skip);
+    if (docsifyConfig.vueGlobalOptions) {
+      vueMountData.push(
+        ...dom
+          .findAll('.markdown-section > *')
+          // Remove duplicates
+          .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+          .map(elm => [
+            elm,
+            !docsifyConfig.vueGlobalOptions.data
+              ? docsifyConfig.vueGlobalOptions
+              : // Replace data() return value with shared data object. This
+                // mimics the behavior of a global store when using the same
+                // configuration with multiple Vue instances.
+                Object.assign({}, docsifyConfig.vueGlobalOptions, {
+                  data() {
+                    return vueGlobalData;
+                  },
+                }),
+          ])
+      );
+    }
 
-        if (!isAlreadyVue) {
-          const app = window.Vue.createApp({});
+    for (const [mountElm, vueConfig] of vueMountData) {
+      const isValidTag = mountElm.tagName !== 'SCRIPT';
+      const hasBrackets = /{{2}[^{}]*}{2}/.test(mountElm.outerHTML);
 
-          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);
+      if (isValidTag && hasBrackets && !isMountedVue(mountElm)) {
+        if (vueVersion === 2) {
+          new window.Vue(vueConfig).$mount(mountElm);
+        } else if (vueVersion === 3) {
+          window.Vue.createApp(vueConfig).mount(mountElm);
         }
       }
     }

From cd8f2d3efc6b30b0669842ed27407f69a6e72b04 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 10 Oct 2020 01:45:02 -0500
Subject: [PATCH 02/41] Fix vueGlobalOptions.data checks

---
 src/core/render/index.js | 67 +++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index e21689090..a76b49924 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -67,7 +67,12 @@ function renderMain(html) {
       .filter(elm => isMountedVue(elm));
 
     // Store global data() return value as shared data object
-    if (!vueGlobalData && docsifyConfig.vueGlobalOptions.data) {
+    if (
+      !vueGlobalData &&
+      docsifyConfig.vueGlobalOptions &&
+      docsifyConfig.vueGlobalOptions.data &&
+      typeof docsifyConfig.vueGlobalOptions.data === 'function'
+    ) {
       vueGlobalData = docsifyConfig.vueGlobalOptions.data();
     }
 
@@ -98,38 +103,36 @@ function renderMain(html) {
   if ('Vue' in window) {
     const vueMountData = [];
 
-    if (docsifyConfig.vueOptions) {
-      vueMountData.push(
-        ...Object.entries(docsifyConfig.vueOptions || {})
-          .map(([cssSelector, vueConfig]) => [
-            dom.find(markdownElm, cssSelector),
-            vueConfig,
-          ])
-          .filter(([elm, vueConfig]) => elm)
-      );
-    }
+    // vueOptions
+    vueMountData.push(
+      ...Object.entries(docsifyConfig.vueOptions || {})
+        .map(([cssSelector, vueConfig]) => [
+          dom.find(markdownElm, cssSelector),
+          vueConfig,
+        ])
+        .filter(([elm, vueConfig]) => elm)
+    );
 
-    if (docsifyConfig.vueGlobalOptions) {
-      vueMountData.push(
-        ...dom
-          .findAll('.markdown-section > *')
-          // Remove duplicates
-          .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-          .map(elm => [
-            elm,
-            !docsifyConfig.vueGlobalOptions.data
-              ? docsifyConfig.vueGlobalOptions
-              : // Replace data() return value with shared data object. This
-                // mimics the behavior of a global store when using the same
-                // configuration with multiple Vue instances.
-                Object.assign({}, docsifyConfig.vueGlobalOptions, {
-                  data() {
-                    return vueGlobalData;
-                  },
-                }),
-          ])
-      );
-    }
+    // vueGlobalOptions
+    vueMountData.push(
+      ...dom
+        .findAll('.markdown-section > *')
+        // Remove duplicates
+        .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+        .map(elm => [
+          elm,
+          !vueGlobalData
+            ? {}
+            : // Replace data() return value with shared data object. This
+              // mimics the behavior of a global store when using the same
+              // configuration with multiple Vue instances.
+              Object.assign({}, docsifyConfig.vueGlobalOptions || {}, {
+                data() {
+                  return vueGlobalData;
+                },
+              }),
+        ])
+    );
 
     for (const [mountElm, vueConfig] of vueMountData) {
       const isValidTag = mountElm.tagName !== 'SCRIPT';

From ecd053b25ca02706bd0b335c4dccbb3c01db7bb5 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 14 Oct 2020 19:11:26 -0500
Subject: [PATCH 03/41] Support functions in docsify configuration

---
 test/helpers/docsify-init.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index 73637ed69..f212e99aa 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -197,9 +197,21 @@ async function docsifyInit(options = {}) {
   if (isJSDOM) {
     window.$docsify = settings.config;
   } else if (isPlaywright) {
+    // Convert config functions to strings
+    const configString = JSON.stringify(settings.config, (key, val) =>
+      typeof val === 'function' ? `__FN__${val.toString()}` : val
+    );
+
     await page.evaluate(config => {
-      window.$docsify = config;
-    }, settings.config);
+      // Restore config functions from strings
+      const configObj = JSON.parse(config, (key, val) =>
+        /^__FN__/.test(val)
+          ? new Function(`return ${val.split('__FN__')[1]}`)()
+          : val
+      );
+
+      window.$docsify = configObj;
+    }, configString);
   }
 
   // Style URLs

From 5fa79ebcdb1a0f2137e16f2ad6b5548d2d719149 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 14 Oct 2020 19:11:54 -0500
Subject: [PATCH 04/41] Fix Vue content detection and global options

- Add detection of Vue HTML directives to trigger mounting
- Fix bug that processed markdown child nodes as global Vue instances even if vueGlobalOptions is not specified
- Fix bug that prevented passing vueGlobalOptions to global instances if `data()` prop did not exist
- Update Vue config check to test for existence of object keys instead of just the existence object
- Update tests
---
 src/core/render/index.js |  56 +++++----
 test/e2e/vue.test.js     | 258 +++++++++++++++++++++++----------------
 2 files changed, 182 insertions(+), 132 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index a76b49924..bedd8bb0e 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -70,7 +70,6 @@ function renderMain(html) {
     if (
       !vueGlobalData &&
       docsifyConfig.vueGlobalOptions &&
-      docsifyConfig.vueGlobalOptions.data &&
       typeof docsifyConfig.vueGlobalOptions.data === 'function'
     ) {
       vueGlobalData = docsifyConfig.vueGlobalOptions.data();
@@ -110,35 +109,44 @@ function renderMain(html) {
           dom.find(markdownElm, cssSelector),
           vueConfig,
         ])
-        .filter(([elm, vueConfig]) => elm)
+        .filter(
+          ([elm, vueConfig]) => elm && Object.keys(vueConfig || {}).length
+        )
     );
 
     // vueGlobalOptions
-    vueMountData.push(
-      ...dom
-        .findAll('.markdown-section > *')
-        // Remove duplicates
-        .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-        .map(elm => [
-          elm,
-          !vueGlobalData
-            ? {}
-            : // Replace data() return value with shared data object. This
-              // mimics the behavior of a global store when using the same
-              // configuration with multiple Vue instances.
-              Object.assign({}, docsifyConfig.vueGlobalOptions || {}, {
-                data() {
-                  return vueGlobalData;
-                },
-              }),
-        ])
-    );
+    if (Object.keys(docsifyConfig.vueGlobalOptions || {}).length) {
+      vueMountData.push(
+        ...dom
+          .findAll('.markdown-section > *')
+          // Remove duplicates
+          .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+          .map(elm => [
+            elm,
+            !vueGlobalData
+              ? docsifyConfig.vueGlobalOptions
+              : // Replace vueGlobalOptions data() return value with shared data
+                // object. This provides a global store for all Vue instances
+                // that receive vueGlobalOptions as their configuration.
+                Object.assign({}, docsifyConfig.vueGlobalOptions, {
+                  data() {
+                    return vueGlobalData;
+                  },
+                }),
+          ])
+      );
+    }
 
     for (const [mountElm, vueConfig] of vueMountData) {
-      const isValidTag = mountElm.tagName !== 'SCRIPT';
-      const hasBrackets = /{{2}[^{}]*}{2}/.test(mountElm.outerHTML);
+      const isVueMount =
+        // Valid tag
+        mountElm.tagName !== 'SCRIPT' &&
+        // Matches curly braces or HTML directives
+        /{{2}[^{}]*}{2}|\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/.test(
+          mountElm.outerHTML
+        );
 
-      if (isValidTag && hasBrackets && !isMountedVue(mountElm)) {
+      if (isVueMount && !isMountedVue(mountElm)) {
         if (vueVersion === 2) {
           new window.Vue(vueConfig).$mount(mountElm);
         } else if (vueVersion === 3) {
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 395eac573..1bbd3bc06 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -1,141 +1,183 @@
+const stripIndent = require('common-tags/lib/stripIndent');
 const docsifyInit = require('../helpers/docsify-init');
 
-describe('Vue.js Rendering', function() {
-  const vueURLs = [
-    `${NODE_MODULES_URL}/vue2/dist/vue.js`,
-    `${NODE_MODULES_URL}/vue3/dist/vue.global.js`,
-  ];
-
-  // Tests
-  // ---------------------------------------------------------------------------
-  test(`ignores Vue content when window.Vue is not present`, async () => {
-    await docsifyInit({
-      markdown: {
-        homepage: `
-          <div id="test">test<span v-for="i in 5">{{ i }}</span></div>
-        `,
-      },
-    });
-
-    await page.evaluate(() => {
-      return 'Vue' in window === false;
-    });
-    await expect(page).toEqualText('#test', 'test{{ i }}');
-  });
-
-  describe('Basic rendering', function() {
-    for (const vueURL of vueURLs) {
-      const vueVersion = vueURL.match(/vue(\d+)/)[1]; // vue2|vue3
-
-      for (const executeScript of ['unspecified', true, false]) {
-        test(`handles Vue v${vueVersion}.x basic rendering when executeScript is ${executeScript}`, async () => {
-          const docsifyInitConfig = {
-            markdown: {
-              homepage: `
-                <div id="test">test<span v-for="i in 5">{{ i }}</span></div>
-              `,
-            },
-            scriptURLs: vueURL,
-          };
-
-          if (executeScript !== 'unspecified') {
-            docsifyInitConfig.config = {
-              executeScript,
+const vueURLs = [
+  `${NODE_MODULES_URL}/vue2/dist/vue.js`,
+  `${NODE_MODULES_URL}/vue3/dist/vue.global.js`,
+];
+
+describe('Vue.js Compatibility', function() {
+  function getSharedConfig() {
+    const config = {
+      config: {
+        vueGlobalOptions: {
+          data: function() {
+            return {
+              counter: 0,
+              msg: 'vueglobaloptions',
             };
-          }
-
-          await docsifyInit(docsifyInitConfig);
+          },
+        },
+        vueOptions: {
+          '#vueoptions': {
+            data: function() {
+              return {
+                counter: 0,
+                msg: 'vueoptions',
+              };
+            },
+          },
+        },
+      },
+      markdown: {
+        homepage: stripIndent`
+          # <span v-for="i in 5">{{ i }}</span>
 
-          await expect(page).toEqualText('#test', 'test12345');
-        });
-      }
-    }
-  });
+          <div id="vueoptions">
+            <p v-text="msg">---</p>
+            <button v-on:click="counter += 1">+</button>
+            <span>{{ counter }}<span>
+          </div>
 
-  describe('Advanced usage', function() {
-    const testData = {
-      vue2: {
-        markdown: `
-          <div id="test">
+          <div id="vueglobaloptions">
+            <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 
-          <script>
-            new Vue({
-              el: '#test',
-              data() {
-                return {
-                  counter: 0
-                }
-              },
-            });
-          </script>
-        `,
-      },
-      vue3: {
-        markdown: `
-          <div id="test">
+          <div id="vuescript">
+            <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 
           <script>
-            Vue.createApp({
+            const vueConfig = {
               data() {
                 return {
-                  counter: 0
+                  counter: 0,
+                  msg: 'vuescript'
                 }
               },
-            }).mount('#test');
+            }
+            const vueMountElm = '#vuescript';
+            const vueVersion = Number(window.Vue.version.charAt(0));
+
+            if (vueVersion === 2) {
+              new Vue(vueConfig).$mount(vueMountElm);
+            }
+            else if (vueVersion === 3) {
+              Vue.createApp(vueConfig).mount(vueMountElm);
+            }
           </script>
         `,
       },
     };
 
+    return config;
+  }
+
+  // Tests
+  // ---------------------------------------------------------------------------
+  describe('Ignores Vue', function() {
+    test(`content when Vue is not present`, async () => {
+      const docsifyInitConfig = getSharedConfig();
+
+      await docsifyInit(docsifyInitConfig);
+      await page.evaluate(() => {
+        return 'Vue' in window === false;
+      });
+      await expect(page).toEqualText('h1', '{{ i }}');
+      await expect(page).toEqualText('#vueglobaloptions p', '---');
+      await expect(page).toEqualText('#vueoptions p', '---');
+      await expect(page).toEqualText('#vuescript p', '---');
+    });
+
+    test(`content when vueOptions and vueGlobalOptions are undefined`, async () => {
+      const docsifyInitConfig = getSharedConfig();
+
+      docsifyInitConfig.config.vueGlobalOptions = undefined;
+      docsifyInitConfig.config.vueOptions = undefined;
+      docsifyInitConfig.scriptURLs = vueURLs[0];
+
+      await docsifyInit(docsifyInitConfig);
+      await expect(page).toEqualText('h1', '{{ i }}');
+      await expect(page).toEqualText('#vueglobaloptions p', '---');
+      await expect(page).toEqualText('#vueoptions p', '---');
+      await expect(page).toEqualText('#vuescript p', 'vuescript');
+    });
+
+    test(`content when vueGlobalOptions data is undefined`, async () => {
+      const docsifyInitConfig = getSharedConfig();
+
+      docsifyInitConfig.config.vueGlobalOptions.data = undefined;
+      docsifyInitConfig.scriptURLs = vueURLs[0];
+
+      await docsifyInit(docsifyInitConfig);
+      await expect(page).toEqualText('h1', '{{ i }}');
+      await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+      await expect(page).toEqualText('#vueglobaloptions p', '---');
+      await expect(page).toEqualText('#vuescript p', 'vuescript');
+    });
+
+    test(`content when vueOptions data is undefined`, async () => {
+      const docsifyInitConfig = getSharedConfig();
+
+      docsifyInitConfig.config.vueOptions['#vueoptions'].data = undefined;
+      docsifyInitConfig.scriptURLs = vueURLs[0];
+
+      await docsifyInit(docsifyInitConfig);
+      await expect(page).toEqualText('h1', '12345');
+      await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
+      await expect(page).toEqualText('#vueglobaloptions p', 'vueglobaloptions');
+      await expect(page).toEqualText('#vuescript p', 'vuescript');
+    });
+
+    test(`<script> when executeScript is false`, async () => {
+      const docsifyInitConfig = getSharedConfig();
+
+      docsifyInitConfig.config.executeScript = false;
+      docsifyInitConfig.scriptURLs = vueURLs[0];
+
+      await docsifyInit(docsifyInitConfig);
+      await expect(page).toEqualText('#vuescript p', 'vueglobaloptions');
+    });
+  });
+
+  describe('Renders Vue', function() {
     for (const vueURL of vueURLs) {
-      const vueVersion = vueURL.match(/vue(\d+)/)[1]; // vue2|vue3
-      const vueData = testData[`vue${vueVersion}`];
-
-      for (const executeScript of ['unspecified', true]) {
-        test(`handles Vue v${vueVersion}.x advanced usage when executeScript is ${executeScript}`, async () => {
-          const docsifyInitConfig = {
-            markdown: {
-              homepage: vueData.markdown,
-            },
-            scriptURLs: vueURL,
-          };
+      const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
 
-          if (executeScript !== 'unspecified') {
-            docsifyInitConfig.config = {
-              executeScript,
-            };
-          }
+      for (const executeScript of [true, undefined]) {
+        test(`Vue v${vueVersion}: renders when executeScript is ${executeScript}`, async () => {
+          const docsifyInitConfig = getSharedConfig(vueVersion);
+
+          docsifyInitConfig.config.executeScript = executeScript;
+          docsifyInitConfig.scriptURLs = vueURL;
 
           await docsifyInit(docsifyInitConfig);
 
-          await expect(page).toEqualText('#test span', '0');
-          await page.click('#test button');
-          await expect(page).toEqualText('#test span', '1');
+          // Static data
+          await expect(page).toEqualText('h1', '12345');
+          await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+          await expect(page).toEqualText(
+            '#vueglobaloptions p',
+            'vueglobaloptions'
+          );
+          await expect(page).toEqualText('#vuescript p', 'vuescript');
+
+          // Reactive data
+          await expect(page).toEqualText('#vueoptions span', '0');
+          await page.click('#vueoptions button');
+          await expect(page).toEqualText('#vueoptions span', '1');
+          await expect(page).toEqualText('#vueglobaloptions span', '0');
+          await page.click('#vueglobaloptions button');
+          await expect(page).toEqualText('#vueglobaloptions span', '1');
+          await expect(page).toEqualText('#vuescript span', '0');
+          await page.click('#vuescript button');
+          await expect(page).toEqualText('#vuescript span', '1');
         });
       }
-
-      test(`handles Vue v${vueVersion}.x advanced usage when executeScript is false`, async () => {
-        const docsifyInitConfig = {
-          config: {
-            executeScript: false,
-          },
-          markdown: {
-            homepage: vueData.markdown,
-          },
-          scriptURLs: vueURL,
-        };
-
-        await docsifyInit(docsifyInitConfig);
-
-        const textContent = await page.textContent('#test span');
-        expect(textContent).toBe('');
-      });
     }
   });
 });

From a2386e5a59e17775e2077d4e3dce7f389deda909 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Thu, 15 Oct 2020 23:25:02 -0500
Subject: [PATCH 05/41] Add vueComponents support

---
 src/core/render/index.js | 116 +++++++++++++++++-------
 test/e2e/vue.test.js     | 191 ++++++++++++++++++++++-----------------
 2 files changed, 188 insertions(+), 119 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index bedd8bb0e..f5de59151 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -66,15 +66,6 @@ function renderMain(html) {
       .findAll('.markdown-section > *')
       .filter(elm => isMountedVue(elm));
 
-    // Store global data() return value as shared data object
-    if (
-      !vueGlobalData &&
-      docsifyConfig.vueGlobalOptions &&
-      typeof docsifyConfig.vueGlobalOptions.data === 'function'
-    ) {
-      vueGlobalData = docsifyConfig.vueGlobalOptions.data();
-    }
-
     // Destroy/unmount existing Vue instances
     for (const mountedElm of mountedElms) {
       if (vueVersion === 2) {
@@ -101,6 +92,27 @@ function renderMain(html) {
   // Handle Vue content not mounted by markdown <script>
   if ('Vue' in window) {
     const vueMountData = [];
+    const vueComponentNames = Object.keys(docsifyConfig.vueComponents || {});
+
+    // Register global vueComponents
+    if (vueVersion === 2 && vueComponentNames.length) {
+      vueComponentNames.forEach(name => {
+        const isNotRegistered = !window.Vue.options.components[name];
+
+        if (isNotRegistered) {
+          window.Vue.component(name, docsifyConfig.vueComponents[name]);
+        }
+      });
+    }
+
+    // Store global data() return value as shared data object
+    if (
+      !vueGlobalData &&
+      docsifyConfig.vueGlobalOptions &&
+      typeof docsifyConfig.vueGlobalOptions.data === 'function'
+    ) {
+      vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+    }
 
     // vueOptions
     vueMountData.push(
@@ -109,48 +121,82 @@ function renderMain(html) {
           dom.find(markdownElm, cssSelector),
           vueConfig,
         ])
-        .filter(
-          ([elm, vueConfig]) => elm && Object.keys(vueConfig || {}).length
-        )
+        .filter(([elm, vueConfig]) => elm)
     );
 
     // vueGlobalOptions
-    if (Object.keys(docsifyConfig.vueGlobalOptions || {}).length) {
+    if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
       vueMountData.push(
         ...dom
           .findAll('.markdown-section > *')
           // Remove duplicates
           .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-          .map(elm => [
-            elm,
-            !vueGlobalData
-              ? docsifyConfig.vueGlobalOptions
-              : // Replace vueGlobalOptions data() return value with shared data
-                // object. This provides a global store for all Vue instances
-                // that receive vueGlobalOptions as their configuration.
-                Object.assign({}, docsifyConfig.vueGlobalOptions, {
-                  data() {
-                    return vueGlobalData;
-                  },
-                }),
-          ])
+          // Detect Vue content
+          .filter(elm => {
+            const isVueMount =
+              // is a component
+              elm.tagName.toLowerCase() in
+                (docsifyConfig.vueComponents || {}) ||
+              // has a component(s)
+              elm.querySelector(vueComponentNames.join(',') || null) ||
+              // has brackets
+              (docsifyConfig.vueGlobalOptions &&
+                /{{2}[^{}]*}{2}/.test(elm.outerHTML)) ||
+              // has directive
+              /{\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/.test(
+                elm.outerHTML
+              );
+
+            return isVueMount;
+          })
+          .map(elm => {
+            // Clone global configuration
+            const vueConfig = Object.assign(
+              {},
+              docsifyConfig.vueGlobalOptions || {}
+            );
+
+            // Replace vueGlobalOptions data() return value with shared data object.
+            // This provides a global store for all Vue instances that receive
+            // vueGlobalOptions as their configuration.
+            if (vueGlobalData) {
+              vueConfig.data = function() {
+                return vueGlobalData;
+              };
+            }
+
+            return [elm, vueConfig];
+          })
       );
     }
 
+    // Mount
     for (const [mountElm, vueConfig] of vueMountData) {
-      const isVueMount =
-        // Valid tag
-        mountElm.tagName !== 'SCRIPT' &&
-        // Matches curly braces or HTML directives
-        /{{2}[^{}]*}{2}|\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/.test(
-          mountElm.outerHTML
-        );
+      const isVueAttr = 'data-isvue';
+      const isSkipElm =
+        // Is an invalid tag
+        mountElm.matches('pre, script') ||
+        // Is a mounted instance
+        isMountedVue(mountElm) ||
+        // Has mounted instance(s)
+        mountElm.querySelector(`[${isVueAttr}]`);
+
+      if (!isSkipElm) {
+        mountElm.setAttribute(isVueAttr, '');
 
-      if (isVueMount && !isMountedVue(mountElm)) {
         if (vueVersion === 2) {
           new window.Vue(vueConfig).$mount(mountElm);
         } else if (vueVersion === 3) {
-          window.Vue.createApp(vueConfig).mount(mountElm);
+          const app = window.Vue.createApp(vueConfig);
+
+          // Register global vueComponents
+          vueComponentNames.forEach(name => {
+            const config = docsifyConfig.vueComponents[name];
+
+            app.component(name, config);
+          });
+
+          app.mount(mountElm);
         }
       }
     }
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 1bbd3bc06..a83d8d048 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -10,6 +10,18 @@ describe('Vue.js Compatibility', function() {
   function getSharedConfig() {
     const config = {
       config: {
+        vueComponents: {
+          'button-counter': {
+            template: `
+              <button @click="counter++">{{ counter }}</button>
+            `,
+            data: function() {
+              return {
+                counter: 0,
+              };
+            },
+          },
+        },
         vueGlobalOptions: {
           data: function() {
             return {
@@ -31,15 +43,17 @@ describe('Vue.js Compatibility', function() {
       },
       markdown: {
         homepage: stripIndent`
-          # <span v-for="i in 5">{{ i }}</span>
+          <div id="vuefor"><span v-for="i in 5">{{ i }}</span></div>
 
-          <div id="vueoptions">
+          <button-counter id="vuecomponent">---</button-counter>
+
+          <div id="vueglobaloptions">
             <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 
-          <div id="vueglobaloptions">
+          <div id="vueoptions">
             <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
@@ -79,105 +93,114 @@ describe('Vue.js Compatibility', function() {
 
   // Tests
   // ---------------------------------------------------------------------------
-  describe('Ignores Vue', function() {
-    test(`content when Vue is not present`, async () => {
-      const docsifyInitConfig = getSharedConfig();
-
-      await docsifyInit(docsifyInitConfig);
-      await page.evaluate(() => {
-        return 'Vue' in window === false;
-      });
-      await expect(page).toEqualText('h1', '{{ i }}');
-      await expect(page).toEqualText('#vueglobaloptions p', '---');
-      await expect(page).toEqualText('#vueoptions p', '---');
-      await expect(page).toEqualText('#vuescript p', '---');
-    });
-
-    test(`content when vueOptions and vueGlobalOptions are undefined`, async () => {
-      const docsifyInitConfig = getSharedConfig();
-
-      docsifyInitConfig.config.vueGlobalOptions = undefined;
-      docsifyInitConfig.config.vueOptions = undefined;
-      docsifyInitConfig.scriptURLs = vueURLs[0];
-
-      await docsifyInit(docsifyInitConfig);
-      await expect(page).toEqualText('h1', '{{ i }}');
-      await expect(page).toEqualText('#vueglobaloptions p', '---');
-      await expect(page).toEqualText('#vueoptions p', '---');
-      await expect(page).toEqualText('#vuescript p', 'vuescript');
-    });
-
-    test(`content when vueGlobalOptions data is undefined`, async () => {
-      const docsifyInitConfig = getSharedConfig();
-
-      docsifyInitConfig.config.vueGlobalOptions.data = undefined;
-      docsifyInitConfig.scriptURLs = vueURLs[0];
-
-      await docsifyInit(docsifyInitConfig);
-      await expect(page).toEqualText('h1', '{{ i }}');
-      await expect(page).toEqualText('#vueoptions p', 'vueoptions');
-      await expect(page).toEqualText('#vueglobaloptions p', '---');
-      await expect(page).toEqualText('#vuescript p', 'vuescript');
-    });
-
-    test(`content when vueOptions data is undefined`, async () => {
-      const docsifyInitConfig = getSharedConfig();
-
-      docsifyInitConfig.config.vueOptions['#vueoptions'].data = undefined;
-      docsifyInitConfig.scriptURLs = vueURLs[0];
-
-      await docsifyInit(docsifyInitConfig);
-      await expect(page).toEqualText('h1', '12345');
-      await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
-      await expect(page).toEqualText('#vueglobaloptions p', 'vueglobaloptions');
-      await expect(page).toEqualText('#vuescript p', 'vuescript');
-    });
-
-    test(`<script> when executeScript is false`, async () => {
-      const docsifyInitConfig = getSharedConfig();
-
-      docsifyInitConfig.config.executeScript = false;
-      docsifyInitConfig.scriptURLs = vueURLs[0];
-
-      await docsifyInit(docsifyInitConfig);
-      await expect(page).toEqualText('#vuescript p', 'vueglobaloptions');
-    });
-  });
-
-  describe('Renders Vue', function() {
-    for (const vueURL of vueURLs) {
-      const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
+  for (const vueURL of vueURLs) {
+    const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
 
+    describe(`Vue v${vueVersion}`, function() {
       for (const executeScript of [true, undefined]) {
-        test(`Vue v${vueVersion}: renders when executeScript is ${executeScript}`, async () => {
-          const docsifyInitConfig = getSharedConfig(vueVersion);
+        test(`renders content when executeScript is ${executeScript}`, async () => {
+          const docsifyInitConfig = getSharedConfig();
 
           docsifyInitConfig.config.executeScript = executeScript;
           docsifyInitConfig.scriptURLs = vueURL;
 
           await docsifyInit(docsifyInitConfig);
 
-          // Static data
-          await expect(page).toEqualText('h1', '12345');
-          await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+          // Static
+          await expect(page).toEqualText('#vuefor', '12345');
+          await expect(page).toEqualText('#vuecomponent', '0');
           await expect(page).toEqualText(
             '#vueglobaloptions p',
             'vueglobaloptions'
           );
+          await expect(page).toEqualText('#vueglobaloptions span', '0');
+          await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+          await expect(page).toEqualText('#vueoptions span', '0');
           await expect(page).toEqualText('#vuescript p', 'vuescript');
+          await expect(page).toEqualText('#vuescript span', '0');
 
-          // Reactive data
-          await expect(page).toEqualText('#vueoptions span', '0');
-          await page.click('#vueoptions button');
-          await expect(page).toEqualText('#vueoptions span', '1');
-          await expect(page).toEqualText('#vueglobaloptions span', '0');
+          // Reactive
+          await page.click('#vuecomponent');
+          await expect(page).toEqualText('#vuecomponent', '1');
           await page.click('#vueglobaloptions button');
           await expect(page).toEqualText('#vueglobaloptions span', '1');
-          await expect(page).toEqualText('#vuescript span', '0');
+          await page.click('#vueoptions button');
+          await expect(page).toEqualText('#vueoptions span', '1');
           await page.click('#vuescript button');
           await expect(page).toEqualText('#vuescript span', '1');
         });
       }
-    }
-  });
+
+      test(`ignores content when Vue is not present`, async () => {
+        const docsifyInitConfig = getSharedConfig();
+
+        await docsifyInit(docsifyInitConfig);
+        await page.evaluate(() => {
+          return 'Vue' in window === false;
+        });
+        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuecomponent', '---');
+        await expect(page).toEqualText('#vueglobaloptions p', '---');
+        await expect(page).toEqualText('#vueoptions p', '---');
+        await expect(page).toEqualText('#vuescript p', '---');
+      });
+
+      test(`ignores content when vueComponents, vueOptions, and vueGlobalOptions are undefined`, async () => {
+        const docsifyInitConfig = getSharedConfig();
+
+        docsifyInitConfig.config.vueComponents = undefined;
+        docsifyInitConfig.config.vueGlobalOptions = undefined;
+        docsifyInitConfig.config.vueOptions = undefined;
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuecomponent', '---');
+        await expect(page).toEqualText('#vueglobaloptions p', '---');
+        await expect(page).toEqualText('#vueoptions p', '---');
+        await expect(page).toEqualText('#vuescript p', 'vuescript');
+      });
+
+      test(`ignores content when vueGlobalOptions is undefined`, async () => {
+        const docsifyInitConfig = getSharedConfig();
+
+        docsifyInitConfig.config.vueGlobalOptions = undefined;
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuecomponent', '0');
+        await expect(page).toEqualText('#vueglobaloptions p', '---');
+        await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+        await expect(page).toEqualText('#vuescript p', 'vuescript');
+      });
+
+      test(`ignores content when vueOptions is undefined`, async () => {
+        const docsifyInitConfig = getSharedConfig();
+
+        docsifyInitConfig.config.vueOptions['#vueoptions'] = undefined;
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page).toEqualText('#vuefor', '12345');
+        await expect(page).toEqualText('#vuecomponent', '0');
+        await expect(page).toEqualText(
+          '#vueglobaloptions p',
+          'vueglobaloptions'
+        );
+        await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
+        await expect(page).toEqualText('#vuescript p', 'vuescript');
+      });
+
+      test(`ignores <script> when executeScript is false`, async () => {
+        const docsifyInitConfig = getSharedConfig();
+
+        docsifyInitConfig.config.executeScript = false;
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page).toEqualText('#vuescript p', 'vueglobaloptions');
+      });
+    });
+  }
 });

From bc2e09193764a7249ce29a7f718d6cacf25532d3 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 16 Oct 2020 00:06:42 -0500
Subject: [PATCH 06/41] Ignore `el` property in Vue configs for Vue v2

---
 src/core/render/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index f5de59151..61ea0e885 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -185,6 +185,7 @@ function renderMain(html) {
         mountElm.setAttribute(isVueAttr, '');
 
         if (vueVersion === 2) {
+          vueConfig.el = undefined;
           new window.Vue(vueConfig).$mount(mountElm);
         } else if (vueVersion === 3) {
           const app = window.Vue.createApp(vueConfig);

From 1774ab8703f73a2d45b4a19121aa2fd6427d6c85 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 17 Oct 2020 01:41:40 -0500
Subject: [PATCH 07/41] Initial commit

---
 .markdownlint.json | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .markdownlint.json

diff --git a/.markdownlint.json b/.markdownlint.json
new file mode 100644
index 000000000..26593a227
--- /dev/null
+++ b/.markdownlint.json
@@ -0,0 +1,4 @@
+{
+  "MD013": false,
+  "MD033": false
+}

From 6d152e2bec919db9765f190209dfc4bfa261fe81 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 17 Oct 2020 01:46:41 -0500
Subject: [PATCH 08/41] Refactor regular expression usage

---
 src/core/render/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index 61ea0e885..bb288f09d 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -124,8 +124,11 @@ function renderMain(html) {
         .filter(([elm, vueConfig]) => elm)
     );
 
-    // vueGlobalOptions
+    // Template syntax, vueComponents, vueGlobalOptions
     if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
+      const reHasBraces = /{{2}[^{}]*}{2}/;
+      const reHasDirective = /\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/;
+
       vueMountData.push(
         ...dom
           .findAll('.markdown-section > *')
@@ -139,13 +142,10 @@ function renderMain(html) {
                 (docsifyConfig.vueComponents || {}) ||
               // has a component(s)
               elm.querySelector(vueComponentNames.join(',') || null) ||
-              // has brackets
-              (docsifyConfig.vueGlobalOptions &&
-                /{{2}[^{}]*}{2}/.test(elm.outerHTML)) ||
+              // has curly braces
+              reHasBraces.test(elm.outerHTML) ||
               // has directive
-              /{\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/.test(
-                elm.outerHTML
-              );
+              reHasDirective.test(elm.outerHTML);
 
             return isVueMount;
           })

From 758538c1623eabd053f9c2c4134a0d792a6dc295 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 17 Oct 2020 01:49:53 -0500
Subject: [PATCH 09/41] Add `<output>`. Refactor `<pre>` and `<code>`.

---
 src/themes/vue.styl | 107 +++++++++++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/src/themes/vue.styl b/src/themes/vue.styl
index 54f161de4..ff842a29c 100644
--- a/src/themes/vue.styl
+++ b/src/themes/vue.styl
@@ -103,28 +103,85 @@ body
 .markdown-section em
   color #7f8c8d
 
-.markdown-section code
+.markdown-section code,
+.markdown-section pre,
+.markdown-section output::after
+  font-family 'Roboto Mono', Monaco, courier, monospace
+
+.markdown-section code,
+.markdown-section pre
   background-color #f8f8f8
+
+.markdown-section pre,
+.markdown-section output
+  margin 1.2em 0
+  position relative
+
+.markdown-section pre > code,
+.markdown-section output
+  border-radius 2px
+  display block
+
+.markdown-section pre > code,
+.markdown-section output::after
+  -moz-osx-font-smoothing initial
+  -webkit-font-smoothing initial
+
+.markdown-section code
   border-radius 2px
   color #e96900
-  font-family 'Roboto Mono', Monaco, courier, monospace
   font-size 0.8rem
   margin 0 2px
   padding 3px 5px
   white-space pre-wrap
 
 .markdown-section pre
-  -moz-osx-font-smoothing initial
-  -webkit-font-smoothing initial
-  background-color #f8f8f8
-  font-family 'Roboto Mono', Monaco, courier, monospace
+  padding 0 1.4rem
   line-height 1.5rem
-  margin 1.2em 0
   overflow auto
-  padding 0 1.4rem
-  position relative
   word-wrap normal
 
+.markdown-section pre > code
+  color #525252
+  font-size 0.8rem
+  padding 2.2em 5px
+  line-height inherit
+  margin 0 2px
+  max-width inherit
+  overflow inherit
+  white-space inherit
+
+.markdown-section output
+  padding: 1.7rem 1.4rem
+  border 1px dotted #ccc
+
+.markdown-section output > :first-child
+  margin-top: 0;
+
+.markdown-section output > :last-child
+  margin-bottom: 0;
+
+.markdown-section code::after, .markdown-section code::before,
+.markdown-section output::after, .markdown-section output::before
+  letter-spacing 0.05rem
+
+.markdown-section pre::after,
+.markdown-section output::after
+  color #ccc
+  font-size 0.6rem
+  font-weight 600
+  height 15px
+  line-height 15px
+  padding 5px 10px 0
+  position absolute
+  right 0
+  text-align right
+  top 0
+
+.markdown-section pre::after
+.markdown-section output::after
+  content attr(data-lang)
+
 /* code highlight */
 .token.comment, .token.prolog, .token.doctype, .token.cdata
   color #8e908c
@@ -187,41 +244,9 @@ body
 .token.entity
   cursor help
 
-.markdown-section pre > code
-  -moz-osx-font-smoothing initial
-  -webkit-font-smoothing initial
-  background-color #f8f8f8
-  border-radius 2px
-  color #525252
-  display block
-  font-family 'Roboto Mono', Monaco, courier, monospace
-  font-size 0.8rem
-  line-height inherit
-  margin 0 2px
-  max-width inherit
-  overflow inherit
-  padding 2.2em 5px
-  white-space inherit
-
-.markdown-section code::after, .markdown-section code::before
-  letter-spacing 0.05rem
-
 code .token
   -moz-osx-font-smoothing initial
   -webkit-font-smoothing initial
   min-height 1.5rem
   position: relative
   left: auto
-
-pre::after
-  color #ccc
-  content attr(data-lang)
-  font-size 0.6rem
-  font-weight 600
-  height 15px
-  line-height 15px
-  padding 5px 10px 0
-  position absolute
-  right 0
-  text-align right
-  top 0

From 019365969d4a4e284507f1c84eaf7ccc57483537 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 17 Oct 2020 01:50:46 -0500
Subject: [PATCH 10/41] Update docs with new Vue features and usage

---
 docs/index.html |  46 +++++++++
 docs/vue.md     | 257 +++++++++++++++++++++++++++++++++---------------
 2 files changed, 221 insertions(+), 82 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 0693aba3a..d1f27d450 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -101,6 +101,51 @@
             '/': 'Search',
           },
         },
+        vueGlobalOptions: {
+          data() {
+            return {
+              count: 0,
+              message: 'Hello, World!',
+            };
+          },
+          methods: {
+            hello: function() {
+              alert(this.message);
+            },
+          },
+        },
+        vueOptions: {
+          '#counter': {
+            data() {
+              return {
+                count: 0,
+              };
+            },
+            computed: {
+              message: function() {
+                const date = new Date();
+                const hours = date.getHours();
+                const greeting = hours < 12 ? 'morning' : 'day';
+
+                return `Good ${greeting}!`;
+              },
+            },
+          },
+        },
+        vueComponents: {
+          'button-counter': {
+            template: `
+            <button @click="count += 1">
+              You clicked me {{ count }} times
+            </button>
+          `,
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
         plugins: [
           function(hook, vm) {
             hook.beforeEach(function(html) {
@@ -163,5 +208,6 @@
       })();
     </script>
     <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> -->
   </body>
 </html>
diff --git a/docs/vue.md b/docs/vue.md
index 5e62363d0..c4ef62942 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -1,137 +1,230 @@
 # Vue compatibility
 
-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.
+Docsify allows Vue content to be added directly to you Markdown files. This can greatly simplify working with data and adding reactivity to your site.
 
-To get started, load either the production or development version of Vue in your `index.html`:
-
-#### Vue 2.x
+To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file:
 
 ```html
-<!-- Production -->
+<!-- Vue 2.x -->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 
-<!-- Development (debugging and Vue.js devtools support) -->
-<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+<!-- Vue 3.x -->
+<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
 ```
 
-#### Vue 3.x
+The URLs above will load a production version of Vue which is optimized for performance. Alternatively, development versions of Vue are larger but offer helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support:
 
 ```html
-<!-- Production -->
-<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+<!-- Vue 2.x -->
+<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 
-<!-- Development (debugging and Vue.js devtools support) -->
+<!-- Vue 3.x -->
 <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
 ```
 
-## Basic rendering
+## Template syntax
 
-Docsify will automatically render basic Vue content that does not require `data`, `methods`, or other instance features.
+Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) can be added directly to your markdown pages. This syntax can be used to generate dynamic content without additional configuration using [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives).
 
 ```markdown
+<!-- JavaScript expressions -->
+<p>2 + 2 = {{ 2 + 2 }}</p>
+
+<!-- Hide in docsify, show everywhere else (e.g. GitHub) -->
+<p v-if="false">Text for GitHub</p>
+
+<!-- Sequenced content -->
 <ul>
-  <li v-for="i in 3">{{ i }}</li>
+  <li v-for="i in 3">Item {{ i }}</li>
 </ul>
 ```
 
-The HTML above will render the following:
+<output data-lang="output">
+  <p>2 + 2 = {{ 2 + 2 }}</p>
 
-<ul>
-  <li v-for="i in 3">{{ i }}</li>
-</ul>
+  <p v-if="false">Text for GitHub</p>
+
+  <ul>
+    <li v-for="i in 3">Item {{ i }}</li>
+  </ul>
+</output>
 
-## Advanced usage
+[View markdown on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
 
-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.
+Vue content becomes more interesting when data, methods, lifecycle hooks, and computed properties are used. These options can be specified as [global options](#global-options), [instance options](#instance-options), or within [components](#components).
 
-<!-- prettier-ignore-start -->
+```js
+{
+  data() {
+    return {
+      message: 'Hello, World!',
+    };
+  },
+  methods: {
+    hello() {
+      alert(this.message);
+    }
+  }
+}
+```
 
 ```markdown
-<div id="example-1">
-  <p>{{ message }}</p>
+<!-- Show message in docsify, hide on GitHub  -->
+<p v-text="message"></p>
 
-  <button v-on:click="hello">Say Hello</button>
+<!-- Show message in docsify, Show text on GitHub  -->
+<p v-text="message">Text for GitHub</p>
 
-  <button v-on:click="counter -= 1">-</button>
-  {{ counter }}
-  <button v-on:click="counter += 1">+</button>
-</div>
+<!-- Invoke hello method -->
+<p>
+  <button v-on:click="hello">Say Hello</button>
+</p>
 ```
 
-<!-- prettier-ignore-end -->
+<output data-lang="output">
+  <p v-text="message"></p>
+  <p v-text="message">Text for GitHub</p>
+  <p><button v-on:click="hello">Say Hello</button></p>
+</output>
 
-#### Vue 2.x
+[View markdown on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#options)
 
-```markdown
-<script>
-  new Vue({
-    el: "#example-1",
-    data: function() {
+## Global options
+
+Use `vueGlobalOptions` to share data, methods, lifecycle hooks, and computed properties throughout your site. These options will be available to Vue content not explicitly mounted via [instance options](#instance-options), [components](#components), or a markdown `<script>`.
+
+```js
+window.$docsify = {
+  vueGlobalOptions: {
+    data() {
       return {
-        counter: 0,
-        message: "Hello, World!"
+        count: 0,
       };
     },
-    methods: {
-      hello: function() {
-        alert(this.message);
-      }
-    }
-  });
-</script>
+  },
+};
 ```
 
-#### Vue 3.x
-
 ```markdown
-<script>
-  Vue.createApp({
-    data: function() {
-      return {
-        counter: 0,
-        message: "Hello, World!"
-      };
-    },
-    methods: {
-      hello: function() {
-        alert(this.message);
+<p>
+  <button v-on:click="count -= 1">-</button>
+  {{ count }}
+  <button v-on:click="count += 1">+</button>
+</p>
+```
+
+Keep in mind that global `data()` is shared, so changes made in one location will affect all locations where global `data()` is used. These changes will also persist as users navigate your site. To demonstrate, let's render the above counter twice.
+
+<output data-lang="output">
+  <p>
+    <button v-on:click="count -= 1">-</button>
+    {{ count }}
+    <button v-on:click="count += 1">+</button>
+  </p>
+  <p>
+    <button v-on:click="count -= 1">-</button>
+    {{ count }}
+    <button v-on:click="count += 1">+</button>
+  </p>
+</output>
+
+Notice how changes made to one counter affect the other. This is because both counters reference the global `count` value. Now, navigate to a new page and return to this page to see how these changes persists.
+
+## Instance options
+
+Use `vueOptions` to specify DOM elements to mount as Vue instances and their associated options as `key:value` pairs. DOM elements are specified using [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key. Selectors are limited in scope to the main content area
+
+```js
+window.$docsify = {
+  vueOptions: {
+    "#counter": {
+      data() {
+        return {
+          count: 0
+        };
+      }
+      computed: {
+        message() {
+          const date = new Date();
+          const hours = date.getHours();
+          const greeting = hours < 12 ? 'morning' : 'day';
+
+          return `Good ${greeting}!`;
+        }
       }
     }
-  }).mount("#example-1");
-</script>
+  }
+};
 ```
 
-The HTML & JavaScript above will render the following:
-
-<!-- prettier-ignore-start -->
+```markdown
+<div id="counter">
+  <p>{{ message }}</p>
+  <button v-on:click="count -= 10">-</button>
+  {{ count }}
+  <button v-on:click="count += 10">+</button>
+</div>
+```
 
-<div id="example-1">
+<output id="counter">
   <p>{{ message }}</p>
+  <button v-on:click="count -= 10">-</button>
+  {{ count }}
+  <button v-on:click="count += 10">+</button>
+</output>
+
+## Components
+
+Docsify provides components
+
+```js
+window.$docsify = {
+  vueComponents: {
+    'button-counter': {
+      template: `
+        <button @click="count += 1">
+          You clicked me {{ count }} times
+        </button>
+      `,
+      data() {
+        return {
+          count: 0,
+        };
+      },
+    },
+  },
+};
+```
 
-  <button v-on:click="hello">Say Hello</button>
+```markdown
+<button-counter></button-counter>
+```
 
-  <button v-on:click="counter -= 1">-</button>
-  {{ counter }}
-  <button v-on:click="counter += 1">+</button>
-</div>
+<output data-lang="output">
+  <button-counter></button-counter>
+</output>
 
-<!-- prettier-ignore-end -->
+## Markdown 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.
+TBD
 
+```html
+<!-- Vue 2.x  -->
 <script>
   new Vue({
-    el: "#example-1",
-    data: function() {
-      return {
-        counter: 0,
-        message: "Hello, World!"
-      };
-    },
-    methods: {
-      hello: function() {
-        alert(this.message);
-      }
-    }
+    el: '#example',
+    // ...
   });
 </script>
+```
+
+```html
+<!-- Vue 3.x  -->
+<script>
+  Vue.createApp({
+    // ...
+  }).mount('#example');
+</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.

From 8a56f7241fb5edaf0ab413f065900a73e1b506ef Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sun, 18 Oct 2020 18:35:24 -0500
Subject: [PATCH 11/41] Fix directive detection

---
 src/core/render/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index bb288f09d..8f7193388 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -127,7 +127,7 @@ function renderMain(html) {
     // Template syntax, vueComponents, vueGlobalOptions
     if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
       const reHasBraces = /{{2}[^{}]*}{2}/;
-      const reHasDirective = /\sv-(bind|cloak|else|else-if|for|html|if|is|model|on|once|pre|show|slot|text)=/;
+      const reHasDirective = /\sv-(bind:|cloak|else|else-if=|for=|html=|if=|is=|model=|on:|once|pre|show=|slot=|text=)/;
 
       vueMountData.push(
         ...dom

From 5a2dde162451f69533c813856c6ce3f7fbca5f32 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Tue, 20 Oct 2020 17:45:34 -0500
Subject: [PATCH 12/41] Update docs

---
 docs/configuration.md | 113 ++++++++++++++++++++--
 docs/index.html       |  29 ++++--
 docs/vue.md           | 218 ++++++++++++++++++++++++++++++------------
 3 files changed, 285 insertions(+), 75 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 7a65553a3..54d6720f7 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -494,15 +494,15 @@ window.$docsify = {
 ```
 
 ## crossOriginLinks
-- type: `Array`  
 
-When `routerMode: 'history'`, you may face the cross-origin issues, See [#1379](https://github.com/docsifyjs/docsify/issues/1379).  
-In Markdown content, there is a simple way to solve it, see extends Markdown syntax `Cross-Origin link` in [helpers](helpers.md).  
+- type: `Array`
+
+When `routerMode: 'history'`, you may face the cross-origin issues, See [#1379](https://github.com/docsifyjs/docsify/issues/1379).
+In Markdown content, there is a simple way to solve it, see extends Markdown syntax `Cross-Origin link` in [helpers](helpers.md).
+
 ```js
 window.$docsify = {
-  crossOriginLinks:[
-      "https://example.com/cross-origin-link",
-   ],
+  crossOriginLinks: ['https://example.com/cross-origin-link'],
 };
 ```
 
@@ -629,3 +629,104 @@ window.$docsify = {
   topMargin: 90, // default: 0
 };
 ```
+
+## vueComponents
+
+- type: `Object`
+
+Registers Vue components using the component name as the key with an object containing Vue options as the value.
+
+```js
+window.$docsify = {
+  vueComponents: {
+    'button-counter': {
+      template: `
+        <button @click="count += 1">
+          You clicked me {{ count }} times
+        </button>
+      `,
+      data() {
+        return {
+          count: 0,
+        };
+      },
+    },
+  },
+};
+```
+
+```markdown
+<button-counter></button-counter>
+```
+
+<output data-lang="output">
+  <button-counter></button-counter>
+</output>
+
+## vueGlobalOptions
+
+- type: `Object`
+
+Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueOptions](#vueoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
+
+```js
+window.$docsify = {
+  vueGlobalOptions: {
+    data() {
+      return {
+        count: 0,
+      };
+    },
+  },
+};
+```
+
+```markdown
+<p>
+  <button v-on:click="count -= 1">-</button>
+  {{ count }}
+  <button v-on:click="count += 1">+</button>
+</p>
+```
+
+<output data-lang="output">
+  <p>
+    <button v-on:click="count -= 1">-</button>
+    {{ count }}
+    <button v-on:click="count += 1">+</button>
+  </p>
+</output>
+
+## vueOptions
+
+- type: `Object`
+
+Specifies Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value.
+
+```js
+window.$docsify = {
+  vueOptions: {
+    '#counter': {
+      data() {
+        return {
+          count: 0,
+        };
+      },
+    },
+  },
+};
+```
+
+```markdown
+<div id="counter">
+  <button v-on:click="count -= 1">-</button>
+  {{ count }}
+  <button v-on:click="count += 1">+</button>
+</div>
+```
+
+<output id="counter">
+  <button v-on:click="count -= 1">-</button>
+  {{ count }}
+  <button v-on:click="count += 1">+</button>
+</output>
diff --git a/docs/index.html b/docs/index.html
index d1f27d450..8e6e5377d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -106,8 +106,28 @@
             return {
               count: 0,
               message: 'Hello, World!',
+              // Fake API response
+              images: [
+                { title: 'Image 1', url: 'https://picsum.photos/150?random=1' },
+                { title: 'Image 2', url: 'https://picsum.photos/150?random=2' },
+                { title: 'Image 3', url: 'https://picsum.photos/150?random=3' },
+              ],
             };
           },
+          computed: {
+            timeOfDay() {
+              const date = new Date();
+              const hours = date.getHours();
+
+              if (hours < 12) {
+                return 'morning';
+              } else if (hours < 18) {
+                return 'afternoon';
+              } else {
+                return 'evening';
+              }
+            },
+          },
           methods: {
             hello: function() {
               alert(this.message);
@@ -121,15 +141,6 @@
                 count: 0,
               };
             },
-            computed: {
-              message: function() {
-                const date = new Date();
-                const hours = date.getHours();
-                const greeting = hours < 12 ? 'morning' : 'day';
-
-                return `Good ${greeting}!`;
-              },
-            },
           },
         },
         vueComponents: {
diff --git a/docs/vue.md b/docs/vue.md
index c4ef62942..6b7065470 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -1,97 +1,193 @@
 # Vue compatibility
 
-Docsify allows Vue content to be added directly to you Markdown files. This can greatly simplify working with data and adding reactivity to your site.
+Docsify allows Vue content to be added directly to you markdown pages. This can greatly simplify working with data and adding reactivity to your site.
 
-To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file:
+To get started, add either Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file:
 
 ```html
-<!-- Vue 2.x -->
+<!-- Vue 2.x (production)-->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 
-<!-- Vue 3.x -->
+<!-- Vue 3.x (production) -->
 <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
 ```
 
-The URLs above will load a production version of Vue which is optimized for performance. Alternatively, development versions of Vue are larger but offer helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support:
+The URLs above will load a **production** version of Vue which has been optimized for performance. Alternatively, **development** versions of Vue are available that are larger in size but offer helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support:
 
 ```html
-<!-- Vue 2.x -->
+<!-- Vue 2.x (development) -->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 
-<!-- Vue 3.x -->
+<!-- Vue 3.x (development) -->
 <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
 ```
 
 ## Template syntax
 
-Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) can be added directly to your markdown pages. This syntax can be used to generate dynamic content without additional configuration using [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives).
+Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create dynamic content. With no additinal configuration, this syntax offers several useful features like support for [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives) for loops and conditional rendering.
 
 ```markdown
-<!-- JavaScript expressions -->
-<p>2 + 2 = {{ 2 + 2 }}</p>
-
-<!-- Hide in docsify, show everywhere else (e.g. GitHub) -->
+<!-- Hide in docsify, show elsewhere (e.g. GitHub) -->
 <p v-if="false">Text for GitHub</p>
 
-<!-- Sequenced content -->
+<!-- Sequenced content (i.e. loop)-->
 <ul>
   <li v-for="i in 3">Item {{ i }}</li>
 </ul>
+
+<!-- JavaScript expressions -->
+<p>2 + 2 = {{ 2 + 2 }}</p>
 ```
 
 <output data-lang="output">
-  <p>2 + 2 = {{ 2 + 2 }}</p>
-
   <p v-if="false">Text for GitHub</p>
 
   <ul>
     <li v-for="i in 3">Item {{ i }}</li>
   </ul>
+
+  <p>2 + 2 = {{ 2 + 2 }}</p>
 </output>
 
-[View markdown on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
+[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
+
+Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [instance options](#instance-options), or within [components](#components).
 
-Vue content becomes more interesting when data, methods, lifecycle hooks, and computed properties are used. These options can be specified as [global options](#global-options), [instance options](#instance-options), or within [components](#components).
+### Data
 
 ```js
 {
   data() {
     return {
-      message: 'Hello, World!',
+      message: 'Hello, World!'
     };
-  },
-  methods: {
-    hello() {
-      alert(this.message);
-    }
   }
 }
 ```
 
+<!-- prettier-ignore-start -->
 ```markdown
-<!-- Show message in docsify, hide on GitHub  -->
+<!-- Show message in docsify, show "{{ message }}" elsewhere (e.g. GitHub)  -->
+{{ message }}
+
+<!-- Show message in docsify, hide elsewhere (e.g. GitHub)  -->
 <p v-text="message"></p>
 
-<!-- Show message in docsify, Show text on GitHub  -->
+<!-- Show message in docsify, show text elsewhere (e.g. GitHub)  -->
 <p v-text="message">Text for GitHub</p>
-
-<!-- Invoke hello method -->
-<p>
-  <button v-on:click="hello">Say Hello</button>
-</p>
 ```
+<!-- prettier-ignore-end -->
 
 <output data-lang="output">
+
+{{ message }}
+
   <p v-text="message"></p>
   <p v-text="message">Text for GitHub</p>
+</output>
+
+[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#data)
+
+### Computed properties
+
+```js
+{
+  computed: {
+    timeOfDay() {
+      const date = new Date();
+      const hours = date.getHours();
+
+      if (hours < 12) {
+        return 'morning';
+      }
+      else if (hours < 18) {
+        return 'afternoon';
+      }
+      else {
+        return 'evening'
+      }
+    }
+  },
+}
+```
+
+```markdown
+Good {{ timeOfDay }}!
+```
+
+<output data-lang="output">
+
+Good {{ timeOfDay }}!
+
+</output>
+
+### Methods
+
+```js
+{
+  data() {
+    return {
+      message: 'Hello, World!'
+    };
+  },
+  methods: {
+    hello() {
+      alert(this.message);
+    }
+  },
+}
+```
+
+<output data-lang="output">
   <p><button v-on:click="hello">Say Hello</button></p>
 </output>
 
-[View markdown on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#options)
+### Lifecycle Hooks
+
+```js
+{
+  data() {
+    return {
+      images: null,
+    };
+  },
+  created() {
+    fetch('https://api.domain.com/')
+      .then(response => response.json())
+      .then(data => (this.images = data))
+      .catch(err => console.log(err));
+  }
+}
+
+// API response:
+// [
+//   { title: 'Image 1', url: 'https://domain.com/1.jpg' },
+//   { title: 'Image 2', url: 'https://domain.com/2.jpg' },
+//   { title: 'Image 3', url: 'https://domain.com/3.jpg' },
+// ];
+```
+
+```markdown
+<div style="display: flex;">
+  <figure style="flex: 1;">
+    <img v-for="image in images" :src="image.url" :title="image.title">
+    <figcaption>{{ image.title }}</figcaption>
+  </figure>
+</div>
+```
+
+<output data-lang="output">
+  <div style="display: flex;">
+    <figure v-for="image in images" style="flex: 1; text-align: center;">
+      <img :src="image.url">
+      <figcaption>{{ image.title }}</figcaption>
+    </figure>
+  </div>
+</output>
 
 ## Global options
 
-Use `vueGlobalOptions` to share data, methods, lifecycle hooks, and computed properties throughout your site. These options will be available to Vue content not explicitly mounted via [instance options](#instance-options), [components](#components), or a markdown `<script>`.
+Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script). Global `data()` is shared and changes will persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -113,7 +209,7 @@ window.$docsify = {
 </p>
 ```
 
-Keep in mind that global `data()` is shared, so changes made in one location will affect all locations where global `data()` is used. These changes will also persist as users navigate your site. To demonstrate, let's render the above counter twice.
+Notice the behavior when multilpe global counters are rendered below: changes made to one counter affect the other because both instances reference the global `count` value.
 
 <output data-lang="output">
   <p>
@@ -128,54 +224,43 @@ Keep in mind that global `data()` is shared, so changes made in one location wil
   </p>
 </output>
 
-Notice how changes made to one counter affect the other. This is because both counters reference the global `count` value. Now, navigate to a new page and return to this page to see how these changes persists.
+Now, navigate to a new page and return to this section to see how changes made to global data persist.
 
 ## Instance options
 
-Use `vueOptions` to specify DOM elements to mount as Vue instances and their associated options as `key:value` pairs. DOM elements are specified using [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key. Selectors are limited in scope to the main content area
+Use `vueOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded. Instance data is not shared and changes will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
   vueOptions: {
-    "#counter": {
+    '#counter': {
       data() {
         return {
-          count: 0
+          count: 0,
         };
-      }
-      computed: {
-        message() {
-          const date = new Date();
-          const hours = date.getHours();
-          const greeting = hours < 12 ? 'morning' : 'day';
-
-          return `Good ${greeting}!`;
-        }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 ```
 
 ```markdown
 <div id="counter">
-  <p>{{ message }}</p>
-  <button v-on:click="count -= 10">-</button>
+  <button v-on:click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 10">+</button>
+  <button v-on:click="count += 1">+</button>
 </div>
 ```
 
 <output id="counter">
-  <p>{{ message }}</p>
-  <button v-on:click="count -= 10">-</button>
+  <button v-on:click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 10">+</button>
+  <button v-on:click="count += 1">+</button>
 </output>
 
 ## Components
 
-Docsify provides components
+Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Components data is not shared and changes will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -198,22 +283,26 @@ window.$docsify = {
 
 ```markdown
 <button-counter></button-counter>
+<button-counter></button-counter>
 ```
 
 <output data-lang="output">
   <button-counter></button-counter>
+  <button-counter></button-counter>
 </output>
 
 ## Markdown script
 
-TBD
+Vue content can mounted using a `<script>` tag in your markdown pages.
+
+!> 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 the first `<script>` tag in your markdown.
 
 ```html
 <!-- Vue 2.x  -->
 <script>
   new Vue({
     el: '#example',
-    // ...
+    // Options...
   });
 </script>
 ```
@@ -222,9 +311,18 @@ TBD
 <!-- Vue 3.x  -->
 <script>
   Vue.createApp({
-    // ...
+    // Options...
   }).mount('#example');
 </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.
+## Technical Notes
+
+- Docsify processes Vue content in the following order:
+  1. markdown script,
+  1. `vueOptions`
+  1. `vueGlobalOptions`
+- Docsify will not mount an element that is already a Vue instance or contains a Vue instance.
+- Docsify will automatically destroy/unmount all Vue instances it creates.
+- When processing `vueGlobalOptions`, docsify parses each root element of the main content area and mounts the element if Vue content is detected. Docsify does not parse each individual node within the main content area.
+- When processing `vueGlobalOptions`, docsify detects the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`) but not the [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) syntax (e.g. `:href`or `@click`).

From 1a52e975816924ac7dc0edf85fb014891709c224 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 21 Oct 2020 13:03:09 -0500
Subject: [PATCH 13/41] Update docs

---
 docs/vue.md | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/docs/vue.md b/docs/vue.md
index 6b7065470..029ff80e1 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -2,23 +2,25 @@
 
 Docsify allows Vue content to be added directly to you markdown pages. This can greatly simplify working with data and adding reactivity to your site.
 
-To get started, add either Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file:
+To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org) to your `index.html` file. Choose the production version for your live site or the development version for helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support.
+
+#### Vue 2.x
 
 ```html
-<!-- Vue 2.x (production)-->
+<!-- Production -->
 <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
 
-<!-- Vue 3.x (production) -->
-<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+<!-- Development -->
+<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
-The URLs above will load a **production** version of Vue which has been optimized for performance. Alternatively, **development** versions of Vue are available that are larger in size but offer helpful console warnings and [Vue.js devtools](https://github.com/vuejs/vue-devtools) support:
+#### Vue 3.x
 
 ```html
-<!-- Vue 2.x (development) -->
-<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+<!-- Production -->
+<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
 
-<!-- Vue 3.x (development) -->
+<!-- Development -->
 <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
 ```
 
@@ -187,7 +189,7 @@ Good {{ timeOfDay }}!
 
 ## Global options
 
-Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script). Global `data()` is shared and changes will persist as users navigate the site.
+Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script).
 
 ```js
 window.$docsify = {
@@ -209,14 +211,17 @@ window.$docsify = {
 </p>
 ```
 
-Notice the behavior when multilpe global counters are rendered below: changes made to one counter affect the other because both instances reference the global `count` value.
-
 <output data-lang="output">
   <p>
     <button v-on:click="count -= 1">-</button>
     {{ count }}
     <button v-on:click="count += 1">+</button>
   </p>
+</output>
+
+Notice the behavior when multiple global counters are rendered:
+
+<output data-lang="output">
   <p>
     <button v-on:click="count -= 1">-</button>
     {{ count }}
@@ -224,11 +229,11 @@ Notice the behavior when multilpe global counters are rendered below: changes ma
   </p>
 </output>
 
-Now, navigate to a new page and return to this section to see how changes made to global data persist.
+Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
 
 ## Instance options
 
-Use `vueOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded. Instance data is not shared and changes will not persist as users navigate the site.
+Use `vueOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
 
 ```js
 window.$docsify = {
@@ -295,7 +300,7 @@ window.$docsify = {
 
 Vue content can mounted using a `<script>` tag in your markdown pages.
 
-!> 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 the first `<script>` tag in your markdown.
+!> Only the first `<script>` tag in a markdown file is executed. If you wish to mount multiple Vue instances using a script tag, all instances must be mounted within the first script tag in your markdown.
 
 ```html
 <!-- Vue 2.x  -->
@@ -319,10 +324,10 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 ## Technical Notes
 
 - Docsify processes Vue content in the following order:
-  1. markdown script,
+  1. Markdown `<script>`
   1. `vueOptions`
   1. `vueGlobalOptions`
-- Docsify will not mount an element that is already a Vue instance or contains a Vue instance.
-- Docsify will automatically destroy/unmount all Vue instances it creates.
+- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
+- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
 - When processing `vueGlobalOptions`, docsify parses each root element of the main content area and mounts the element if Vue content is detected. Docsify does not parse each individual node within the main content area.
-- When processing `vueGlobalOptions`, docsify detects the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`) but not the [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) syntax (e.g. `:href`or `@click`).
+- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported.

From 86dae610de7c2ddf1f8194025ab7e1b7cc6aaade Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 21 Oct 2020 13:14:07 -0500
Subject: [PATCH 14/41] Rename `vueOptions` to `vueMountOptions`

---
 docs/configuration.md    |  6 +++---
 docs/index.html          | 30 +++++++++++++++---------------
 docs/vue.md              | 12 ++++++------
 src/core/render/index.js |  4 ++--
 test/e2e/vue.test.js     | 40 ++++++++++++++++++++++++----------------
 5 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 54d6720f7..8e0d6c19a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -667,7 +667,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueOptions](#vueoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
+Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMountOptions](#vuemountoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
 
 ```js
 window.$docsify = {
@@ -697,7 +697,7 @@ window.$docsify = {
   </p>
 </output>
 
-## vueOptions
+## vueMountOptions
 
 - type: `Object`
 
@@ -705,7 +705,7 @@ Specifies Vue mount elements and their associated options. Mount elements are sp
 
 ```js
 window.$docsify = {
-  vueOptions: {
+  vueMountOptions: {
     '#counter': {
       data() {
         return {
diff --git a/docs/index.html b/docs/index.html
index 8e6e5377d..6c829e5ce 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -101,6 +101,20 @@
             '/': 'Search',
           },
         },
+        vueComponents: {
+          'button-counter': {
+            template: `
+            <button @click="count += 1">
+              You clicked me {{ count }} times
+            </button>
+          `,
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
         vueGlobalOptions: {
           data() {
             return {
@@ -134,7 +148,7 @@
             },
           },
         },
-        vueOptions: {
+        vueMountOptions: {
           '#counter': {
             data() {
               return {
@@ -143,20 +157,6 @@
             },
           },
         },
-        vueComponents: {
-          'button-counter': {
-            template: `
-            <button @click="count += 1">
-              You clicked me {{ count }} times
-            </button>
-          `,
-            data() {
-              return {
-                count: 0,
-              };
-            },
-          },
-        },
         plugins: [
           function(hook, vm) {
             hook.beforeEach(function(html) {
diff --git a/docs/vue.md b/docs/vue.md
index 029ff80e1..9952e46b3 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
 
 [View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
 
-Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [instance options](#instance-options), or within [components](#components).
+Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [mount options](#mount-options), or within [components](#components).
 
 ### Data
 
@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
 
 ## Global options
 
-Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script).
+Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [mount options](#mount-options), [components](#components), or a [markdown script](#markdown-script).
 
 ```js
 window.$docsify = {
@@ -231,13 +231,13 @@ Notice the behavior when multiple global counters are rendered:
 
 Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
 
-## Instance options
+## Mount options
 
-Use `vueOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
+Use `vueMountOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
 
 ```js
 window.$docsify = {
-  vueOptions: {
+  vueMountOptions: {
     '#counter': {
       data() {
         return {
@@ -325,7 +325,7 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 
 - Docsify processes Vue content in the following order:
   1. Markdown `<script>`
-  1. `vueOptions`
+  1. `vueMountOptions`
   1. `vueGlobalOptions`
 - Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
 - Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 8f7193388..0d0409f7d 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -114,9 +114,9 @@ function renderMain(html) {
       vueGlobalData = docsifyConfig.vueGlobalOptions.data();
     }
 
-    // vueOptions
+    // vueMountOptions
     vueMountData.push(
-      ...Object.entries(docsifyConfig.vueOptions || {})
+      ...Object.entries(docsifyConfig.vueMountOptions || {})
         .map(([cssSelector, vueConfig]) => [
           dom.find(markdownElm, cssSelector),
           vueConfig,
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index a83d8d048..27194c6a0 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -30,12 +30,12 @@ describe('Vue.js Compatibility', function() {
             };
           },
         },
-        vueOptions: {
-          '#vueoptions': {
+        vueMountOptions: {
+          '#vuemountoptions': {
             data: function() {
               return {
                 counter: 0,
-                msg: 'vueoptions',
+                msg: 'vuemountoptions',
               };
             },
           },
@@ -53,7 +53,7 @@ describe('Vue.js Compatibility', function() {
             <span>{{ counter }}<span>
           </div>
 
-          <div id="vueoptions">
+          <div id="vuemountoptions">
             <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
@@ -114,8 +114,11 @@ describe('Vue.js Compatibility', function() {
             'vueglobaloptions'
           );
           await expect(page).toEqualText('#vueglobaloptions span', '0');
-          await expect(page).toEqualText('#vueoptions p', 'vueoptions');
-          await expect(page).toEqualText('#vueoptions span', '0');
+          await expect(page).toEqualText(
+            '#vuemountoptions p',
+            'vuemountoptions'
+          );
+          await expect(page).toEqualText('#vuemountoptions span', '0');
           await expect(page).toEqualText('#vuescript p', 'vuescript');
           await expect(page).toEqualText('#vuescript span', '0');
 
@@ -124,8 +127,8 @@ describe('Vue.js Compatibility', function() {
           await expect(page).toEqualText('#vuecomponent', '1');
           await page.click('#vueglobaloptions button');
           await expect(page).toEqualText('#vueglobaloptions span', '1');
-          await page.click('#vueoptions button');
-          await expect(page).toEqualText('#vueoptions span', '1');
+          await page.click('#vuemountoptions button');
+          await expect(page).toEqualText('#vuemountoptions span', '1');
           await page.click('#vuescript button');
           await expect(page).toEqualText('#vuescript span', '1');
         });
@@ -141,23 +144,23 @@ describe('Vue.js Compatibility', function() {
         await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vueoptions p', '---');
+        await expect(page).toEqualText('#vuemountoptions p', '---');
         await expect(page).toEqualText('#vuescript p', '---');
       });
 
-      test(`ignores content when vueComponents, vueOptions, and vueGlobalOptions are undefined`, async () => {
+      test(`ignores content when vueComponents, vueMountOptions, and vueGlobalOptions are undefined`, async () => {
         const docsifyInitConfig = getSharedConfig();
 
         docsifyInitConfig.config.vueComponents = undefined;
         docsifyInitConfig.config.vueGlobalOptions = undefined;
-        docsifyInitConfig.config.vueOptions = undefined;
+        docsifyInitConfig.config.vueMountOptions = undefined;
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
         await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vueoptions p', '---');
+        await expect(page).toEqualText('#vuemountoptions p', '---');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 
@@ -171,14 +174,16 @@ describe('Vue.js Compatibility', function() {
         await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '0');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vueoptions p', 'vueoptions');
+        await expect(page).toEqualText('#vuemountoptions p', 'vuemountoptions');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 
-      test(`ignores content when vueOptions is undefined`, async () => {
+      test(`ignores content when vueMountOptions is undefined`, async () => {
         const docsifyInitConfig = getSharedConfig();
 
-        docsifyInitConfig.config.vueOptions['#vueoptions'] = undefined;
+        docsifyInitConfig.config.vueMountOptions[
+          '#vuemountoptions'
+        ] = undefined;
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
@@ -188,7 +193,10 @@ describe('Vue.js Compatibility', function() {
           '#vueglobaloptions p',
           'vueglobaloptions'
         );
-        await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
+        await expect(page).toEqualText(
+          '#vuemountoptions p',
+          'vueglobaloptions'
+        );
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 

From 2946c061a4380592343f74a69662d3c7f16af78c Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 21 Oct 2020 14:02:56 -0500
Subject: [PATCH 15/41] Update test

---
 test/e2e/vue.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 27194c6a0..1b6dbe6c4 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -171,9 +171,9 @@ describe('Vue.js Compatibility', function() {
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
-        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuefor', '12345');
         await expect(page).toEqualText('#vuecomponent', '0');
-        await expect(page).toEqualText('#vueglobaloptions p', '---');
+        expect(await page.innerText('#vueglobaloptions p')).toBe('');
         await expect(page).toEqualText('#vuemountoptions p', 'vuemountoptions');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });

From 871e48f823d78eaccab0d674aaf5cec4ab35a0a7 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 21 Oct 2020 16:41:29 -0500
Subject: [PATCH 16/41] Update default waitForSelector value

---
 test/helpers/docsify-init.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index f212e99aa..195efa9ff 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -63,7 +63,7 @@ async function docsifyInit(options = {}) {
     style: '',
     styleURLs: [],
     testURL: `${TEST_HOST}/docsify-init.html`,
-    waitForSelector: '#main',
+    waitForSelector: '#main > *',
   };
   const settings = {
     ...defaults,

From 131aae520af88ea2805a951260e4b6d5627ca184 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 23 Oct 2020 13:07:10 -0500
Subject: [PATCH 17/41] Fix waitForText() timeout and reject messages

---
 test/helpers/wait-for.js | 45 ++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/test/helpers/wait-for.js b/test/helpers/wait-for.js
index 2227061fd..ac10bf84e 100644
--- a/test/helpers/wait-for.js
+++ b/test/helpers/wait-for.js
@@ -37,9 +37,11 @@ export function waitForFunction(fn, arg, options = {}) {
       timeElapsed += settings.delay;
 
       if (timeElapsed >= settings.timeout) {
-        reject(
-          `waitForFunction() did not return a truthy value\n\n${fn.toString()}\n\n`
-        );
+        const msg = `waitForFunction did not return a truthy value (${
+          settings.timeout
+        } ms): ${fn.toString()}\n`;
+
+        reject(msg);
       }
     }, settings.delay);
   });
@@ -71,9 +73,9 @@ export function waitForSelector(cssSelector, options = {}) {
       timeElapsed += settings.delay;
 
       if (timeElapsed >= settings.timeout) {
-        reject(
-          `waitForSelector() was unable to find CSS selector ${cssSelector}`
-        );
+        const msg = `waitForSelector did not match CSS selector '${cssSelector}' (${settings.timeout} ms)`;
+
+        reject(msg);
       }
     }, settings.delay);
   });
@@ -94,20 +96,31 @@ export function waitForText(cssSelector, text, options = {}) {
   };
 
   return new Promise((resolve, reject) => {
+    let timeElapsed = 0;
+
     waitForSelector(cssSelector, settings)
       .then(elm => {
-        const isMatch = elm.textContent.includes(text);
-
-        if (isMatch) {
-          resolve(elm);
-        } else {
-          reject(
-            `waitForText() did not find "${text}" in CSS selector ${cssSelector}`
-          );
-        }
+        const int = setInterval(() => {
+          const isMatch = elm.textContent.includes(text);
+
+          if (isMatch) {
+            clearInterval(int);
+            resolve(true);
+          }
+
+          timeElapsed += settings.delay;
+
+          if (timeElapsed >= settings.timeout) {
+            const msg = `waitForText did not find '${text}' in CSS selector '${cssSelector}' (${settings.timeout} ms): '${elm.textContent}'`;
+
+            reject(msg);
+          }
+        }, settings.delay);
       })
       .catch(() => {
-        reject(`waitForText() was unable to find CSS selector ${cssSelector}`);
+        const msg = `waitForText did not match CSS selector '${cssSelector}' (${settings.timeout} ms)`;
+
+        reject(msg);
       });
   });
 }

From af7e71345bc2381da09a0bba7ac67a02d425b98e Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 23 Oct 2020 13:08:59 -0500
Subject: [PATCH 18/41] Change default startPath for tests & manual start

---
 test/config/server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/config/server.js b/test/config/server.js
index d027cdb0e..cb9f82b0b 100644
--- a/test/config/server.js
+++ b/test/config/server.js
@@ -59,7 +59,6 @@ function startServer(options = {}, cb = Function.prototype) {
         },
       },
     },
-    startPath: '/docs',
     ui: false,
   };
 
@@ -96,6 +95,7 @@ if (hasStartArg) {
     open: true,
     port: serverConfig.port + 1,
     directory: true,
+    startPath: '/docs',
   });
 }
 // Display friendly message about manually starting a server instance

From 25084f88b5b621626c2294415dd3695e13db9bb8 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 23 Oct 2020 13:09:55 -0500
Subject: [PATCH 19/41] Update jest/docsify side-effect cleanup

---
 test/config/jest.setup-tests.js | 35 ++++++++++++++-------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/test/config/jest.setup-tests.js b/test/config/jest.setup-tests.js
index 2d29eb858..e7b81f662 100644
--- a/test/config/jest.setup-tests.js
+++ b/test/config/jest.setup-tests.js
@@ -1,3 +1,7 @@
+import mock from 'xhr-mock';
+
+const windowKeys = JSON.parse(JSON.stringify(Object.keys(window)));
+
 // Lifecycle Hooks
 // -----------------------------------------------------------------------------
 // Soft-reset jsdom. This clears the DOM and removes all attribute from the
@@ -13,26 +17,12 @@ beforeEach(async () => {
     rootElm.removeChild(rootElm.firstChild);
   }
 
-  // Remove docsify side-effects
-  [
-    '__current_docsify_compiler__',
-    '_paq',
-    '$docsify',
-    'Docsify',
-    'DocsifyCompiler',
-    'ga',
-    'gaData',
-    'gaGlobal',
-    'gaplugins',
-    'gitter',
-    'google_tag_data',
-    'marked',
-    'Prism',
-  ].forEach(prop => {
-    if (global[prop]) {
-      delete global[prop];
-    }
-  });
+  // Remove jest/docsify side-effects
+  Object.keys(window)
+    .filter(key => !windowKeys.includes(key))
+    .forEach(key => {
+      delete window[key];
+    });
 
   // Remove attributes
   [...rootElm.attributes].forEach(attr => rootElm.removeAttribute(attr.name));
@@ -40,3 +30,8 @@ beforeEach(async () => {
   // Restore base elements
   rootElm.innerHTML = '<html><head></head><body></body></html>';
 });
+
+afterEach(async () => {
+  // Restore the global XMLHttpRequest object to its original state
+  mock.teardown();
+});

From 6a5e84bf3c9b92c646295383cf47285466291fe1 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 23 Oct 2020 13:12:56 -0500
Subject: [PATCH 20/41] Update directive detection (data vs static)

---
 src/core/render/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index 0d0409f7d..dd0bd0879 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -127,7 +127,8 @@ function renderMain(html) {
     // Template syntax, vueComponents, vueGlobalOptions
     if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
       const reHasBraces = /{{2}[^{}]*}{2}/;
-      const reHasDirective = /\sv-(bind:|cloak|else|else-if=|for=|html=|if=|is=|model=|on:|once|pre|show=|slot=|text=)/;
+      const reHasDataDirective = /\sv-(bind:|cloak|html=|is=|model=|on:|slot=|text=)/;
+      const reHasStaticDirective = /\sv-(else|else-if=|for=|if=|once|pre|show=)/;
 
       vueMountData.push(
         ...dom
@@ -144,8 +145,11 @@ function renderMain(html) {
               elm.querySelector(vueComponentNames.join(',') || null) ||
               // has curly braces
               reHasBraces.test(elm.outerHTML) ||
-              // has directive
-              reHasDirective.test(elm.outerHTML);
+              // has data directive
+              (docsifyConfig.vueGlobalOptions &&
+                reHasDataDirective.test(elm.outerHTML)) ||
+              // has static content directive
+              reHasStaticDirective.test(elm.outerHTML);
 
             return isVueMount;
           })

From febe7f8ee1664db266bf8ff38b6a9ad2fcb58cc6 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 24 Oct 2020 20:05:12 -0500
Subject: [PATCH 21/41] Remove global event listeners beforeEach

---
 test/config/jest.setup-tests.js | 74 ++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 14 deletions(-)

diff --git a/test/config/jest.setup-tests.js b/test/config/jest.setup-tests.js
index e7b81f662..e18d24bd3 100644
--- a/test/config/jest.setup-tests.js
+++ b/test/config/jest.setup-tests.js
@@ -1,31 +1,77 @@
 import mock from 'xhr-mock';
 
-const windowKeys = JSON.parse(JSON.stringify(Object.keys(window)));
+const sideEffects = {
+  document: {
+    addEventListener: {
+      fn: document.addEventListener,
+      refs: [],
+    },
+    keys: Object.keys(document),
+  },
+  window: {
+    addEventListener: {
+      fn: window.addEventListener,
+      refs: [],
+    },
+    keys: Object.keys(window),
+  },
+};
 
 // Lifecycle Hooks
 // -----------------------------------------------------------------------------
-// Soft-reset jsdom. This clears the DOM and removes all attribute from the
-// root element, however it does not undo changes made to jsdom globals like
-// the window or document object. Tests requiring a full jsdom reset should be
-// stored in separate files, as this is the only way (?) to do a complete
-// reset of JSDOM with Jest.
+beforeAll(async () => {
+  // Spy addEventListener
+  ['document', 'window'].forEach(obj => {
+    const fn = sideEffects[obj].addEventListener.fn;
+    const refs = sideEffects[obj].addEventListener.refs;
+
+    function addEventListenerSpy(type, listener, options) {
+      // Store listener reference so it can be removed during reset
+      refs.push({ type, listener, options });
+      // Call original window.addEventListener
+      fn(type, listener, options);
+    }
+
+    // Add to default key arry to prevent removal during reset
+    sideEffects[obj].keys.push('addEventListener');
+
+    // Replace addEventListener with mock
+    global[obj].addEventListener = addEventListenerSpy;
+  });
+});
+
+// Reset JSDOM. This attempts to remove side effects from tests, however it does
+// not reset all changes made to globals like the the window and document
+// objects. Tests requiring a full JSDOM reset should be stored in separate
+// files, which is only way to do a complete reset of JSDOM with Jest.
 beforeEach(async () => {
   const rootElm = document.documentElement;
 
+  // Remove attributes on root element
+  [...rootElm.attributes].forEach(attr => rootElm.removeAttribute(attr.name));
+
   // Remove elements (faster the setting innerHTML)
   while (rootElm.firstChild) {
     rootElm.removeChild(rootElm.firstChild);
   }
 
-  // Remove jest/docsify side-effects
-  Object.keys(window)
-    .filter(key => !windowKeys.includes(key))
-    .forEach(key => {
-      delete window[key];
-    });
+  // Remove global listeners and keys
+  ['document', 'window'].forEach(obj => {
+    const refs = sideEffects[obj].addEventListener.refs;
 
-  // Remove attributes
-  [...rootElm.attributes].forEach(attr => rootElm.removeAttribute(attr.name));
+    // Listeners
+    while (refs.length) {
+      const { type, listener, options } = refs.pop();
+      global[obj].removeEventListener(type, listener, options);
+    }
+
+    // Keys
+    Object.keys(global[obj])
+      .filter(key => !sideEffects[obj].keys.includes(key))
+      .forEach(key => {
+        delete global[obj][key];
+      });
+  });
 
   // Restore base elements
   rootElm.innerHTML = '<html><head></head><body></body></html>';

From b6d54072b3b3f7c72623efa25725b920ff0a2709 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sat, 24 Oct 2020 20:44:24 -0500
Subject: [PATCH 22/41] Fix basePath

---
 test/helpers/docsify-init.js     | 26 +++++++++++++++++++-------
 test/integration/example.test.js |  8 ++++----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index 195efa9ff..3855a637f 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -77,15 +77,27 @@ async function docsifyInit(options = {}) {
         loadSidebar: Boolean(settings.markdown.sidebar),
       };
 
+      const updateBasePath = config => {
+        config.basePath = new URL(config.basePath, TEST_HOST).href;
+      };
+
       // Config as function
       if (typeof options.config === 'function') {
         return function(vm) {
-          return { ...sharedConfig, ...options.config(vm) };
+          const config = { ...sharedConfig, ...options.config(vm) };
+
+          updateBasePath(config);
+
+          return config;
         };
       }
       // Config as object
       else {
-        return { ...sharedConfig, ...options.config };
+        const config = { ...sharedConfig, ...options.config };
+
+        updateBasePath(config);
+
+        return config;
       }
     },
     get markdown() {
@@ -101,10 +113,10 @@ async function docsifyInit(options = {}) {
     get routes() {
       const helperRoutes = {
         [settings.testURL]: stripIndent`${settings.html}`,
-        ['/README.md']: settings.markdown.homepage,
-        ['/_coverpage.md']: settings.markdown.coverpage,
-        ['/_navbar.md']: settings.markdown.navbar,
-        ['/_sidebar.md']: settings.markdown.sidebar,
+        ['README.md']: settings.markdown.homepage,
+        ['_coverpage.md']: settings.markdown.coverpage,
+        ['_navbar.md']: settings.markdown.navbar,
+        ['_sidebar.md']: settings.markdown.sidebar,
       };
 
       const finalRoutes = Object.fromEntries(
@@ -116,7 +128,7 @@ async function docsifyInit(options = {}) {
           .filter(([url, responseText]) => url && responseText)
           .map(([url, responseText]) => [
             // Convert relative to absolute URL
-            new URL(url, TEST_HOST).href,
+            new URL(url, settings.config.basePath).href,
             // Strip indentation from responseText
             stripIndent`${responseText}`,
           ])
diff --git a/test/integration/example.test.js b/test/integration/example.test.js
index e0f8b7479..0d7d7b45f 100644
--- a/test/integration/example.test.js
+++ b/test/integration/example.test.js
@@ -10,7 +10,7 @@ describe('Example Tests', function() {
   test('Docsify /docs/ site using docsifyInit()', async () => {
     await docsifyInit({
       config: {
-        basePath: `${TEST_HOST}/docs`,
+        basePath: '/docs/',
       },
       // _logHTML: true,
     });
@@ -51,12 +51,12 @@ describe('Example Tests', function() {
         `,
       },
       routes: {
-        '/test.md': `
+        'test.md': `
           # Test Page
 
           This is a custom route.
         `,
-        '/data-test-scripturls.js': `
+        'data-test-scripturls.js': `
           document.body.setAttribute('data-test-scripturls', 'pass');
         `,
       },
@@ -65,7 +65,7 @@ describe('Example Tests', function() {
       `,
       scriptURLs: [
         // docsifyInit() route
-        '/data-test-scripturls.js',
+        'data-test-scripturls.js',
         // Server route
         '/lib/plugins/search.min.js',
       ],

From 8362ed01c87e486d5183069a5ff5cfb2dd7406a4 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sun, 25 Oct 2020 23:05:16 -0500
Subject: [PATCH 23/41] Remove unnecessary globals

---
 jest.config.js                        |  6 +-----
 test/README.md                        | 11 ----------
 test/config/server.js                 |  9 ---------
 test/e2e/example.test.js              |  4 ++--
 test/e2e/vue.test.js                  |  4 ++--
 test/helpers/docsify-init.js          |  4 ++--
 test/integration/docs.test.js         | 29 +++++++++++----------------
 test/unit/router-history-base.test.js |  2 +-
 test/unit/router-util.test.js         |  2 +-
 9 files changed, 21 insertions(+), 50 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 8cd635e35..845aab487 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,13 +1,9 @@
-const path = require('path');
 const { globals: serverGlobals } = require('./test/config/server.js');
 
 const sharedConfig = {
   errorOnDeprecated: true,
   globals: {
-    ...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'),
+    ...serverGlobals, // BLANK_URL, TEST_HOST
   },
   globalSetup: './test/config/jest.setup.js',
   globalTeardown: './test/config/jest.teardown.js',
diff --git a/test/README.md b/test/README.md
index 5c5af8643..eca1b05aa 100644
--- a/test/README.md
+++ b/test/README.md
@@ -14,18 +14,7 @@
 
 ## Global Variables
 
-### File paths
-
-- `DOCS_PATH`: File path to `/docs` directory
-- `LIB_PATH`: File path to `/lib` directory
-- `SRC_PATH`: File path to `/src` directory
-
-### URLs
-
 - `BLANK_URL`: Test server route to virtual `_blank.html` file
-- `DOCS_URL`: Test server route to `/docs` directory
-- `LIB_URL`: Test server route to `/lib` directory
-- `NODE_MODULES_URL`: Test server route to `/node_modules` directory
 - `TEST_HOST`: Test server ip:port
 
 ## CLI commands
diff --git a/test/config/server.js b/test/config/server.js
index cb9f82b0b..031842ebc 100644
--- a/test/config/server.js
+++ b/test/config/server.js
@@ -108,15 +108,6 @@ module.exports = {
     get BLANK_URL() {
       return `${this.TEST_HOST}/_blank.html`;
     },
-    get DOCS_URL() {
-      return `${this.TEST_HOST}/docs`;
-    },
-    get LIB_URL() {
-      return `${this.TEST_HOST}/lib`;
-    },
-    get NODE_MODULES_URL() {
-      return `${this.TEST_HOST}/node_modules`;
-    },
     TEST_HOST: `http://${serverConfig.host}:${serverConfig.port}`,
   },
   start: startServer,
diff --git a/test/e2e/example.test.js b/test/e2e/example.test.js
index 34aa84aa1..2b8e027d2 100644
--- a/test/e2e/example.test.js
+++ b/test/e2e/example.test.js
@@ -112,11 +112,11 @@ describe(`Example Tests`, function() {
 
     // Inject docsify theme (vue.css)
     // https://playwright.dev/#path=docs%2Fapi.md&q=pageaddstyletagoptions
-    await page.addStyleTag({ url: `${LIB_URL}/themes/vue.css` });
+    await page.addStyleTag({ url: '/lib/themes/vue.css' });
 
     // Inject docsify.js
     // https://playwright.dev/#path=docs%2Fapi.md&q=pageaddscripttagoptions
-    await page.addScriptTag({ url: `${LIB_URL}/docsify.js` });
+    await page.addScriptTag({ url: '/lib/docsify.js' });
 
     // Wait for docsify to initialize
     // https://playwright.dev/#path=docs%2Fapi.md&q=pagewaitforselectorselector-options
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 1b6dbe6c4..b4d1f3adf 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -2,8 +2,8 @@ const stripIndent = require('common-tags/lib/stripIndent');
 const docsifyInit = require('../helpers/docsify-init');
 
 const vueURLs = [
-  `${NODE_MODULES_URL}/vue2/dist/vue.js`,
-  `${NODE_MODULES_URL}/vue3/dist/vue.global.js`,
+  '/node_modules/vue2/dist/vue.js',
+  '/node_modules/vue3/dist/vue.global.js',
 ];
 
 describe('Vue.js Compatibility', function() {
diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index 3855a637f..a7d1ce115 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -6,8 +6,8 @@ const axios = require('axios');
 const prettier = require('prettier');
 const stripIndent = require('common-tags/lib/stripIndent');
 
-const docsifyPATH = `${LIB_PATH}/docsify.js`; // JSDOM
-const docsifyURL = `${LIB_URL}/docsify.js`; // Playwright
+const docsifyPATH = '../../lib/docsify.js'; // JSDOM
+const docsifyURL = '/lib/docsify.js'; // Playwright
 const isJSDOM = 'window' in global;
 const isPlaywright = 'page' in global;
 
diff --git a/test/integration/docs.test.js b/test/integration/docs.test.js
index 0702b36c8..c3f75f10b 100644
--- a/test/integration/docs.test.js
+++ b/test/integration/docs.test.js
@@ -1,5 +1,3 @@
-const fs = require('fs').promises;
-const path = require('path');
 const docsifyInit = require('../helpers/docsify-init');
 
 // Suite
@@ -13,14 +11,13 @@ describe('Docs Site', function() {
     const mathSpy = jest.spyOn(Math, 'random').mockReturnValue(0.5);
 
     await docsifyInit({
+      config: {
+        coverpage: 'docs/_coverpage.md',
+      },
       markdown: {
         homepage: '# Hello World',
-        coverpage: await fs.readFile(
-          path.resolve(DOCS_PATH, '_coverpage.md'),
-          'utf8'
-        ),
       },
-      // _logHTML: true,
+      waitForSelector: '.cover.show',
     });
 
     const coverpageElm = document.querySelector('section.cover');
@@ -33,14 +30,13 @@ describe('Docs Site', function() {
 
   test('sidebar renders and is unchanged', async () => {
     await docsifyInit({
+      config: {
+        loadSidebar: 'docs/_sidebar.md',
+      },
       markdown: {
         homepage: '# Hello World',
-        sidebar: await fs.readFile(
-          path.resolve(DOCS_PATH, '_sidebar.md'),
-          'utf8'
-        ),
       },
-      // _logHTML: true,
+      waitForSelector: '.sidebar-nav > ul',
     });
 
     const sidebarElm = document.querySelector('.sidebar');
@@ -52,14 +48,13 @@ describe('Docs Site', function() {
 
   test('navbar renders and is unchanged', async () => {
     await docsifyInit({
+      config: {
+        loadNavbar: 'docs/_navbar.md',
+      },
       markdown: {
         homepage: '# Hello World',
-        navbar: await fs.readFile(
-          path.resolve(DOCS_PATH, '_navbar.md'),
-          'utf8'
-        ),
       },
-      // _logHTML: true,
+      waitForSelector: '.app-nav > ul',
     });
 
     const navbarElm = document.querySelector('nav.app-nav');
diff --git a/test/unit/router-history-base.test.js b/test/unit/router-history-base.test.js
index 309286cb0..b586b1530 100644
--- a/test/unit/router-history-base.test.js
+++ b/test/unit/router-history-base.test.js
@@ -1,4 +1,4 @@
-const { History } = require(`${SRC_PATH}/core/router/history/base`);
+const { History } = require('../../src/core/router/history/base');
 
 class MockHistory extends History {
   parse(path) {
diff --git a/test/unit/router-util.test.js b/test/unit/router-util.test.js
index d359b2d31..b3d230af3 100644
--- a/test/unit/router-util.test.js
+++ b/test/unit/router-util.test.js
@@ -1,4 +1,4 @@
-const { resolvePath } = require(`${SRC_PATH}/core/util`);
+const { resolvePath } = require('../../src/core/util');
 
 // Suite
 // -----------------------------------------------------------------------------

From f0a8d69eb86b20d5690e84ca1790f4e7ed546957 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sun, 25 Oct 2020 23:08:13 -0500
Subject: [PATCH 24/41] Fix basePath update when config is function

---
 test/helpers/docsify-init.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index a7d1ce115..a9b506195 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -78,7 +78,9 @@ async function docsifyInit(options = {}) {
       };
 
       const updateBasePath = config => {
-        config.basePath = new URL(config.basePath, TEST_HOST).href;
+        if (config.basePath) {
+          config.basePath = new URL(config.basePath, TEST_HOST).href;
+        }
       };
 
       // Config as function
@@ -128,7 +130,7 @@ async function docsifyInit(options = {}) {
           .filter(([url, responseText]) => url && responseText)
           .map(([url, responseText]) => [
             // Convert relative to absolute URL
-            new URL(url, settings.config.basePath).href,
+            new URL(url, settings.config.basePath || TEST_HOST).href,
             // Strip indentation from responseText
             stripIndent`${responseText}`,
           ])

From 5ec225687b1acbd7dbccff58a89f63e570424b42 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sun, 25 Oct 2020 23:08:46 -0500
Subject: [PATCH 25/41] Fix basePath & update route URLs

---
 test/e2e/example.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/e2e/example.test.js b/test/e2e/example.test.js
index 2b8e027d2..ae93eb849 100644
--- a/test/e2e/example.test.js
+++ b/test/e2e/example.test.js
@@ -99,7 +99,7 @@ describe(`Example Tests`, function() {
     await page.evaluate(() => {
       window.$docsify = {
         el: '#app',
-        basePath: '/docs',
+        basePath: '/docs/',
         themeColor: 'red',
       };
     });
@@ -182,12 +182,12 @@ describe(`Example Tests`, function() {
         `,
       },
       routes: {
-        '/test.md': `
+        'test.md': `
           # Test Page
 
           This is a custom route.
         `,
-        '/data-test-scripturls.js': `
+        'data-test-scripturls.js': `
           document.body.setAttribute('data-test-scripturls', 'pass');
         `,
       },
@@ -196,7 +196,7 @@ describe(`Example Tests`, function() {
       `,
       scriptURLs: [
         // docsifyInit() route
-        '/data-test-scripturls.js',
+        'data-test-scripturls.js',
         // Server route
         '/lib/plugins/search.min.js',
       ],

From 3af1cfa84ed3c0572c5d9566bcc127c4ca94c4b3 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Mon, 26 Oct 2020 02:08:51 -0500
Subject: [PATCH 26/41] Add selector option to _logHTML

---
 test/helpers/docsify-init.js | 49 ++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/test/helpers/docsify-init.js b/test/helpers/docsify-init.js
index a9b506195..8e9cf81b8 100644
--- a/test/helpers/docsify-init.js
+++ b/test/helpers/docsify-init.js
@@ -30,8 +30,9 @@ const isPlaywright = 'page' in global;
  * @param {String} [options.testURL] URL to set as window.location.href
  * @param {String} [options.waitForSelector='#main'] Element to wait for before returning promsie
  * @param {String} [options._debug] initiate debugger after site is created
- * @param {Boolean|Object} [options._logHTML] Logs HTML to console after initialization
+ * @param {Boolean|Object|String} [options._logHTML] Logs HTML to console after initialization. Accepts CSS selector.
  * @param {Boolean} [options._logHTML.format=true] Formats HTML output
+ * @param {String} [options._logHTML.selector='html'] CSS selector(s) to match and log HTML for
  * @returns {Promise}
  */
 async function docsifyInit(options = {}) {
@@ -311,16 +312,42 @@ async function docsifyInit(options = {}) {
 
   // Log HTML to console
   if (settings._logHTML) {
-    const html = isJSDOM
-      ? document.documentElement.innerHTML
-      : await page.content();
-    const output =
-      settings._logHTML.format === false
-        ? html
-        : prettier.format(html, { parser: 'html' });
-
-    // eslint-disable-next-line no-console
-    console.log(output);
+    const selector =
+      typeof settings._logHTML === 'string'
+        ? settings._logHTML
+        : settings._logHTML.selector;
+
+    let htmlArr = [];
+
+    if (selector) {
+      if (isJSDOM) {
+        htmlArr = [...document.querySelectorAll(selector)].map(
+          elm => elm.outerHTML
+        );
+      } else {
+        htmlArr = await page.$$eval(selector, elms =>
+          elms.map(e => e.outerHTML)
+        );
+      }
+    } else {
+      htmlArr = [
+        isJSDOM ? document.documentElement.outerHTML : await page.content(),
+      ];
+    }
+
+    if (htmlArr.length) {
+      htmlArr.forEach(html => {
+        if (settings._logHTML.format !== false) {
+          html = prettier.format(html, { parser: 'html' });
+        }
+
+        // eslint-disable-next-line no-console
+        console.log(html);
+      });
+    } else {
+      // eslint-disable-next-line no-console
+      console.warn(`docsify-init(): unable to match selector '${selector}'`);
+    }
   }
 
   // Debug

From b33d750e0bf5ea10df21aaac54ba96de45603146 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Mon, 26 Oct 2020 02:18:01 -0500
Subject: [PATCH 27/41] Remove SRC_PATH global variable

---
 test/unit/render-util.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/render-util.test.js b/test/unit/render-util.test.js
index 3a82a0f9d..4113d16f7 100644
--- a/test/unit/render-util.test.js
+++ b/test/unit/render-util.test.js
@@ -1,4 +1,4 @@
-const { removeAtag } = require(`${SRC_PATH}/core/render/utils`);
+const { removeAtag } = require('../../src/core/render/utils');
 
 // Suite
 // -----------------------------------------------------------------------------

From cafdd62dae51a4624f7a2a65bcac5d7f7b459f23 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Mon, 26 Oct 2020 02:23:34 -0500
Subject: [PATCH 28/41] =?UTF-8?q?Remove=20=E2=80=94runInBand=20flag=20from?=
 =?UTF-8?q?=20test=20script?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2572f7793..8d9edf0d8 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "dev:ssr": "run-p serve:ssr watch:*",
     "lint": "eslint .",
     "fixlint": "eslint . --fix",
-    "test": "jest --runInBand",
+    "test": "jest",
     "test:e2e": "jest --selectProjects e2e",
     "test:integration": "jest --selectProjects integration",
     "test:unit": "jest --selectProjects unit",

From d9e491a9e3dd021ed02a8ce43d744967cc2b55a4 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Mon, 26 Oct 2020 02:23:57 -0500
Subject: [PATCH 29/41] Fix covepage test

---
 test/integration/docs.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/docs.test.js b/test/integration/docs.test.js
index c3f75f10b..c7e4c4829 100644
--- a/test/integration/docs.test.js
+++ b/test/integration/docs.test.js
@@ -17,7 +17,7 @@ describe('Docs Site', function() {
       markdown: {
         homepage: '# Hello World',
       },
-      waitForSelector: '.cover.show',
+      waitForSelector: '.cover-main > *',
     });
 
     const coverpageElm = document.querySelector('section.cover');

From a5a431f0c156119a6fd6fbea53b67e7eb745d550 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 6 Nov 2020 19:24:23 -0600
Subject: [PATCH 30/41] Fix base element reset

---
 test/config/jest.setup-tests.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/test/config/jest.setup-tests.js b/test/config/jest.setup-tests.js
index e18d24bd3..94673e5e7 100644
--- a/test/config/jest.setup-tests.js
+++ b/test/config/jest.setup-tests.js
@@ -32,7 +32,7 @@ beforeAll(async () => {
       fn(type, listener, options);
     }
 
-    // Add to default key arry to prevent removal during reset
+    // Add to default key array to prevent removal during reset
     sideEffects[obj].keys.push('addEventListener');
 
     // Replace addEventListener with mock
@@ -41,16 +41,16 @@ beforeAll(async () => {
 });
 
 // Reset JSDOM. This attempts to remove side effects from tests, however it does
-// not reset all changes made to globals like the the window and document
+// not reset all changes made to globals like the window and document
 // objects. Tests requiring a full JSDOM reset should be stored in separate
-// files, which is only way to do a complete reset of JSDOM with Jest.
+// files, which is only way to do a complete JSDOM reset with Jest.
 beforeEach(async () => {
   const rootElm = document.documentElement;
 
   // Remove attributes on root element
   [...rootElm.attributes].forEach(attr => rootElm.removeAttribute(attr.name));
 
-  // Remove elements (faster the setting innerHTML)
+  // Remove elements (faster than setting innerHTML)
   while (rootElm.firstChild) {
     rootElm.removeChild(rootElm.firstChild);
   }
@@ -74,7 +74,7 @@ beforeEach(async () => {
   });
 
   // Restore base elements
-  rootElm.innerHTML = '<html><head></head><body></body></html>';
+  rootElm.innerHTML = '<head></head><body></body>';
 });
 
 afterEach(async () => {

From 4e5dae7d41a6ca43d6c65ba9b209789178689dd1 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Tue, 10 Nov 2020 18:38:00 -0600
Subject: [PATCH 31/41] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit a2ebb2192ac73211a8924111d736df9574abf61b
Author: 沈唁 <52o@qq52o.cn>
Date:   Sun Nov 8 16:48:43 2020 +0800

    fix: search titles containing ignored characters (#1395)

    * fix: search titles containing ignored characters

    * fix

    * add default value

    * add test

    * fix test

    Co-authored-by: Koy <koy@ko8e24.top>

commit 58fbca00ebd12f636c213d386761df9ebfb2bd4c
Author: Snyk bot <snyk-bot@snyk.io>
Date:   Thu Nov 5 03:04:19 2020 +0200

    fix: packages/docsify-server-renderer/package.json & packages/docsify-server-renderer/package-lock.json to reduce vulnerabilities (#1418)

    The following vulnerabilities are fixed with an upgrade:
    - https://snyk.io/vuln/SNYK-JS-DOMPURIFY-1035544
---
 .../docsify-server-renderer/package-lock.json |  6 +--
 packages/docsify-server-renderer/package.json |  2 +-
 src/plugins/search/search.js                  | 12 +++++-
 test/e2e/search.test.js                       | 38 +++++++++++++++++++
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/docsify-server-renderer/package-lock.json b/packages/docsify-server-renderer/package-lock.json
index 1777a4c81..7c84de66a 100644
--- a/packages/docsify-server-renderer/package-lock.json
+++ b/packages/docsify-server-renderer/package-lock.json
@@ -45,9 +45,9 @@
 			}
 		},
 		"dompurify": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.1.1.tgz",
-			"integrity": "sha512-NijiNVkS/OL8mdQL1hUbCD6uty/cgFpmNiuFxrmJ5YPH2cXrPKIewoixoji56rbZ6XBPmtM8GA8/sf9unlSuwg=="
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.2.tgz",
+			"integrity": "sha512-BsGR4nDLaC5CNBnyT5I+d5pOeaoWvgVeg6Gq/aqmKYWMPR07131u60I80BvExLAJ0FQEIBQ1BTicw+C5+jOyrg=="
 		},
 		"good-listener": {
 			"version": "1.2.2",
diff --git a/packages/docsify-server-renderer/package.json b/packages/docsify-server-renderer/package.json
index fecc1ac23..8b1e0791c 100644
--- a/packages/docsify-server-renderer/package.json
+++ b/packages/docsify-server-renderer/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "debug": "^4.3.0",
     "docsify": "^4.11.6",
-    "dompurify": "^2.1.1",
+    "dompurify": "^2.2.2",
     "node-fetch": "^2.6.0",
     "resolve-pathname": "^3.0.0"
   }
diff --git a/src/plugins/search/search.js b/src/plugins/search/search.js
index 5c7f38bca..aba15d0b7 100644
--- a/src/plugins/search/search.js
+++ b/src/plugins/search/search.js
@@ -83,6 +83,7 @@ export function genIndex(path, content = '', router, depth) {
   const slugify = window.Docsify.slugify;
   const index = {};
   let slug;
+  let title = '';
 
   tokens.forEach(token => {
     if (token.type === 'heading' && token.depth <= depth) {
@@ -94,7 +95,16 @@ export function genIndex(path, content = '', router, depth) {
         slug = router.toURL(path, { id: slugify(escapeHtml(token.text)) });
       }
 
-      index[slug] = { slug, title: str, body: '' };
+      if (str) {
+        title = str
+          .replace(/<!-- {docsify-ignore} -->/, '')
+          .replace(/{docsify-ignore}/, '')
+          .replace(/<!-- {docsify-ignore-all} -->/, '')
+          .replace(/{docsify-ignore-all}/, '')
+          .trim();
+      }
+
+      index[slug] = { slug, title: title, body: '' };
     } else {
       if (!slug) {
         return;
diff --git a/test/e2e/search.test.js b/test/e2e/search.test.js
index 3866b4250..a74f752c0 100644
--- a/test/e2e/search.test.js
+++ b/test/e2e/search.test.js
@@ -35,4 +35,42 @@ describe('Search Plugin Tests', function() {
     await page.fill('input[type=search]', 'test');
     await expect(page).toEqualText('.results-panel h2', 'Test Page');
   });
+
+  test('search ignore title', async () => {
+    const docsifyInitConfig = {
+      markdown: {
+        homepage: `
+          # Hello World
+
+          This is the homepage.
+        `,
+        sidebar: `
+          - [Home page](/)
+          - [GitHub Pages](github)
+        `,
+      },
+      routes: {
+        '/github.md': `
+            # GitHub Pages
+
+            This is the GitHub Pages.
+
+            ## GitHub Pages ignore1 <!-- {docsify-ignore} -->
+
+            There're three places to populate your docs for your Github repository1.
+
+            ## GitHub Pages ignore2 {docsify-ignore}
+
+            There're three places to populate your docs for your Github repository2.
+          `,
+      },
+      scriptURLs: ['/lib/plugins/search.min.js'],
+    };
+    await docsifyInit(docsifyInitConfig);
+    await page.fill('input[type=search]', 'repository1');
+    await expect(page).toEqualText('.results-panel h2', 'GitHub Pages ignore1');
+    await page.click('.clear-button');
+    await page.fill('input[type=search]', 'repository2');
+    await expect(page).toEqualText('.results-panel h2', 'GitHub Pages ignore2');
+  });
 });

From eae3ad885f0b39390271f1455dfd646ae34a3032 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Tue, 10 Nov 2020 18:41:00 -0600
Subject: [PATCH 32/41] Remove markdownlint config

---
 .markdownlint.json | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 .markdownlint.json

diff --git a/.markdownlint.json b/.markdownlint.json
deleted file mode 100644
index 26593a227..000000000
--- a/.markdownlint.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "MD013": false,
-  "MD033": false
-}

From 421ef1d4421d6043a9eeadd4dacdc4bf36ae3193 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Tue, 10 Nov 2020 23:24:21 -0600
Subject: [PATCH 33/41] Update docs

---
 docs/configuration.md | 4 ++--
 docs/vue.md           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 8e0d6c19a..09811dd00 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -634,7 +634,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Registers Vue components using the component name as the key with an object containing Vue options as the value.
+Registers Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -701,7 +701,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value.
+Specifies Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
 
 ```js
 window.$docsify = {
diff --git a/docs/vue.md b/docs/vue.md
index 9952e46b3..6fba277f3 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -265,7 +265,7 @@ window.$docsify = {
 
 ## Components
 
-Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Components data is not shared and changes will not persist as users navigate the site.
+Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
 
 ```js
 window.$docsify = {

From 52cce0284ae42afdb5ae7a54a2fd9b29e12755ff Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 11 Nov 2020 02:10:16 -0600
Subject: [PATCH 34/41] Delete unnecessary file

---
 cypress.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 cypress.json

diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 60ed5aa53..000000000
--- a/cypress.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "video": false
-}

From 727ee8fc6de4e8984d0bffec15fb2f4784115074 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 11 Nov 2020 16:24:50 -0600
Subject: [PATCH 35/41] Rename `vueMountOptions` to `vueMounts`

---
 docs/configuration.md    |  8 ++++----
 docs/index.html          |  2 +-
 docs/vue.md              | 14 +++++++-------
 src/core/render/index.js |  4 ++--
 test/e2e/vue.test.js     | 40 ++++++++++++++++------------------------
 5 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 09811dd00..adee40099 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -667,7 +667,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMountOptions](#vuemountoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
+Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMounts](#vuemounts), [vueComponents](#vuecomponents), or a markdown `<script>`.
 
 ```js
 window.$docsify = {
@@ -697,15 +697,15 @@ window.$docsify = {
   </p>
 </output>
 
-## vueMountOptions
+## vueMounts
 
 - type: `Object`
 
-Specifies Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
+Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
 
 ```js
 window.$docsify = {
-  vueMountOptions: {
+  vueMounts: {
     '#counter': {
       data() {
         return {
diff --git a/docs/index.html b/docs/index.html
index 6c829e5ce..0a83d114d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -148,7 +148,7 @@
             },
           },
         },
-        vueMountOptions: {
+        vueMounts: {
           '#counter': {
             data() {
               return {
diff --git a/docs/vue.md b/docs/vue.md
index 6fba277f3..c868d87d6 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -26,7 +26,7 @@ To get started, add Vue [2.x](https://vuejs.org) or [3.x](https://v3.vuejs.org)
 
 ## Template syntax
 
-Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create dynamic content. With no additinal configuration, this syntax offers several useful features like support for [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives) for loops and conditional rendering.
+Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create dynamic content. With no additional configuration, this syntax offers several useful features like support for [JavaScript expressions](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) and Vue [directives](https://vuejs.org/v2/guide/syntax.html#Directives) for loops and conditional rendering.
 
 ```markdown
 <!-- Hide in docsify, show elsewhere (e.g. GitHub) -->
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
 
 [View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
 
-Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options), [mount options](#mount-options), or within [components](#components).
+Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options) or, when [mounting DOM elements](#mounting-dom-elements), or within Vue [components](#components).
 
 ### Data
 
@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
 
 ## Global options
 
-Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [mount options](#mount-options), [components](#components), or a [markdown script](#markdown-script).
+Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not already been mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script).
 
 ```js
 window.$docsify = {
@@ -231,13 +231,13 @@ Notice the behavior when multiple global counters are rendered:
 
 Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
 
-## Mount options
+## Mounting DOM elements
 
-Use `vueMountOptions` to specify Vue mount elements and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area (`#main, .markdown-section`) each time a new page is loaded.
+Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
 
 ```js
 window.$docsify = {
-  vueMountOptions: {
+  vueMounts: {
     '#counter': {
       data() {
         return {
@@ -325,7 +325,7 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 
 - Docsify processes Vue content in the following order:
   1. Markdown `<script>`
-  1. `vueMountOptions`
+  1. `vueMounts`
   1. `vueGlobalOptions`
 - Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
 - Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
diff --git a/src/core/render/index.js b/src/core/render/index.js
index dd0bd0879..50ab4d2a3 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -114,9 +114,9 @@ function renderMain(html) {
       vueGlobalData = docsifyConfig.vueGlobalOptions.data();
     }
 
-    // vueMountOptions
+    // vueMounts
     vueMountData.push(
-      ...Object.entries(docsifyConfig.vueMountOptions || {})
+      ...Object.entries(docsifyConfig.vueMounts || {})
         .map(([cssSelector, vueConfig]) => [
           dom.find(markdownElm, cssSelector),
           vueConfig,
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index b4d1f3adf..7de73b7b0 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -30,12 +30,12 @@ describe('Vue.js Compatibility', function() {
             };
           },
         },
-        vueMountOptions: {
-          '#vuemountoptions': {
+        vueMounts: {
+          '#vuemounts': {
             data: function() {
               return {
                 counter: 0,
-                msg: 'vuemountoptions',
+                msg: 'vuemounts',
               };
             },
           },
@@ -53,7 +53,7 @@ describe('Vue.js Compatibility', function() {
             <span>{{ counter }}<span>
           </div>
 
-          <div id="vuemountoptions">
+          <div id="vuemounts">
             <p v-text="msg">---</p>
             <button v-on:click="counter += 1">+</button>
             <span>{{ counter }}<span>
@@ -114,11 +114,8 @@ describe('Vue.js Compatibility', function() {
             'vueglobaloptions'
           );
           await expect(page).toEqualText('#vueglobaloptions span', '0');
-          await expect(page).toEqualText(
-            '#vuemountoptions p',
-            'vuemountoptions'
-          );
-          await expect(page).toEqualText('#vuemountoptions span', '0');
+          await expect(page).toEqualText('#vuemounts p', 'vuemounts');
+          await expect(page).toEqualText('#vuemounts span', '0');
           await expect(page).toEqualText('#vuescript p', 'vuescript');
           await expect(page).toEqualText('#vuescript span', '0');
 
@@ -127,8 +124,8 @@ describe('Vue.js Compatibility', function() {
           await expect(page).toEqualText('#vuecomponent', '1');
           await page.click('#vueglobaloptions button');
           await expect(page).toEqualText('#vueglobaloptions span', '1');
-          await page.click('#vuemountoptions button');
-          await expect(page).toEqualText('#vuemountoptions span', '1');
+          await page.click('#vuemounts button');
+          await expect(page).toEqualText('#vuemounts span', '1');
           await page.click('#vuescript button');
           await expect(page).toEqualText('#vuescript span', '1');
         });
@@ -144,23 +141,23 @@ describe('Vue.js Compatibility', function() {
         await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vuemountoptions p', '---');
+        await expect(page).toEqualText('#vuemounts p', '---');
         await expect(page).toEqualText('#vuescript p', '---');
       });
 
-      test(`ignores content when vueComponents, vueMountOptions, and vueGlobalOptions are undefined`, async () => {
+      test(`ignores content when vueComponents, vueMounts, and vueGlobalOptions are undefined`, async () => {
         const docsifyInitConfig = getSharedConfig();
 
         docsifyInitConfig.config.vueComponents = undefined;
         docsifyInitConfig.config.vueGlobalOptions = undefined;
-        docsifyInitConfig.config.vueMountOptions = undefined;
+        docsifyInitConfig.config.vueMounts = undefined;
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
         await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vuemountoptions p', '---');
+        await expect(page).toEqualText('#vuemounts p', '---');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 
@@ -174,16 +171,14 @@ describe('Vue.js Compatibility', function() {
         await expect(page).toEqualText('#vuefor', '12345');
         await expect(page).toEqualText('#vuecomponent', '0');
         expect(await page.innerText('#vueglobaloptions p')).toBe('');
-        await expect(page).toEqualText('#vuemountoptions p', 'vuemountoptions');
+        await expect(page).toEqualText('#vuemounts p', 'vuemounts');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 
-      test(`ignores content when vueMountOptions is undefined`, async () => {
+      test(`ignores content when vueMounts is undefined`, async () => {
         const docsifyInitConfig = getSharedConfig();
 
-        docsifyInitConfig.config.vueMountOptions[
-          '#vuemountoptions'
-        ] = undefined;
+        docsifyInitConfig.config.vueMounts['#vuemounts'] = undefined;
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
@@ -193,10 +188,7 @@ describe('Vue.js Compatibility', function() {
           '#vueglobaloptions p',
           'vueglobaloptions'
         );
-        await expect(page).toEqualText(
-          '#vuemountoptions p',
-          'vueglobaloptions'
-        );
+        await expect(page).toEqualText('#vuemounts p', 'vueglobaloptions');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });
 

From 69efae3c4fc02bde7d427fb2ff21d27f58387d68 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 11 Nov 2020 16:27:14 -0600
Subject: [PATCH 36/41] Fix typos

---
 docs/configuration.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index adee40099..d414bc16c 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -245,10 +245,10 @@ window.$docsify = {
   // Custom file name
   coverpage: 'cover.md',
 
-  // mutiple covers
+  // multiple covers
   coverpage: ['/', '/zh-cn/'],
 
-  // mutiple covers and custom file name
+  // multiple covers and custom file name
   coverpage: {
     '/': 'cover.md',
     '/zh-cn/': 'cover.md',
@@ -410,7 +410,7 @@ window.$docsify = {
 };
 ```
 
-?> If this options is `false` but you dont want to emojify some specific colons , [Refer this](https://github.com/docsifyjs/docsify/issues/742#issuecomment-586313143)
+?> If this options is `false` but you don't want to emojify some specific colons , [Refer this](https://github.com/docsifyjs/docsify/issues/742#issuecomment-586313143)
 
 ## mergeNavbar
 
@@ -604,7 +604,7 @@ window.$docsify = {
 };
 ```
 
-Load the right 404 page according to the localisation:
+Load the right 404 page according to the localization:
 
 ```js
 window.$docsify = {

From 51451a40f7a15bc167769a580019245afab38b47 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Wed, 11 Nov 2020 16:57:22 -0600
Subject: [PATCH 37/41] Remove BLANK_URL global

---
 jest.config.js                             | 8 ++++----
 test/.eslintrc.js                          | 4 +---
 test/README.md                             | 1 -
 test/config/jest-playwright.setup-tests.js | 2 +-
 test/config/server.js                      | 7 +------
 test/e2e/example.test.js                   | 2 +-
 6 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 845aab487..09594dce1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,9 +1,9 @@
-const { globals: serverGlobals } = require('./test/config/server.js');
+const { TEST_HOST } = require('./test/config/server.js');
 
 const sharedConfig = {
   errorOnDeprecated: true,
   globals: {
-    ...serverGlobals, // BLANK_URL, TEST_HOST
+    TEST_HOST,
   },
   globalSetup: './test/config/jest.setup.js',
   globalTeardown: './test/config/jest.teardown.js',
@@ -23,7 +23,7 @@ module.exports = {
       displayName: 'unit',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/unit/*.test.js'],
-      testURL: serverGlobals.BLANK_URL,
+      testURL: `${TEST_HOST}/_blank.html`,
     },
     // Integration Tests (Jest)
     {
@@ -31,7 +31,7 @@ module.exports = {
       displayName: 'integration',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/integration/*.test.js'],
-      testURL: serverGlobals.BLANK_URL,
+      testURL: `${TEST_HOST}/_blank.html`,
     },
     // E2E Tests (Jest + Playwright)
     {
diff --git a/test/.eslintrc.js b/test/.eslintrc.js
index e273ac7f5..1609f15e7 100644
--- a/test/.eslintrc.js
+++ b/test/.eslintrc.js
@@ -5,8 +5,6 @@ module.exports = {
     'jest/globals': true,
   },
   extends: ['plugin:jest/recommended', 'plugin:jest/style'],
-  globals: {
-    ...jestConfig.globals,
-  },
+  globals: jestConfig.globals,
   plugins: ['jest'],
 };
diff --git a/test/README.md b/test/README.md
index eca1b05aa..dd1a8cb71 100644
--- a/test/README.md
+++ b/test/README.md
@@ -14,7 +14,6 @@
 
 ## Global Variables
 
-- `BLANK_URL`: Test server route to virtual `_blank.html` file
 - `TEST_HOST`: Test server ip:port
 
 ## CLI commands
diff --git a/test/config/jest-playwright.setup-tests.js b/test/config/jest-playwright.setup-tests.js
index d6cba628b..f438efabe 100644
--- a/test/config/jest-playwright.setup-tests.js
+++ b/test/config/jest-playwright.setup-tests.js
@@ -50,5 +50,5 @@ beforeEach(async () => {
   // will cause operations that require the window location to be a valid URL
   // to fail (e.g. AJAX requests). To avoid these issues, this hook ensures
   // that each tests begins by a blank HTML page.
-  await page.goto(BLANK_URL);
+  await page.goto(`${TEST_HOST}/_blank.html`);
 });
diff --git a/test/config/server.js b/test/config/server.js
index 031842ebc..acb5b2967 100644
--- a/test/config/server.js
+++ b/test/config/server.js
@@ -104,13 +104,8 @@ else if (require.main === module) {
 }
 
 module.exports = {
-  globals: {
-    get BLANK_URL() {
-      return `${this.TEST_HOST}/_blank.html`;
-    },
-    TEST_HOST: `http://${serverConfig.host}:${serverConfig.port}`,
-  },
   start: startServer,
   startAsync: startServerAsync,
   stop: stopServer,
+  TEST_HOST: `http://${serverConfig.host}:${serverConfig.port}`,
 };
diff --git a/test/e2e/example.test.js b/test/e2e/example.test.js
index ae93eb849..522667851 100644
--- a/test/e2e/example.test.js
+++ b/test/e2e/example.test.js
@@ -92,7 +92,7 @@ describe(`Example Tests`, function() {
   test('manual docsify site using playwright methods', async () => {
     // Goto URL
     // https://playwright.dev/#path=docs%2Fapi.md&q=pagegotourl-options
-    await page.goto(BLANK_URL);
+    await page.goto(`${TEST_HOST}/_blank.html`);
 
     // Set docsify configuration
     // https://playwright.dev/#path=docs%2Fapi.md&q=pageevaluatepagefunction-arg

From a10fcbd9a613320e92d7393cf5024c15b9fd680c Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Thu, 12 Nov 2020 17:25:48 -0600
Subject: [PATCH 38/41] Update Vue-related descriptions

---
 docs/configuration.md |  6 +++---
 docs/vue.md           | 21 +++++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index d414bc16c..0f8678a4a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -634,7 +634,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Registers Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
+Registers Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -667,7 +667,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMounts](#vuemounts), [vueComponents](#vuecomponents), or a markdown `<script>`.
+Specifies options for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
 
 ```js
 window.$docsify = {
@@ -701,7 +701,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
+Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
diff --git a/docs/vue.md b/docs/vue.md
index c868d87d6..4f15c0edd 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
 
 [View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
 
-Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options) or, when [mounting DOM elements](#mounting-dom-elements), or within Vue [components](#components).
+Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options) or within DOM [mounts](#mounts) and [components](#components).
 
 ### Data
 
@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
 
 ## Global options
 
-Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not already been mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script).
+Use `vueGlobalOptions` to specify options for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
 
 ```js
 window.$docsify = {
@@ -231,9 +231,9 @@ Notice the behavior when multiple global counters are rendered:
 
 Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
 
-## Mounting DOM elements
+## Mounts
 
-Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
+Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -265,7 +265,7 @@ window.$docsify = {
 
 ## Components
 
-Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
+Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -324,10 +324,11 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 ## Technical Notes
 
 - Docsify processes Vue content in the following order:
-  1. Markdown `<script>`
-  1. `vueMounts`
-  1. `vueGlobalOptions`
+  1. Execute markdown `<script>`
+  1. Register `vueComponents`
+  1. Mount DOM elements via `vueMounts`
+  1. Process unmounted Vue content using `vueGlobalOptions`
 - Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
 - Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
-- When processing `vueGlobalOptions`, docsify parses each root element of the main content area and mounts the element if Vue content is detected. Docsify does not parse each individual node within the main content area.
-- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported.
+- When processing `vueGlobalOptions`, docsify parses the child elements within the main content area (`#main`) and mounts the element if it contains Vue content. Docsify does not parse each individual node within the main content area.
+- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported. Shorthand syntax is supported when explicitly mounting Vue content via `vueComponents`, `vueMounts`, or a markdown `<script>`.

From 9a1935ac644f55eb2d53e532b9f015b1ec3c40de Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Sun, 15 Nov 2020 13:34:03 -0600
Subject: [PATCH 39/41] Add support for Vue shorthand directive syntax

---
 docs/configuration.md    | 16 ++++++++--------
 docs/vue.md              | 27 +++++++++++++++------------
 src/core/render/index.js | 28 +++++++++++++++++++++-------
 test/e2e/vue.test.js     |  6 +++---
 4 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 0f8678a4a..9549ffa59 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -683,17 +683,17 @@ window.$docsify = {
 
 ```markdown
 <p>
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </p>
 ```
 
 <output data-lang="output">
   <p>
-    <button v-on:click="count -= 1">-</button>
+    <button @click="count -= 1">-</button>
     {{ count }}
-    <button v-on:click="count += 1">+</button>
+    <button @click="count += 1">+</button>
   </p>
 </output>
 
@@ -719,14 +719,14 @@ window.$docsify = {
 
 ```markdown
 <div id="counter">
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </div>
 ```
 
 <output id="counter">
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </output>
diff --git a/docs/vue.md b/docs/vue.md
index 4f15c0edd..a2a5625e2 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -140,8 +140,12 @@ Good {{ timeOfDay }}!
 }
 ```
 
+```markdown
+<button @click="hello">Say Hello</button>
+```
+
 <output data-lang="output">
-  <p><button v-on:click="hello">Say Hello</button></p>
+  <p><button @click="hello">Say Hello</button></p>
 </output>
 
 ### Lifecycle Hooks
@@ -205,17 +209,17 @@ window.$docsify = {
 
 ```markdown
 <p>
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </p>
 ```
 
 <output data-lang="output">
   <p>
-    <button v-on:click="count -= 1">-</button>
+    <button @click="count -= 1">-</button>
     {{ count }}
-    <button v-on:click="count += 1">+</button>
+    <button @click="count += 1">+</button>
   </p>
 </output>
 
@@ -223,9 +227,9 @@ Notice the behavior when multiple global counters are rendered:
 
 <output data-lang="output">
   <p>
-    <button v-on:click="count -= 1">-</button>
+    <button @click="count -= 1">-</button>
     {{ count }}
-    <button v-on:click="count += 1">+</button>
+    <button @click="count += 1">+</button>
   </p>
 </output>
 
@@ -251,16 +255,16 @@ window.$docsify = {
 
 ```markdown
 <div id="counter">
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </div>
 ```
 
 <output id="counter">
-  <button v-on:click="count -= 1">-</button>
+  <button @click="count -= 1">-</button>
   {{ count }}
-  <button v-on:click="count += 1">+</button>
+  <button @click="count += 1">+</button>
 </output>
 
 ## Components
@@ -331,4 +335,3 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 - Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
 - Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
 - When processing `vueGlobalOptions`, docsify parses the child elements within the main content area (`#main`) and mounts the element if it contains Vue content. Docsify does not parse each individual node within the main content area.
-- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported. Shorthand syntax is supported when explicitly mounting Vue content via `vueComponents`, `vueMounts`, or a markdown `<script>`.
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 50ab4d2a3..468e281a9 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -127,8 +127,25 @@ function renderMain(html) {
     // Template syntax, vueComponents, vueGlobalOptions
     if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
       const reHasBraces = /{{2}[^{}]*}{2}/;
-      const reHasDataDirective = /\sv-(bind:|cloak|html=|is=|model=|on:|slot=|text=)/;
-      const reHasStaticDirective = /\sv-(else|else-if=|for=|if=|once|pre|show=)/;
+      // Matches Vue full and shorthand syntax as attributes in HTML tags.
+      //
+      // Full syntax examples:
+      // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
+      //
+      // Shorthand syntax examples:
+      // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
+      //
+      // Markup examples:
+      // <div v-html>{{ html }}</div>
+      // <div v-text="msg"></div>
+      // <div v-bind:text-content.prop="text">
+      // <button v-on:click="doThis"></button>
+      // <button v-on:click.once="doThis"></button>
+      // <button v-on:[event]="doThis"></button>
+      // <button @click.stop.prevent="doThis">
+      // <a :href="url">
+      // <a :[key]="url">
+      const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
 
       vueMountData.push(
         ...dom
@@ -145,11 +162,8 @@ function renderMain(html) {
               elm.querySelector(vueComponentNames.join(',') || null) ||
               // has curly braces
               reHasBraces.test(elm.outerHTML) ||
-              // has data directive
-              (docsifyConfig.vueGlobalOptions &&
-                reHasDataDirective.test(elm.outerHTML)) ||
-              // has static content directive
-              reHasStaticDirective.test(elm.outerHTML);
+              // has content directive
+              reHasDirective.test(elm.outerHTML);
 
             return isVueMount;
           })
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 7de73b7b0..ce13a4d42 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -49,19 +49,19 @@ describe('Vue.js Compatibility', function() {
 
           <div id="vueglobaloptions">
             <p v-text="msg">---</p>
-            <button v-on:click="counter += 1">+</button>
+            <button @click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 
           <div id="vuemounts">
             <p v-text="msg">---</p>
-            <button v-on:click="counter += 1">+</button>
+            <button @click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 
           <div id="vuescript">
             <p v-text="msg">---</p>
-            <button v-on:click="counter += 1">+</button>
+            <button @click="counter += 1">+</button>
             <span>{{ counter }}<span>
           </div>
 

From 7cf1e7c27ac53f55dbc8338925a404074d4189d9 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Thu, 19 Nov 2020 14:08:51 -0600
Subject: [PATCH 40/41] Update Vue-related descriptions and links

---
 docs/configuration.md |  6 +++---
 docs/vue.md           | 27 ++++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 9549ffa59..7b3b5fcda 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -634,7 +634,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Registers Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
+Creates and registers global [Vue components](https://vuejs.org/v2/guide/components.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -667,7 +667,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies options for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
+Specifies [Vue options](https://vuejs.org/v2/api/#Options-Data) for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
 
 ```js
 window.$docsify = {
@@ -701,7 +701,7 @@ window.$docsify = {
 
 - type: `Object`
 
-Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
+Specifies DOM elements to mount as [Vue instances](https://vuejs.org/v2/guide/instance.html) and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
diff --git a/docs/vue.md b/docs/vue.md
index a2a5625e2..2e61e6ec5 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -193,7 +193,7 @@ Good {{ timeOfDay }}!
 
 ## Global options
 
-Use `vueGlobalOptions` to specify options for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
+Use `vueGlobalOptions` to specify [Vue options](https://vuejs.org/v2/api/#Options-Data) for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
 
 ```js
 window.$docsify = {
@@ -237,7 +237,7 @@ Changes made to one counter affect the both counters. This is because both insta
 
 ## Mounts
 
-Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
+Use `vueMounts` to specify DOM elements to mount as [Vue instances](https://vuejs.org/v2/guide/instance.html) and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -269,7 +269,7 @@ window.$docsify = {
 
 ## Components
 
-Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
+Use `vueComponents` to create and register global [Vue components](https://vuejs.org/v2/guide/components.html). Components are specified using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
 
 ```js
 window.$docsify = {
@@ -327,11 +327,20 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
 
 ## Technical Notes
 
-- Docsify processes Vue content in the following order:
+- Docsify processes Vue content in the following order on each page load:
   1. Execute markdown `<script>`
-  1. Register `vueComponents`
-  1. Mount DOM elements via `vueMounts`
-  1. Process unmounted Vue content using `vueGlobalOptions`
+  1. Register global `vueComponents`
+  1. Mount `vueMounts`
+  1. Auto-mount unmounted `vueComponents`
+  1. Auto-mount unmounted Vue template syntax using `vueGlobalOptions`
+- When auto-mounting Vue content, docsify will mount each top-level element in your markdown that contains template syntax or a component. For example, in the following HTML the top-level `<p>`, `<my-component />`, and `<div>` elements will be mounted.
+  ```html
+  <p>{{ foo }}</p>
+  <my-component />
+  <div>
+    <span>{{ bar }}</span>
+    <some-other-component />
+  </div>
+  ```
 - Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
-- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
-- When processing `vueGlobalOptions`, docsify parses the child elements within the main content area (`#main`) and mounts the element if it contains Vue content. Docsify does not parse each individual node within the main content area.
+- Docsify will automatically destroy/unmount all Vue instances it creates before each page load.

From ffa7c90dfc49c240d7e33cec424ff86de476e514 Mon Sep 17 00:00:00 2001
From: sy-records <52o@qq52o.cn>
Date: Mon, 23 Nov 2020 08:49:30 +0800
Subject: [PATCH 41/41] Fix Lint

---
 test/unit/render-util.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/render-util.test.js b/test/unit/render-util.test.js
index 79384b750..93f2a5acc 100644
--- a/test/unit/render-util.test.js
+++ b/test/unit/render-util.test.js
@@ -1,4 +1,5 @@
 const { removeAtag } = require('../../src/core/render/utils');
+
 const { tree } = require(`../../src/core/render/tpl`);
 
 // Suite