From 0e1b92465fc001d6b6df2da0e56ba829ca5519e3 Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Tue, 9 Feb 2021 17:21:22 -0500
Subject: [PATCH 1/4] fix($core): wrap code group in ClientOnly

---
 .../global-components/CodeGroup.vue           | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index a067af5f85..df69564dab 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -1,30 +1,32 @@
 <template>
-  <div class="theme-code-group">
-    <div class="theme-code-group__nav">
-      <ul class="theme-code-group__ul">
-        <li
-          v-for="(tab, i) in codeTabs"
-          :key="tab.title"
-          class="theme-code-group__li"
-        >
-          <button
-            class="theme-code-group__nav-tab"
-            :class="{
-              'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
-            }"
-            @click="changeCodeTab(i)"
+  <ClientOnly>
+    <div class="theme-code-group">
+      <div class="theme-code-group__nav">
+        <ul class="theme-code-group__ul">
+          <li
+            v-for="(tab, i) in codeTabs"
+            :key="tab.title"
+            class="theme-code-group__li"
           >
-            {{ tab.title }}
-          </button>
-        </li>
-      </ul>
+            <button
+              class="theme-code-group__nav-tab"
+              :class="{
+                'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
+              }"
+              @click="changeCodeTab(i)"
+            >
+              {{ tab.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+      <slot />
+      <pre
+        v-if="codeTabs.length < 1"
+        class="pre-blank"
+      >// Make sure to add code blocks to your code group</pre>
     </div>
-    <slot />
-    <pre
-      v-if="codeTabs.length < 1"
-      class="pre-blank"
-    >// Make sure to add code blocks to your code group</pre>
-  </div>
+  </ClientOnly>
 </template>
 
 <script>

From cb584acb62a7ddfd59c80eb7f34347a18f132747 Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Tue, 9 Feb 2021 18:58:43 -0500
Subject: [PATCH 2/4] fix($core): component CodeGroup loads correctly on client

---
 .../global-components/CodeBlock.vue           |  5 +++
 .../global-components/CodeGroup.vue           | 44 ++++++++++++-------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeBlock.vue b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
index fc1dc71742..b6f7bca49e 100644
--- a/packages/@vuepress/theme-default/global-components/CodeBlock.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
@@ -19,6 +19,11 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  mounted () {
+    if (this.$parent && this.$parent.loadTabs.loadTabs) {
+      this.$parent.loadTabs()
+    }
   }
 }
 </script>
diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index df69564dab..6fc161e806 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -41,30 +41,42 @@ export default {
   watch: {
     activeCodeTabIndex (index) {
       this.codeTabs.forEach(tab => {
-        tab.elm.classList.remove('theme-code-block__active')
+        if (tab.elm) {
+          tab.elm.classList.remove('theme-code-block__active')
+        }
       })
-      this.codeTabs[index].elm.classList.add('theme-code-block__active')
-    }
-  },
-  mounted () {
-    this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
-      if (slot.componentOptions.propsData.active === '') {
-        this.activeCodeTabIndex = index
-      }
 
-      return {
-        title: slot.componentOptions.propsData.title,
-        elm: slot.elm
+      if (this.codeTabs[index].elm) {
+        this.codeTabs[index].elm.classList.add('theme-code-block__active')
       }
-    })
-
-    if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
-      this.activeCodeTabIndex = 0
     }
   },
+  mounted () {
+    this.loadTabs()
+  },
   methods: {
     changeCodeTab (index) {
       this.activeCodeTabIndex = index
+    },
+    loadTabs () {
+      if (this.activeCodeTabIndex !== -1) {
+        return
+      }
+
+      this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+        if (slot.componentOptions.propsData.active === '') {
+          this.activeCodeTabIndex = index
+        }
+
+        return {
+          title: slot.componentOptions.propsData.title,
+          elm: slot.elm
+        }
+      })
+
+      if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+        this.activeCodeTabIndex = 0
+      }
     }
   }
 }

From 7f523036982354bb603362048b2a9fa717a14abc Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Tue, 9 Feb 2021 18:59:33 -0500
Subject: [PATCH 3/4] fix($core): component CodeGroup loads correctly on client

---
 .../@vuepress/theme-default/global-components/CodeBlock.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeBlock.vue b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
index b6f7bca49e..d59d85b26a 100644
--- a/packages/@vuepress/theme-default/global-components/CodeBlock.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeBlock.vue
@@ -21,7 +21,7 @@ export default {
     }
   },
   mounted () {
-    if (this.$parent && this.$parent.loadTabs.loadTabs) {
+    if (this.$parent && this.$parent.loadTabs) {
       this.$parent.loadTabs()
     }
   }

From 8c9a0c43c4776de50a6cbc1ea38a38e1501fd15a Mon Sep 17 00:00:00 2001
From: Derek Pollard <dpollard@mail.bradley.edu>
Date: Tue, 9 Feb 2021 23:51:10 -0500
Subject: [PATCH 4/4] fix($core): activate codetabs whenever we update the arr

---
 .../global-components/CodeGroup.vue           | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/@vuepress/theme-default/global-components/CodeGroup.vue b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
index 6fc161e806..ac6ec55436 100644
--- a/packages/@vuepress/theme-default/global-components/CodeGroup.vue
+++ b/packages/@vuepress/theme-default/global-components/CodeGroup.vue
@@ -40,15 +40,7 @@ export default {
   },
   watch: {
     activeCodeTabIndex (index) {
-      this.codeTabs.forEach(tab => {
-        if (tab.elm) {
-          tab.elm.classList.remove('theme-code-block__active')
-        }
-      })
-
-      if (this.codeTabs[index].elm) {
-        this.codeTabs[index].elm.classList.add('theme-code-block__active')
-      }
+      this.activateCodeTab(index)
     }
   },
   mounted () {
@@ -59,10 +51,6 @@ export default {
       this.activeCodeTabIndex = index
     },
     loadTabs () {
-      if (this.activeCodeTabIndex !== -1) {
-        return
-      }
-
       this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
         if (slot.componentOptions.propsData.active === '') {
           this.activeCodeTabIndex = index
@@ -77,6 +65,19 @@ export default {
       if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
         this.activeCodeTabIndex = 0
       }
+
+      this.activateCodeTab(0)
+    },
+    activateCodeTab (index) {
+      this.codeTabs.forEach(tab => {
+        if (tab.elm) {
+          tab.elm.classList.remove('theme-code-block__active')
+        }
+      })
+
+      if (this.codeTabs[index].elm) {
+        this.codeTabs[index].elm.classList.add('theme-code-block__active')
+      }
     }
   }
 }