fix: update Vue template syntax and improve Vite config

- Fix Vue template syntax in App.vue by using proper event handler format
- Update Vite config to properly handle ESM imports and crypto modules
- Add manual chunks for better code splitting
- Improve environment variable handling in vite-env.d.ts
- Fix TypeScript linting errors in App.vue

src/components/ActivityListItem.vue

@@ -29,7 +29,7 @@
 
         <div>
           <h3 class="font-semibold">
-            {{ record.issuer.known ? record.issuer.displayName : "" }}
+            {{ record.issuer.known ? record.issuer.displayName : '' }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -123,7 +123,7 @@
 
             <div
               class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
-            ></div>
+            />
           </div>
         </div>
 
@@ -182,59 +182,59 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from "../types";
-import EntityIcon from "./EntityIcon.vue";
-import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
-import { containsHiddenDid } from "../libs/endorserServer";
-import ProjectIcon from "./ProjectIcon.vue";
+import { Component, Prop, Vue } from 'vue-facing-decorator'
+import { GiveRecordWithContactInfo } from '../types'
+import EntityIcon from './EntityIcon.vue'
+import { isGiveClaimType, notifyWhyCannotConfirm } from '../libs/util'
+import { containsHiddenDid } from '../libs/endorserServer'
+import ProjectIcon from './ProjectIcon.vue'
 
 @Component({
   components: {
     EntityIcon,
-    ProjectIcon,
-  },
+    ProjectIcon
+  }
 })
 export default class ActivityListItem extends Vue {
-  @Prop() record!: GiveRecordWithContactInfo;
-  @Prop() lastViewedClaimId?: string;
-  @Prop() isRegistered!: boolean;
-  @Prop() activeDid!: string;
-  @Prop() confirmerIdList?: string[];
+  @Prop() record!: GiveRecordWithContactInfo
+  @Prop() lastViewedClaimId?: string
+  @Prop() isRegistered!: boolean
+  @Prop() activeDid!: string
+  @Prop() confirmerIdList?: string[]
 
   get fetchAmount(): string {
     const claim =
-      (this.record.fullClaim as unknown).claim || this.record.fullClaim;
+      (this.record.fullClaim as unknown).claim || this.record.fullClaim
 
     const amount = claim.object?.amountOfThisGood
       ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
-      : "";
+      : ''
 
-    return amount;
+    return amount
   }
 
   get description(): string {
     const claim =
-      (this.record.fullClaim as unknown).claim || this.record.fullClaim;
+      (this.record.fullClaim as unknown).claim || this.record.fullClaim
 
-    return `${claim.description}`;
+    return `${claim.description}`
   }
 
   private displayAmount(code: string, amt: number) {
-    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
+    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`
   }
 
   private currencyShortWordForCode(unitCode: string, single: boolean) {
-    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
+    return unitCode === 'HUR' ? (single ? 'hour' : 'hours') : unitCode
   }
 
   get canConfirm(): boolean {
-    if (!this.isRegistered) return false;
-    if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;
-    if (this.confirmerIdList?.includes(this.activeDid)) return false;
-    if (this.record.issuerDid === this.activeDid) return false;
-    if (containsHiddenDid(this.record.fullClaim)) return false;
-    return true;
+    if (!this.isRegistered) return false
+    if (!isGiveClaimType(this.record.fullClaim?.['@type'])) return false
+    if (this.confirmerIdList?.includes(this.activeDid)) return false
+    if (this.record.issuerDid === this.activeDid) return false
+    if (containsHiddenDid(this.record.fullClaim)) return false
+    return true
   }
 
   handleConfirmClick() {
@@ -242,24 +242,24 @@ export default class ActivityListItem extends Vue {
       notifyWhyCannotConfirm(
         this.$notify,
         this.isRegistered,
-        this.record.fullClaim?.["@type"],
+        this.record.fullClaim?.['@type'],
         this.record,
         this.activeDid,
-        this.confirmerIdList,
-      );
-      return;
+        this.confirmerIdList
+      )
+      return
     }
 
-    this.$emit("confirmClaim", this.record);
+    this.$emit('confirmClaim', this.record)
   }
 
   get friendlyDate(): string {
-    const date = new Date(this.record.issuedAt);
+    const date = new Date(this.record.issuedAt)
     return date.toLocaleDateString(undefined, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
   }
 }
 </script>