linting and formatting

package-lock.json

@@ -16,6 +16,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
+        "eslint-config-prettier": "^9.1.0",
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
         "vue-tsc": "^1.8.16"
@@ -1024,6 +1025,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.17.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz",
@@ -1926,9 +1939,9 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
-      "version": "4.4.11",
+      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",

package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "eslint-config-prettier": "^9.1.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.16"

src/router/index.ts

@@ -1,11 +1,9 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "../views/Home.vue";
-import About from "../views/About.vue";
 import TelephonyContext from "../views/TelephonyContext.vue";
 
 const routes = [
   { path: "/", component: Home },
-  { path: "/about", component: About },
   {
     path: "/telephonyContext/",
     name: "telephonyContext",

src/views/About.vue

@@ -1,5 +0,0 @@
-<template lang="">
-  <div>
-    <h1>About</h1>
-  </div>
-</template>

src/views/HomePage.vue

@@ -2,7 +2,6 @@
   <div>
     <h1>Home</h1>
     <ul>
-      <li><router-link to="/about">Go to About</router-link></li>
       <li>
         <router-link
           to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&_sessionIdentifier=bc93f1fc"

src/views/TelephonyContext.vue

@@ -15,31 +15,62 @@ defineProps({
   <h2>Summary</h2>
   <div class="customerAccount customer-detail-container" width="100%">
     <div class="customer-profile-fields vertical-layout">
-      <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
+      <div
+        class="column-layout"
+        style="width: 100%; max-width: 100%; height: 100%"
+      >
         <div class="row1 column-layout-row">
-          <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
+          <div
+            class="blockOuterSpacingRight col1 column-layout-cell"
+            style="width: 25%"
+          >
             <h3>Telephony Data</h3>
-            <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
+            <VerticalLabelValue
+              label="Channel"
+              :value="channel"
+            ></VerticalLabelValue>
             <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-            <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
+            <VerticalLabelValue
-            <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
+              label="Queue"
+              :value="queue"
+            ></VerticalLabelValue>
+            <VerticalLabelValue
+              label="Direction"
+              :value="direction"
+            ></VerticalLabelValue>
             <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
             <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
           </div>
-          <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
+          <div
+            class="blockOuterSpacingRight col2 column-layout-cell"
+            style="width: 25%"
+          >
             <h3>Da Vinci Transfer Summary</h3>
             <ul>
-              <li><span class="customer">Alice</span> is a new employee who needs access to an application for her work, but she doesn't have the
+              <li>
-                password.</li>
+                <span class="customer">Alice</span> is a new employee who needs
-              <li>She asked the <span class="iva">IVA</span> but they are unable to help her</li>
+                access to an application for her work, but she doesn't have the
+                password.
+              </li>
+              <li>
+                She asked the <span class="iva">IVA</span> but they are unable
+                to help her
+              </li>
               <li>She tries to guess the password, but fails.</li>
-              <li>She uses a hacking tool to find the password, which is "ilovebing".</li>
+              <li>
-              <li>She logs into the application, unaware that the senior developer is monitoring her.</li>
+                She uses a hacking tool to find the password, which is
+                "ilovebing".
+              </li>
+              <li>
+                She logs into the application, unaware that the senior developer
+                is monitoring her.
+              </li>
             </ul>
           </div>
         </div>
       </div>
-    </div>` `
+    </div>
+    ` `
   </div>
 </template>
 <style scoped>