diff --git a/site/frontend/src/pages/status.ts b/site/frontend/src/pages/status.ts
index 65fca4609..95c37eecd 100644
--- a/site/frontend/src/pages/status.ts
+++ b/site/frontend/src/pages/status.ts
@@ -1,228 +1,8 @@
-import {STATUS_DATA_URL} from "../urls";
-
-import {getJson} from "../utils/requests";
-
-interface Commit {
-  sha: string;
-  date: string;
-  type: "Try" | "Master";
-}
-
-interface BenchmarkStatus {
-  name: string;
-  error: string;
-}
-
-interface Step {
-  step: string;
-  is_done: boolean;
-  expected_duration: number;
-  current_progress: number;
-}
-
-/**
- * The `any` types in the interface below were chosen because the types are quite complex
- * on the Rust side (they are modeled with enums encoded in a way that is not so simple to model in
- * TS).
- */
-interface CurrentState {
-  artifact: any;
-  progress: Step[];
-}
-
-interface StatusResponse {
-  last_commit: Commit | null;
-  benchmarks: BenchmarkStatus[];
-  missing: Array<[Commit, any]>;
-  current: CurrentState | null;
-  most_recent_end: number | null;
-}
-
-function populate_data(data: StatusResponse) {
-  let state_div = document.querySelector("#benchmark-state");
-  if (data.last_commit !== null) {
-    let element = document.createElement("p");
-    element.innerHTML = `SHA: ${data.last_commit.sha}, date: ${data.last_commit.date}`;
-    state_div.appendChild(element);
-  }
-  for (let benchmark of data.benchmarks) {
-    let element = document.createElement("div");
-    element.innerHTML = `<details open>
-                    <summary>${benchmark.name} - error</summary>
-                    <pre class="benchmark-error"></pre>
-                </details>`;
-    element.querySelector<HTMLElement>(".benchmark-error").innerText =
-      benchmark.error;
-    state_div.appendChild(element);
-  }
-  let missing_div = document.querySelector("#data-insert-js");
-  if (data.current !== null) {
-    let table = document.createElement("table");
-    let tr = document.createElement("tr");
-    let th = document.createElement("th");
-    th.innerText = "Step";
-    tr.appendChild(th);
-    th = document.createElement("th");
-    tr.appendChild(th);
-    th = document.createElement("th");
-    th.innerText = "Took";
-    tr.appendChild(th);
-    th = document.createElement("th");
-    th.innerText = "Expected";
-    tr.appendChild(th);
-    table.appendChild(tr);
-
-    let left = 0;
-    for (let step of data.current.progress) {
-      let tr = document.createElement("tr");
-      let td = document.createElement("td");
-      td.innerText = step.step;
-      tr.appendChild(td);
-      td = document.createElement("td");
-      let progress = document.createElement("progress");
-      progress.setAttribute("max", step.expected_duration.toString());
-      progress.setAttribute(
-        "value",
-        (step.is_done
-          ? step.expected_duration
-          : step.current_progress
-        ).toString()
-      );
-      td.appendChild(progress);
-      tr.appendChild(td);
-      td = document.createElement("td");
-      td.innerHTML =
-        step.current_progress == 0
-          ? ""
-          : format_duration(step.current_progress);
-      td.style.textAlign = "right";
-      tr.appendChild(td);
-      td = document.createElement("td");
-      td.innerHTML = format_duration(step.expected_duration);
-      td.style.textAlign = "right";
-      tr.appendChild(td);
-      if (!step.is_done) {
-        left += step.expected_duration - step.current_progress;
-      }
-      table.appendChild(tr);
-    }
-    let element = document.createElement("p");
-    let artifact_desc = "";
-    if (data.current.artifact.Commit) {
-      artifact_desc = commit_url(data.current.artifact.Commit);
-    } else {
-      artifact_desc = data.current.artifact.Tag;
-    }
-    element.innerHTML = `Currently benchmarking: ${artifact_desc}.
-                <br>Time left: ${format_duration(left)}`;
-    missing_div.appendChild(element);
-    missing_div.appendChild(table);
-  } else {
-    let element = document.createElement("p");
-    if (data.most_recent_end) {
-      let end = new Date(data.most_recent_end * 1000);
-      element.innerHTML = `No current collection in progress. Last one
-                    finished at ${end.toLocaleString()} local time,
-                    ${format_duration(
-                      Math.trunc((Date.now() - end.getTime()) / 1000)
-                    )} ago.`;
-    } else {
-      element.innerHTML = "No current collection in progress.";
-    }
-    missing_div.appendChild(element);
-  }
-  {
-    let element = document.createElement("p");
-    element.innerHTML = `Queue (${data.missing.length} total):<br> Times are local.`;
-    missing_div.appendChild(element);
-  }
-  let table = document.createElement("table");
-  table.id = "missing-commits";
-  {
-    let row = document.createElement("tr");
-    row.innerHTML = `<th>Commit Date</th><th>SHA</th><th>Reason</th>`;
-    table.appendChild(row);
-  }
-  for (let [commit, reason] of data.missing) {
-    let row = document.createElement("tr");
-    {
-      let date = new Date(commit.date);
-      let element = document.createElement("td");
-      if (date.getUTCFullYear() == 2001) {
-        element.innerHTML = "try commit";
-        element.style.textAlign = "center";
-      } else {
-        element.innerHTML = new Date(commit.date).toLocaleString();
-      }
-      row.appendChild(element);
-    }
-    {
-      let element = document.createElement("td");
-      element.innerHTML = commit_url(commit);
-      row.appendChild(element);
-    }
-    {
-      let element = document.createElement("td");
-      element.innerHTML = reason_to_string(reason);
-      row.appendChild(element);
-    }
-    table.appendChild(row);
-  }
-  missing_div.appendChild(table);
-}
-
-function reason_to_string(reason) {
-  if (typeof reason == "string") {
-    return reason;
-  } else if (reason.InProgress) {
-    return `${reason_to_string(reason.InProgress)} - in progress`;
-  } else if (reason["Master"] != undefined && reason.Master.pr) {
-    return `<a href="https://github.com/rust-lang/rust/pull/${
-      reason["Master"].pr
-    }">
-                    #${reason["Master"].pr}</a>${
-      reason.Master.is_try_parent ? " - Try commit parent" : ""
-    }`;
-  } else if (reason["Master"] != undefined && reason.Master.pr == 0) {
-    return "Master";
-  } else if (reason["Try"] != undefined && reason.Try.pr) {
-    return `
-                Try for
-                <a href="https://github.com/rust-lang/rust/pull/${reason["Try"].pr}">
-                    #${reason["Try"].pr}
-                </a>`;
-  } else {
-    // Should never happen, but a good fallback
-    return JSON.stringify(reason);
-  }
-}
-
-function commit_url(commit) {
-  return `<a href="https://github.com/rust-lang/rust/commit/${
-    commit.sha
-  }">${commit.sha.substr(0, 13)}</a>`;
-}
-
-function format_duration(seconds) {
-  let secs = seconds % 60;
-  let mins = Math.trunc(seconds / 60);
-  let hours = Math.trunc(mins / 60);
-  mins -= hours * 60;
-
-  let s = "";
-  if (hours > 0) {
-    s = `${hours}h${mins < 10 ? "0" + mins : mins}m${
-      secs < 10 ? "0" + secs : secs
-    }s`;
-  } else {
-    s = `${mins < 10 ? " " + mins : mins}m${secs < 10 ? "0" + secs : secs}s`;
-  }
-  return s;
-}
-
-async function make_data() {
-  const response = await getJson<StatusResponse>(STATUS_DATA_URL);
-  populate_data(response);
-}
-
-make_data();
+import Status from "./status/page.vue";
+import {createApp} from "vue";
+import WithSuspense from "../components/with-suspense.vue";
+
+const app = createApp(WithSuspense, {
+  component: Status,
+});
+app.mount("#app");
diff --git a/site/frontend/src/pages/status/data.ts b/site/frontend/src/pages/status/data.ts
new file mode 100644
index 000000000..90defe6e3
--- /dev/null
+++ b/site/frontend/src/pages/status/data.ts
@@ -0,0 +1,35 @@
+interface Commit {
+  sha: string;
+  date: string;
+  type: "Try" | "Master";
+}
+
+interface BenchmarkStatus {
+  name: string;
+  error: string;
+}
+
+interface Step {
+  step: string;
+  is_done: boolean;
+  expected_duration: number;
+  current_progress: number;
+}
+
+/**
+ * The `any` types in the interface below were chosen because the types are quite complex
+ * on the Rust side (they are modeled with enums encoded in a way that is not so simple to model in
+ * TS).
+ */
+interface CurrentState {
+  artifact: any;
+  progress: Step[];
+}
+
+export interface StatusResponse {
+  last_commit: Commit | null;
+  benchmarks: BenchmarkStatus[];
+  missing: Array<[Commit, any]>;
+  current: CurrentState | null;
+  most_recent_end: number | null;
+}
diff --git a/site/frontend/src/pages/status/page.vue b/site/frontend/src/pages/status/page.vue
new file mode 100644
index 000000000..2e75302b8
--- /dev/null
+++ b/site/frontend/src/pages/status/page.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import {getJson} from "../../utils/requests";
+import {STATUS_DATA_URL} from "../../urls";
+import {withLoading} from "../../utils/loading";
+import {computed, ref, Ref} from "vue";
+import {StatusResponse} from "./data";
+
+async function loadStatus(loading: Ref<boolean>) {
+  data.value = await withLoading(loading, () =>
+    getJson<StatusResponse>(STATUS_DATA_URL)
+  );
+}
+
+function formatDuration(seconds: number): string {
+  let secs = seconds % 60;
+  let mins = Math.trunc(seconds / 60);
+  let hours = Math.trunc(mins / 60);
+  mins -= hours * 60;
+
+  let s = "";
+  if (hours > 0) {
+    s = `${hours}h${mins < 10 ? "0" + mins : mins}m${
+      secs < 10 ? "0" + secs : secs
+    }s`;
+  } else {
+    s = `${mins < 10 ? " " + mins : mins}m${secs < 10 ? "0" + secs : secs}s`;
+  }
+  return s;
+}
+
+function commitUrl(commit: {sha: string}): string {
+  return `<a href="https://github.com/rust-lang/rust/commit/${
+    commit.sha
+  }">${commit.sha.substring(0, 13)}</a>`;
+}
+
+function formatArtifact(artifact: any): string {
+  if (artifact.Commit) {
+    return commitUrl(artifact.Commit);
+  } else {
+    return artifact.Tag;
+  }
+}
+
+function formatReason(reason: any): string {
+  if (typeof reason == "string") {
+    return reason;
+  } else if (reason.InProgress) {
+    return `${formatReason(reason.InProgress)} - in progress`;
+  } else if (reason["Master"] !== undefined && reason.Master.pr) {
+    return `<a href="https://github.com/rust-lang/rust/pull/${
+      reason["Master"].pr
+    }">
+                    #${reason["Master"].pr}</a>${
+      reason.Master.is_try_parent ? " - Try commit parent" : ""
+    }`;
+  } else if (reason["Master"] !== undefined && reason.Master.pr == 0) {
+    return "Master";
+  } else if (reason["Try"] !== undefined && reason.Try.pr) {
+    return `
+                Try for
+                <a href="https://github.com/rust-lang/rust/pull/${reason["Try"].pr}">
+                    #${reason["Try"].pr}
+                </a>`;
+  } else {
+    // Should never happen, but a reasonable fallback
+    return JSON.stringify(reason);
+  }
+}
+
+const timeLeft = computed(() => {
+  const steps = data.value?.current?.progress ?? [];
+  let left = 0;
+  for (const step of steps) {
+    if (!step.is_done) {
+      left += step.expected_duration - step.current_progress;
+    }
+  }
+  return left;
+});
+const recentEndDate = computed(() => {
+  return new Date(data.value.most_recent_end * 1000);
+});
+
+const loading = ref(true);
+
+const data: Ref<StatusResponse | null> = ref(null);
+loadStatus(loading);
+</script>
+
+<template>
+  <div v-if="data !== null">
+    <div>
+      <div v-if="data.current !== null">
+        <p>
+          Currently benchmarking:
+          <span v-html="formatArtifact(data.current.artifact)"></span>.<br />
+          Time left: {{ formatDuration(timeLeft) }}
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>Step</th>
+              <th></th>
+              <th>Took</th>
+              <th>Expected</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="step in data.current.progress">
+              <td>{{ step.step }}</td>
+              <td>
+                <progress
+                  :max="step.expected_duration.toString()"
+                  :value="
+                    (step.is_done
+                      ? step.expected_duration
+                      : step.current_progress
+                    ).toString()
+                  "
+                ></progress>
+              </td>
+              <td class="aligned">
+                {{
+                  step.current_progress == 0
+                    ? ""
+                    : formatDuration(step.current_progress)
+                }}
+              </td>
+              <td class="aligned">
+                {{ formatDuration(step.expected_duration) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else>
+        <p>
+          No current collection in progress.
+          <template v-if="data.most_recent_end !== null"
+            >Last one finished at {{ recentEndDate.toLocaleString() }} local
+            time,
+            {{
+              formatDuration(
+                Math.trunc((Date.now() - recentEndDate.getTime()) / 1000)
+              )
+            }}
+            ago.
+          </template>
+        </p>
+      </div>
+      <p>
+        Queue ({{ data.missing.length }} total):<br />
+        Times are local.
+      </p>
+      <table class="missing-commits">
+        <thead>
+          <tr>
+            <th>Commit Date</th>
+            <th>SHA</th>
+            <th>Reason</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="[commit, reason] in data.missing">
+            <td>{{ new Date(commit.date).toLocaleString() }}</td>
+            <td v-html="commitUrl(commit)"></td>
+            <td v-html="formatReason(reason)"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <span>Benchmarking errors for last commit:</span>
+    <div v-if="data.last_commit !== null">
+      <p>SHA: {{ data.last_commit.sha }}, date: {{ data.last_commit.date }}</p>
+    </div>
+    <div v-for="benchmark in data.benchmarks">
+      <div>
+        <details open>
+          <summary>{{ benchmark.name }} - error</summary>
+          <pre>{{ benchmark.error }}</pre>
+        </details>
+      </div>
+    </div>
+  </div>
+  <div v-else>Loading status…</div>
+</template>
+
+<style scoped lang="scss">
+.aligned {
+  text-align: right;
+}
+.missing-commits {
+  th {
+    text-align: center;
+  }
+  td {
+    text-align: left;
+    padding: 0 0.5em;
+  }
+}
+</style>
diff --git a/site/frontend/templates/pages/status.html b/site/frontend/templates/pages/status.html
index df5ca1955..fc1900e45 100644
--- a/site/frontend/templates/pages/status.html
+++ b/site/frontend/templates/pages/status.html
@@ -1,25 +1,9 @@
 {% extends "layout.html" %}
 {% block head %}
-<style>
-    #missing-commits th {
-        text-align: center;
-    }
-
-    #missing-commits td {
-        text-align: left;
-        padding: 0 0.5em;
-    }
-</style>
+<link rel="stylesheet" type="text/css" href="scripts/status.css">
 {% endblock %}
 {% block content %}
-<div>
-    <div id="data">
-        <div id="data-insert-js"></div>
-        Benchmarking errors for last commit:
-        <div id="benchmark-state"></div>
-    </div>
-    <div id="as-of"></div>
-</div>
+<div id="app"></div>
 {% endblock %}
 {% block script %}
 <script src="scripts/status.js"></script>