diff --git a/app/cdash/public/js/controllers/viewProjects.js b/app/cdash/public/js/controllers/viewProjects.js
deleted file mode 100644
index 38dcfd474f..0000000000
--- a/app/cdash/public/js/controllers/viewProjects.js
+++ /dev/null
@@ -1,6 +0,0 @@
-CDash.controller('ViewProjectsController',
-  ["$scope", "apiLoader", function ViewProjectsController($scope, apiLoader) {
-    // Hide filters by default.
-    $scope.showfilters = false;
-    apiLoader.loadPageData($scope, 'api/v1/viewProjects.php');
-}]);
diff --git a/resources/js/app.js b/resources/js/app.js
index 6eaac34c5c..09f81e7cd6 100755
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -19,6 +19,7 @@ import HeaderNav from "./components/page-header/HeaderNav.vue";
 import HeaderMenu from "./components/page-header/HeaderMenu.vue";
 import HeaderLogo from "./components/page-header/HeaderLogo.vue";
 import ViewDynamicAnalysis from "./components/ViewDynamicAnalysis.vue";
+import AllProjects from "./components/AllProjects.vue";
 
 const cdash_components = {
   BuildConfigure,
@@ -35,6 +36,7 @@ const cdash_components = {
   HeaderMenu,
   HeaderLogo,
   ViewDynamicAnalysis,
+  AllProjects,
 };
 
 /**
diff --git a/resources/js/components/AllProjects.vue b/resources/js/components/AllProjects.vue
new file mode 100644
index 0000000000..ef0d4473d4
--- /dev/null
+++ b/resources/js/components/AllProjects.vue
@@ -0,0 +1,162 @@
+<template>
+  <section v-if="errored">
+    <p>{{ cdash.error }}</p>
+  </section>
+  <section v-else-if="!loading">
+    <h1
+      v-if="cdash.projects.length === 0"
+      class="text-info text-center"
+    >
+      No Projects Found
+    </h1>
+
+    <!-- Main table -->
+    <table
+      v-if="cdash.projects.length > 0"
+      id="indexTable"
+      border="0"
+      cellpadding="4"
+      cellspacing="0"
+      width="100%"
+      class="tabb striped"
+    >
+      <thead>
+        <tr class="table-heading1">
+          <td
+            colspan="6"
+            align="left"
+            class="nob"
+          >
+            <h3>Dashboards</h3>
+          </td>
+        </tr>
+
+        <tr class="table-heading">
+          <th
+            id="sort_0"
+            align="center"
+            width="10%"
+          >
+            <b>Project</b>
+          </th>
+          <td
+            align="center"
+            width="65%"
+          >
+            <b>Description</b>
+          </td>
+          <th
+            id="sort_2"
+            align="center"
+            class="nob"
+            width="13%"
+          >
+            <b>Last activity</b>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="project in cdash.projects"
+        >
+          <td align="center">
+            <a :href="project.link">
+              {{ project.name }}
+            </a>
+          </td>
+          <td align="left">
+            {{ project.description }}
+          </td>
+          <td
+            align="center"
+            class="nob"
+          >
+            <span
+              class="sorttime"
+              style="display: none;"
+            >
+              {{ project.lastbuilddatefull }}
+            </span>
+            <a
+              class="builddateelapsed"
+              :href="project.link + '&date=' + project.lastbuilddate"
+            >
+              {{ project.lastbuild_elapsed }}
+            </a>
+            <img
+              :src="$baseURL + '/img/cleardot.gif'"
+              :class="'activity-level-' + project.activity"
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table
+      v-if="cdash.projects.length > 0"
+      width="100%"
+      cellspacing="0"
+      cellpadding="0"
+    >
+      <tr>
+        <td
+          height="1"
+          colspan="14"
+          align="left"
+          bgcolor="#888888"
+        />
+      </tr>
+      <tr>
+        <td
+          height="1"
+          colspan="14"
+          align="right"
+        >
+          <div
+            v-if="cdash.showoldtoggle"
+            id="showold"
+          >
+            <a
+              v-show="!cdash.allprojects"
+              :href="$baseURL + '/projects?allprojects=1'"
+            >
+              Show all {{ cdash.nprojects }} projects
+            </a>
+            <a
+              v-show="cdash.allprojects"
+              :href="$baseURL + '/projects'"
+            >
+              Hide old projects
+            </a>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </section>
+</template>
+
+<script>
+import ApiLoader from './shared/ApiLoader';
+export default {
+  name: 'AllProjects',
+
+  data () {
+    return {
+      // API results.
+      cdash: {},
+      loading: true,
+      errored: false,
+    }
+  },
+
+  mounted () {
+    let queryParams = '';
+    const allprojects = (new URL(location.href)).searchParams.get('allprojects');
+    if (allprojects) {
+      queryParams = '?allprojects=1';
+    }
+    ApiLoader.loadPageData(this, '/api/v1/viewProjects.php' + queryParams);
+  },
+}
+</script>
diff --git a/resources/views/project/view-all-projects.blade.php b/resources/views/project/view-all-projects.blade.php
index 51c3892245..5d3edb1464 100644
--- a/resources/views/project/view-all-projects.blade.php
+++ b/resources/views/project/view-all-projects.blade.php
@@ -1,78 +1,8 @@
 @extends('cdash', [
-    'angular' => true,
-    'angular_controller' => 'ViewProjectsController'
+    'vue' => true,
+    'title' => 'Projects',
 ])
 
 @section('main_content')
-    @verbatim
-        <p ng-show="cdash.upgradewarning" style="color:red">
-            <b>
-                The current database schema doesn't match the version of CDash
-                you are running, upgrade your database structure in the
-                <a href="upgrade.php">
-                    Administration/CDash maintenance panel of CDash
-                </a>
-            </b>
-        </p>
-
-        <h1 ng-if="cdash.projects.length == 0"
-            class="text-info text-center">
-            No Projects Found
-        </h1>
-
-        <!-- Main table -->
-        <table ng-if="cdash.projects.length > 0"
-               border="0" cellpadding="4" cellspacing="0" width="100%" id="indexTable" class="tabb">
-            <thead>
-            <tr class="table-heading1">
-                <td colspan="6" align="left" class="nob"><h3>Dashboards</h3></td>
-            </tr>
-
-            <tr class="table-heading">
-                <th align="center" id="sort_0" width="10%"><b>Project</b></th>
-                <td align="center" width="65%"><b>Description</b></td>
-                <th align="center" class="nob"  id="sort_2" width="13%"><b>Last activity</b></th>
-            </tr>
-            </thead>
-
-            <tbody>
-            <tr ng-repeat="project in cdash.projects" ng-class-odd="'odd'" ng-class-even="'even'">
-                <td align="center" >
-                    <a ng-href="{{project.link}}">
-                        {{project.name}}
-                    </a>
-                </td>
-                <td align="left">{{project.description}}</td>
-                <td align="center" class="nob">
-              <span class="sorttime" style="display:none">
-                {{project.lastbuilddatefull}}
-              </span>
-                    <a class="builddateelapsed" ng-alt="{{project.lastbuild}}" ng-href="{{project.link}}&date={{project.lastbuilddate}}">
-                        {{project.lastbuild_elapsed}}
-                    </a>
-                    <img src="img/cleardot.gif" ng-class="'activity-level-{{project.activity}}'"/>
-                </td>
-            </tr>
-            </tbody>
-        </table>
-
-        <table ng-if="cdash.projects.length > 0"
-               width="100%" cellspacing="0" cellpadding="0">
-            <tr>
-                <td height="1" colspan="14" align="left" bgcolor="#888888"></td>
-            </tr>
-            <tr>
-                <td height="1" colspan="14" align="right">
-                    <div ng-if="cdash.showoldtoggle" id="showold">
-                        <a ng-show="!cdash.allprojects" href="projects?allprojects=1">
-                            Show all {{cdash.nprojects}} projects
-                        </a>
-                        <a ng-show="cdash.allprojects" href="projects">
-                            Hide old projects
-                        </a>
-                    </div>
-                </td>
-            </tr>
-        </table>
-    @endverbatim
+    <all-projects></all-projects>
 @endsection
diff --git a/tests/Feature/CDashTest.php b/tests/Feature/CDashTest.php
index 5585a01783..094d76d829 100755
--- a/tests/Feature/CDashTest.php
+++ b/tests/Feature/CDashTest.php
@@ -98,7 +98,7 @@ public function testViewProjectsRedirectNoPublicProjects(): void
         $this->get('/projects')->assertRedirect('/login');
 
         $normal_user = $this->makeNormalUser();
-        $this->actingAs($normal_user)->get('/projects')->assertOk()->assertSeeText('No Projects Found');
+        $this->actingAs($normal_user)->get('/projects')->assertOk()->assertViewIs('project.view-all-projects');
         $normal_user->delete();
     }
 }