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] 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 54d6720f..8e0d6c19 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 8e6e5377..6c829e5c 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 029ff80e..9952e46b 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 8f719338..0d0409f7 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 a83d8d04..27194c6a 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');
       });