render full claim details in a more resonable format of YAML not JSON

src/views/ClaimView.vue

@@ -137,9 +137,10 @@
 
     <div>
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">Claim</h2>
-      <pre class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md">
-        {{ util.inspect(veriClaim, false, null) }}
-      </pre>
+      <pre
+        class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
+        >{{ veriClaimDump }}</pre
+      >
     </div>
 
     <h2 class="font-bold uppercase text-xl mt-8 mb-2">Full Claim</h2>
@@ -160,7 +161,7 @@
       </button>
     </div>
     <div v-else>
-      <pre>{{ util.inspect(fullClaim, false, null) }}</pre>
+      <pre>{{ fullClaimDump }}</pre>
     </div>
 
     <a
@@ -175,6 +176,7 @@
 
 <script lang="ts">
 import { AxiosError, RawAxiosRequestHeaders } from "axios";
+import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import * as util from "util";
@@ -212,11 +214,14 @@ export default class ClaimView extends Vue {
   confsVisibleErrorMessage = "";
   confsVisibleToIdList = []; // list of DIDs that can see any confirmer
   fullClaim = null;
+  fullClaimDump = "";
   fullClaimMessage = "";
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
+  veriClaimDump = "";
 
   util = util;
+  yaml = yaml;
   containsHiddenDid = serverUtil.containsHiddenDid;
 
   async created() {
@@ -305,6 +310,7 @@ export default class ClaimView extends Vue {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.veriClaim = resp.data;
+        this.veriClaimDump = yaml.dump(this.veriClaim);
       } else {
         // actually, axios typically throws an error so we never get here
         console.log("Error getting claim:", resp);
@@ -384,6 +390,7 @@ export default class ClaimView extends Vue {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.fullClaim = resp.data;
+        this.fullClaimDump = yaml.dump(this.fullClaim);
       } else {
         // actually, axios typically throws an error so we never get here
         console.log("Error getting full claim:", resp);