diff --git a/promgen/static/js/promgen.js b/promgen/static/js/promgen.js
index 4f955fbca..eaa05e91a 100644
--- a/promgen/static/js/promgen.js
+++ b/promgen/static/js/promgen.js
@@ -15,27 +15,6 @@ $(document).ready(function() {
   $('[data-toggle="popover"]').popover();
   $('[data-toggle="tooltip"]').tooltip();
 
-  // For querying information such as number of samples being scraped or number
-  // of active exporters, query Prometheus (based on the passed URL) and return
-  // a formatted number
-  // <span class='prom-query'
-  //   data-href='http://prometheus.example/api/v1/query'
-  //   data-query='count(up)'>
-  $('.prom-query').each(function(index) {
-    var ele = $(this)
-    $.ajax({url: this.dataset.href, data: {'query': this.dataset.query}}).done(function(response) {
-      if (response.status=='success') {
-        ele.text(
-          Number.parseInt(response.data.result[0].value[1]).toLocaleString()
-        )
-        ele.parent().addClass('label-info').show()
-      }
-    }).fail(function(response){
-      ele.text(response.statusText)
-      ele.parent().addClass('label-warning').show()
-    })
-  })
-
   $('[data-source]').click(function() {
     var btn = $(this);
     var query = btn.data('source') === 'self' ? btn.text() : $(btn.data('source')).val();
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index 9b9d7eda5..aa8c13a58 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/promgen/static/js/promgen.vue.js
@@ -172,3 +172,30 @@ var app = new Vue({
         }
     }
 })
+
+
+Vue.component('promql-query', {
+    props: ['href', 'query'],
+    data: function () {
+        return {
+            count: 0
+        }
+    },
+    template: '<span style="display:none"><slot></slot>{{count}}</span>',
+    mounted() {
+        var this_ = this;
+        var url = new URL(this.href)
+        url.search = new URLSearchParams({ query: this.query })
+        fetch(url)
+            .then(response => response.json())
+            .then(result => {
+                this_.count = Number.parseInt(result.data.result[0].value[1]).toLocaleString();
+                this_.$el.classList.add('label-info')
+                this_.$el.style.display = "inline";
+            })
+            .catch(error => {
+                this_.$el.classList.add('label-warning')
+                this_.$el.style.display = "inline";
+            })
+    }
+})
diff --git a/promgen/templates/promgen/project_form.html b/promgen/templates/promgen/project_form.html
index e38e13ec7..4500585db 100644
--- a/promgen/templates/promgen/project_form.html
+++ b/promgen/templates/promgen/project_form.html
@@ -86,14 +86,10 @@ <h1>Register new Project</h1>
         </td>
         {% if shard.proxy %}
         <td>
-          <span class="label" style="display:none;">
-            Samples: <span class="prom-query" data-href='{{shard.url}}/api/v1/query' data-query='sum(scrape_samples_scraped)'></span>
-          </span>
+            <promql-query class="label" href='{{shard.url}}/api/v1/query' query='sum(scrape_samples_scraped)'>Samples: </promql-query>
         </td>
         <td>
-          <span class="label" style="display:none;">
-            Exporters: <span class="prom-query" data-href='{{shard.url}}/api/v1/query' data-query='count(up)'></span>
-          </span>
+            <promql-query class="label" href='{{shard.url}}/api/v1/query' query='count(up)'>Exporters: </promql-query>
         </td>
         {% else %}
         <td>&nbsp;</td>
diff --git a/promgen/templates/promgen/shard_header.html b/promgen/templates/promgen/shard_header.html
index deb121dc3..0d99480cb 100644
--- a/promgen/templates/promgen/shard_header.html
+++ b/promgen/templates/promgen/shard_header.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 <div class="well">
   {% if shard.proxy %}
-  <span class="label" style="display:none;">Samples: <span class="prom-query" data-href='{{shard.url}}/api/v1/query' data-query='sum(scrape_samples_scraped)'></span></span>
-  <span class="label" style="display:none;">Exporters: <span class="prom-query" data-href='{{shard.url}}/api/v1/query' data-query='count(up)'></span></span>
+  <promql-query class="label" href='{{shard.url}}/api/v1/query' query='sum(scrape_samples_scraped)'>Samples: </promql-query>
+  <promql-query class="label" href='{{shard.url}}/api/v1/query' query='count(up)'>Exporters: </promql-query>
   {% endif %}
 
   {% if user.is_superuser %}