fix($core): component CodeGroup loads correctly on clientfix #2711 (#2794)

* fix($core): wrap code group in ClientOnly

* fix($core): component CodeGroup loads correctly on client

* fix($core): component CodeGroup loads correctly on client

* fix($core): activate codetabs whenever we update the arr

Author: d-pollard

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) {
+      this.$parent.loadTabs()
+    }
   }
 }
 </script>

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>
@@ -38,31 +40,44 @@ export default {
   },
   watch: {
     activeCodeTabIndex (index) {
-      this.codeTabs.forEach(tab => {
-        tab.elm.classList.remove('theme-code-block__active')
-      })
-      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+      this.activateCodeTab(index)
     }
   },
   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.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
-      this.activeCodeTabIndex = 0
-    }
+    this.loadTabs()
   },
   methods: {
     changeCodeTab (index) {
       this.activeCodeTabIndex = index
+    },
+    loadTabs () {
+      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
+      }
+
+      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')
+      }
     }
   }
 }