Merge pull request #1409 from docsifyjs/feat/vue-options

feat: Vue components, mount options, global options, and v3 support

Author: jhildenbiddle

cypress.json

@@ -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
 
@@ -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'],
 };
 ```
 
@@ -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 = {
@@ -629,3 +629,104 @@ window.$docsify = {
   topMargin: 90, // default: 0
 };
 ```
+
+## vueComponents
+
+- type: `Object`
+
+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 = {
+  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](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 = {
+  vueGlobalOptions: {
+    data() {
+      return {
+        count: 0,
+      };
+    },
+  },
+};
+```
+
+```markdown
+<p>
+  <button @click="count -= 1">-</button>
+  {{ count }}
+  <button @click="count += 1">+</button>
+</p>
+```
+
+<output data-lang="output">
+  <p>
+    <button @click="count -= 1">-</button>
+    {{ count }}
+    <button @click="count += 1">+</button>
+  </p>
+</output>
+
+## vueMounts
+
+- type: `Object`
+
+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 = {
+  vueMounts: {
+    '#counter': {
+      data() {
+        return {
+          count: 0,
+        };
+      },
+    },
+  },
+};
+```
+
+```markdown
+<div id="counter">
+  <button @click="count -= 1">-</button>
+  {{ count }}
+  <button @click="count += 1">+</button>
+</div>
+```
+
+<output id="counter">
+  <button @click="count -= 1">-</button>
+  {{ count }}
+  <button @click="count += 1">+</button>
+</output>

docs/configuration.md

@@ -101,6 +101,62 @@
             '/': 'Search',
           },
         },
+        vueComponents: {
+          'button-counter': {
+            template: `
+            <button @click="count += 1">
+              You clicked me {{ count }} times
+            </button>
+          `,
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
+        vueGlobalOptions: {
+          data() {
+            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);
+            },
+          },
+        },
+        vueMounts: {
+          '#counter': {
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
         plugins: [
           function(hook, vm) {
             hook.beforeEach(function(html) {
@@ -163,5 +219,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>