chore: better show theme (#14557)

examples/components/header.vue

@@ -378,6 +378,7 @@
   import AlgoliaSearch from './search.vue';
   import compoLang from '../i18n/component.json';
   import Element from 'main/index.js';
+  import { getVars } from './theme-configurator/utils/api.js';
   import bus from '../bus';
 
   const { version } = Element;
@@ -395,7 +396,8 @@
           'en-US': 'English',
           'es': 'Español',
           'fr-FR': 'Français'
-        }
+        },
+        showThemeConfigurator: false
       };
     },
 
@@ -417,13 +419,21 @@
       },
       isComponentPage() {
         return /^component/.test(this.$route.name);
-      },
-      showThemeConfigurator() {
-        const host = location.hostname;
-        return host.match('localhost') || host.match('elenet');
       }
     },
-
+    mounted() {
+      const host = location.hostname;
+      this.showThemeConfigurator = host.match('localhost') || host.match('elenet');
+      if (!this.showThemeConfigurator) {
+        getVars()
+          .then(() => {
+            this.showThemeConfigurator = true;
+          })
+          .catch((err) => {
+            console.error(err);
+          });
+      }
+    },
     methods: {
       switchVersion(version) {
         if (version === this.version) return;