style: reorder v-model and v-bind directives

Changes:
- Move v-model directives before other attributes
- Move v-bind directives before event handlers
- Reorder attributes for better readability
- Fix template attribute ordering across components
- Improve eslint rules
- add default vite config for testing (handles nostr error too)
This follows Vue.js style guide recommendations for attribute
ordering and improves template consistency.

src/views/ClaimView.vue

@@ -7,8 +7,8 @@
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <button
-          @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.go(-1)"
         >
           <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
@@ -34,9 +34,9 @@
                   // but rather than add more Plan-specific logic to detect the agent
                   // we'll let them click the Project link and edit from there
                 "
-                @click="onClickEditClaim"
                 title="Edit"
                 data-testId="editClaimButton"
+                @click="onClickEditClaim"
               >
                 <font-awesome
                   icon="pen"
@@ -131,10 +131,10 @@
             >
               <!-- router-link to /claim/ only changes URL path -->
               <a
+                class="text-blue-500 mt-4 cursor-pointer"
                 @click="
                   showDifferentClaimPage(detailsForGive?.fulfillsHandleId)
                 "
-                class="text-blue-500 mt-4 cursor-pointer"
               >
                 Fulfills
                 {{
@@ -170,15 +170,15 @@
                   <div class="flex gap-4">
                     <div class="grow overflow-hidden">
                       <a
+                        class="text-blue-500 mt-4 cursor-pointer"
                         @click="
                           provider.identifier.startsWith('did:')
-                            ? this.$router.push(
+                            ? $router.push(
                                 '/did/' +
                                   encodeURIComponent(provider.identifier),
                               )
                             : showDifferentClaimPage(provider.identifier)
                         "
-                        class="text-blue-500 mt-4 cursor-pointer"
                       >
                         an activity...
                       </a>
@@ -207,8 +207,8 @@
     <div class="mt-8">
       <button
         v-if="libsUtil.canFulfillOffer(veriClaim)"
-        @click="openFulfillGiftDialog()"
         class="col-span-1 block w-fit text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        @click="openFulfillGiftDialog()"
       >
         Affirm Delivery
         <font-awesome
@@ -222,7 +222,6 @@
     <div v-if="libsUtil.isGiveAction(veriClaim)">
       <div class="flex columns-3">
         <button
-          class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
           v-if="
             libsUtil.isGiveRecordTheUserCanConfirm(
               isRegistered,
@@ -231,6 +230,7 @@
               confirmerIdList,
             )
           "
+          class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
           @click="confirmConfirmClaim()"
         >
           Confirm
@@ -388,7 +388,7 @@
         <span v-if="canShare">
           You can ask one of your contacts to take a look and see if their
           contacts can see more details:
-          <a @click="onClickShareClaim()" class="text-blue-500"
+          <a class="text-blue-500" @click="onClickShareClaim()"
             >click to send them this page info</a
           >
           and see if they can make an introduction. Someone is connected to
@@ -399,8 +399,8 @@
           You can ask one of your contacts to take a look and see if their
           contacts can see more details:
           <a
-            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             >click to copy this page info</a
           >
           and see if they can make an introduction. Someone is connected to
@@ -414,7 +414,7 @@
         of your contacts.
         <span v-if="canShare">
           If you'd like an introduction,
-          <a @click="onClickShareClaim()" class="text-blue-500"
+          <a class="text-blue-500" @click="onClickShareClaim()"
             >click to share the information with them and ask if they'll tell
             you more about the participants.</a
           >
@@ -422,8 +422,8 @@
         <span v-else>
           If you'd like an introduction,
           <a
-            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             >share this page with them and ask if they'll tell you more about
             about the participants.</a
           >