From f38f00f2d1ba433717f7c43ab83b871f476db1b1 Mon Sep 17 00:00:00 2001
From: koy <369491420@qq.com>
Date: Sun, 10 Dec 2023 15:20:57 +0800
Subject: [PATCH 1/4] update: render vue by default.

---
 src/core/render/index.js | 123 +++++++++++++++++++--------------------
 test/e2e/vue.test.js     |  35 ++++++-----
 2 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index f4c71ee9c..f759d6fc3 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -90,6 +90,7 @@ export function Render(Base) {
 
       // Handle Vue content not mounted by markdown <script>
       if ('Vue' in window) {
+        const vueGlobalOptions = docsifyConfig.vueGlobalOptions || {};
         const vueMountData = [];
         const vueComponentNames = Object.keys(
           docsifyConfig.vueComponents || {}
@@ -109,10 +110,10 @@ export function Render(Base) {
         // Store global data() return value as shared data object
         if (
           !this.#vueGlobalData &&
-          docsifyConfig.vueGlobalOptions &&
-          typeof docsifyConfig.vueGlobalOptions.data === 'function'
+          vueGlobalOptions.data &&
+          typeof vueGlobalOptions.data === 'function'
         ) {
-          this.#vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+          this.#vueGlobalData = vueGlobalOptions.data();
         }
 
         // vueMounts
@@ -125,65 +126,63 @@ export function Render(Base) {
             .filter(([elm, vueConfig]) => elm)
         );
 
-        // Template syntax, vueComponents, vueGlobalOptions
-        if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
-          const reHasBraces = /{{2}[^{}]*}{2}/;
-          // 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
-              .findAll('.markdown-section > *')
-              // Remove duplicates
-              .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-              // 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 curly braces
-                  reHasBraces.test(elm.outerHTML) ||
-                  // has content directive
-                  reHasDirective.test(elm.outerHTML);
-
-                return isVueMount;
-              })
-              .map(elm => {
-                // Clone global configuration
-                const vueConfig = {
-                  ...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 (this.#vueGlobalData) {
-                  vueConfig.data = () => this.#vueGlobalData;
-                }
-
-                return [elm, vueConfig];
-              })
-          );
-        }
+        // Template syntax, vueComponents, vueGlobalOptions ...
+        const reHasBraces = /{{2}[^{}]*}{2}/;
+        // 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
+            .findAll('.markdown-section > *')
+            // Remove duplicates
+            .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+            // 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 curly braces
+                reHasBraces.test(elm.outerHTML) ||
+                // has content directive
+                reHasDirective.test(elm.outerHTML);
+
+              return isVueMount;
+            })
+            .map(elm => {
+              // Clone global configuration
+              const vueConfig = {
+                ...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 (this.#vueGlobalData) {
+                vueConfig.data = () => this.#vueGlobalData;
+              }
+
+              return [elm, vueConfig];
+            })
+        );
 
         // Mount
         for (const [mountElm, vueConfig] of vueMountData) {
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 0edbb43d5..6997c7281 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -96,6 +96,23 @@ test.describe('Vue.js Compatibility', () => {
     const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
 
     test.describe(`Vue v${vueVersion}`, () => {
+      test(`Parse templates and render content when import Vue v${vueVersion} resources`, async ({
+        page,
+      }) => {
+        const docsifyInitConfig = {
+          config: {},
+          markdown: {
+            homepage: stripIndent`
+            <div id="vuefor"><span v-for="i in 5">{{ i }}</span></div>
+          `,
+          },
+        };
+
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page.locator('#vuefor')).toHaveText('12345');
+      });
       for (const executeScript of [true, undefined]) {
         test(`renders content when executeScript is ${executeScript}`, async ({
           page,
@@ -147,24 +164,6 @@ test.describe('Vue.js Compatibility', () => {
         await expect(page.locator('#vuescript p')).toHaveText('---');
       });
 
-      test(`ignores content when vueComponents, vueMounts, and vueGlobalOptions are undefined`, async ({
-        page,
-      }) => {
-        const docsifyInitConfig = getSharedConfig();
-
-        docsifyInitConfig.config.vueComponents = undefined;
-        docsifyInitConfig.config.vueGlobalOptions = undefined;
-        docsifyInitConfig.config.vueMounts = undefined;
-        docsifyInitConfig.scriptURLs = vueURL;
-
-        await docsifyInit(docsifyInitConfig);
-        await expect(page.locator('#vuefor')).toHaveText('{{ i }}');
-        await expect(page.locator('#vuecomponent')).toHaveText('---');
-        await expect(page.locator('#vueglobaloptions p')).toHaveText('---');
-        await expect(page.locator('#vuemounts p')).toHaveText('---');
-        await expect(page.locator('#vuescript p')).toHaveText('vuescript');
-      });
-
       test(`ignores content when vueGlobalOptions is undefined`, async ({
         page,
       }) => {

From a0dc9e7e19f91bd69f09322e4d5f6f6b8fa70e1b Mon Sep 17 00:00:00 2001
From: koy <369491420@qq.com>
Date: Sun, 10 Dec 2023 15:25:55 +0800
Subject: [PATCH 2/4] chore: polish.

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

diff --git a/src/core/render/index.js b/src/core/render/index.js
index f759d6fc3..970cc4d2a 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -184,6 +184,11 @@ export function Render(Base) {
             })
         );
 
+        // Not found mounts but import Vue resource
+        if (!!vueMountData.length) {
+          return;
+        }
+
         // Mount
         for (const [mountElm, vueConfig] of vueMountData) {
           const isVueAttr = 'data-isvue';

From d6cb6c6e796eb6610375bc7d74ae97acb4afb3dd Mon Sep 17 00:00:00 2001
From: koy <369491420@qq.com>
Date: Sun, 10 Dec 2023 15:31:54 +0800
Subject: [PATCH 3/4] lint.

---
 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 970cc4d2a..411795b71 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -185,7 +185,7 @@ export function Render(Base) {
         );
 
         // Not found mounts but import Vue resource
-        if (!!vueMountData.length) {
+        if (!!vueMountData.length === true) {
           return;
         }
 

From e4692b511086c2f98fa496fbf23b1c3598830cc0 Mon Sep 17 00:00:00 2001
From: koy <369491420@qq.com>
Date: Sun, 10 Dec 2023 15:33:10 +0800
Subject: [PATCH 4/4] lint.

---
 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 411795b71..0dcd0ed1d 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -185,7 +185,7 @@ export function Render(Base) {
         );
 
         // Not found mounts but import Vue resource
-        if (!!vueMountData.length === true) {
+        if (vueMountData.length === 0) {
           return;
         }