Adding router-links

Padding and border defaults not implicitly defaulted

package-lock.json

@@ -8,6 +8,9 @@
       "name": "kickstart-for-time-pwa",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.2.1",
+        "@fortawesome/free-solid-svg-icons": "^6.2.1",
+        "@fortawesome/vue-fontawesome": "^3.0.2",
         "core-js": "^3.26.1",
         "register-service-worker": "^1.7.2",
         "vue": "^3.2.45",
@@ -1804,6 +1807,48 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
+      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
+      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz",
+      "integrity": "sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",

package.json

@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
     "core-js": "^3.26.1",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.45",

src/App.vue

@@ -1,30 +1,5 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
   <router-view />
 </template>
 
-<style>
+<style></style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>

src/main.ts

@@ -6,4 +6,49 @@ import store from "./store";
 
 import "./assets/styles/tailwind.css";
 
-createApp(App).use(store).use(router).mount("#app");
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faChevronLeft,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+  faChevronLeft,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck
+);
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+createApp(App)
+  .component("fa", FontAwesomeIcon)
+  .use(store)
+  .use(router)
+  .mount("#app");

src/router/index.ts

@@ -22,6 +22,72 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
   },
+  {
+    path: "/account",
+    name: "account",
+    component: () =>
+      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
+  },
+  {
+    path: "/confirm-contact",
+    name: "confirm-contact",
+    component: () =>
+      import(
+        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
+      ),
+  },
+  {
+    path: "/scan-contact",
+    name: "scan-contact",
+    component: () =>
+      import(
+        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
+      ),
+  },
+  {
+    path: "/discover",
+    name: "discover",
+    component: () =>
+      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
+  },
+  {
+    path: "/import-account",
+    name: "import-account",
+    component: () =>
+      import(
+        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-account",
+    name: "new-edit-account",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-commitment",
+    name: "new-edit-commitment",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-project",
+    name: "new-edit-project",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
+      ),
+  },
+  {
+    path: "/project",
+    name: "project",
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+  },
 ];
 
 const router = createRouter({

src/views/AccountViewView.vue

@@ -5,31 +5,31 @@
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-house-chimney fa-fw"></i
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -68,18 +68,18 @@
       >
         <span
           ><code>did:peer:kl45kj41lk451kl3</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
         <span>
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
           >
-            <i class="fa-solid fa-share-nodes fa-fw"></i>
+            <fa icon="share-nodes" class="fa-fw"></fa>
           </button>
           <button
-            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
+            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md ml-1"
           >
-            <i class="fa-solid fa-qrcode fa-fw"></i>
+            <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
       </div>
@@ -88,7 +88,7 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>dyIgKepL19trfrFu5jzkoNhI</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
       </div>
 
@@ -96,7 +96,7 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>m/44'/0'/0'/0/0</code>
-          <i class="fa-solid fa-copy text-slate-400 fa-fw"></i
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
         ></span>
       </div>
     </div>

src/views/ConfirmContactView.vue

@@ -8,7 +8,7 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
 
         Confirm Contact

src/views/ContactScanView.vue

@@ -7,7 +7,7 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
 
         Scan Contact
@@ -56,17 +56,17 @@
       <input
         type="text"
         placeholder="Name (optional)"
-        class="block w-full rounded border-slate-400 mb-2"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       />
       <input
         type="text"
         placeholder="ID"
-        class="block w-full rounded border-slate-400 mb-2"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       />
       <input
         type="text"
         placeholder="Public Key (optional)"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       />
 
       <div class="mt-8">

src/views/DiscoverView.vue

@@ -1,34 +1,35 @@
 <template>
+  <!-- QUICK NAV -->
   <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-house-chimney fa-fw"></i
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -46,12 +47,12 @@
       <input
         type="text"
         placeholder="Search…"
-        class="block w-full rounded-l border-r-0 border-slate-400"
+        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
       />
       <button
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
-        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
+        <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </form>
 
@@ -99,7 +100,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Canyon cleanup</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
             </div>
           </div>
         </a>
@@ -117,7 +118,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Potluck with neighbors</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i> Andrew A.
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
             </div>
           </div>
         </a>
@@ -135,7 +136,7 @@
           <div class="grow">
             <h2 class="text-base font-semibold">Historical site</h2>
             <div class="text-sm">
-              <i class="fa-solid fa-user fa-fw text-slate-400"></i>
+              <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
               <em>Unknown</em>
             </div>
           </div>

src/views/HomeView.vue

@@ -1,8 +1,5 @@
 <template>
-  <div class="home">
+  <section></section>
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
 </template>
 
 <script lang="ts">

src/views/ImportAccountView.vue

@@ -7,8 +7,8 @@
         <a
           href="start.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left"></fa>
-        ></a>
+        </a>
         Import Existing Identity
       </h1>
     </div>
@@ -20,7 +20,7 @@
       <input
         type="text"
         placeholder="Seed Phrase"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       />
       <div class="mt-8">
         <input

src/views/NewEditAccountView.vue

@@ -7,8 +7,8 @@
         <a
           href="account-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa>
-        ></a>
+        </a>
         [New/Edit] Identity
       </h1>
     </div>
@@ -16,12 +16,12 @@
       <input
         type="text"
         placeholder="First Name"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       />
       <input
         type="text"
         placeholder="Last Name"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       />
 
       <div class="mt-8">

src/views/NewEditCommitmentView.vue

@@ -8,8 +8,8 @@
         <a
           href="project-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa>
-        ></a>
+        </a>
 
         Make Commitment
       </h1>
@@ -17,7 +17,9 @@
 
     <!-- Project Details -->
     <form>
-      <select class="block w-full rounded border-slate-400 mb-4">
+      <select
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      >
         <option disabled>Choose a commitment type…</option>
         <option selected>Time</option>
         <option>Cryptocurrency</option>
@@ -29,7 +31,7 @@
         <input
           type="number"
           placeholder="0.0"
-          class="block w-full rounded-l border-slate-400"
+          class="block w-full rounded-l border border-slate-400 px-3 py-2"
         />
         <span
           class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"

src/views/NewEditProjectView.vue

@@ -8,8 +8,8 @@
         <a
           href="project-view.html"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa>
-        ></a>
+        </a>
 
         [New/Edit] Project
       </h1>
@@ -25,12 +25,12 @@
           <button
             class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
           >
-            <i class="fa-solid fa-pen fa-fw"></i>
+            <fa icon="pen" class="fa-fw"></fa>
           </button>
           <button
             class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
           >
-            <i class="fa-solid fa-trash-can fa-fw"></i>
+            <fa icon="trash-can" class="fa-fw"></fa>
           </button>
         </div>
         <img src="https://picsum.photos/800/400" class="w-full" />
@@ -39,12 +39,12 @@
       <input
         type="text"
         placeholder="Project Name"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       />
 
       <textarea
         placeholder="Description"
-        class="block w-full rounded border-slate-400 mb-4"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
         rows="5"
       ></textarea>
       <div class="text-xs text-slate-500 italic -mt-3 mb-4">

src/views/ProjectViewView.vue

@@ -5,31 +5,31 @@
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-house-chimney fa-fw"></i
+          ><fa icon="house-chimney" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Search -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="search.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-magnifying-glass fa-fw"></i
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Projects -->
       <li class="basis-1/5 rounded-md bg-slate-400 text-white">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-folder-open fa-fw"></i
+          ><fa icon="folder-open" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-hand fa-fw rotate-45"></i
+          ><fa icon="hand" class="fa-fw"></fa
         ></a>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <a href="account-view.html" class="block text-center py-3 px-1"
-          ><i class="fa-solid fa-circle-user fa-fw"></i
+          ><fa icon="circle-user" class="fa-fw"></fa
         ></a>
       </li>
     </ul>
@@ -42,13 +42,13 @@
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><i class="fa-solid fa-chevron-left fa-fw"></i
+          ><fa icon="chevron-left" class="fa-fw"></fa
         ></a>
         <!-- Context Menu -->
         <a
           href=""
           class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
-          ><i class="fa-solid fa-ellipsis-vertical fa-fw"></i
+          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
         ></a>
 
         View Project
@@ -65,11 +65,9 @@
       <div>
         <h2 class="text-xl font-semibold">Canyon cleanup</h2>
         <div class="flex justify-between gap-4 text-sm mb-3">
+          <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
           <span
-            ><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</span
+            ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
-          >
-          <span
-            ><i class="fa-solid fa-calendar fa-fw text-slate-400"></i> 8 days
             ago</span
           >
         </div>
@@ -99,22 +97,21 @@
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >5 hours <i class="fa-solid fa-spinner fa-fw text-slate-400"></i
+            >5 hours <fa icon="spinner" class="fa-fw text-slate-400"></fa
           ></span>
         </li>
 
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >US$ 20.00
+            >US$ 20.00 <fa icon="circle-check" class="fa-fw text-lime-500"></fa
-            <i class="fa-solid fa-circle-check fa-fw text-lime-500"></i
           ></span>
         </li>
 
         <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
           <span>[Username]</span>
           <span
-            >0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i
+            >0.1 BTC <fa icon="spinner" class="fa-fw text-slate-400"></fa
           ></span>
         </li>
       </ul>

src/views/StartView.vue

@@ -12,15 +12,16 @@
       <p class="text-center text-xl mb-4 font-light">
         Do you already have an identity to import?
       </p>
-      <a
+      <router-link
-        href="account-edit.html"
+        :to="{ name: 'new-edit-account' }"
         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-        >No</a
       >
-      <a
+        No
-        href="account-import.html"
+      </router-link>
+      <router-link
+        :to="{ name: 'import-account' }"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        >Yes</a
+        >Yes</router-link
       >
     </div>
   </section>