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/HomeView.vue

@@ -87,8 +87,8 @@
             To share, someone must register you.
             <div class="block text-center">
               <button
-                @click="showNameThenIdDialog()"
                 class="text-md font-bold 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-2 py-3 rounded-md"
+                @click="showNameThenIdDialog()"
               >
                 Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
                 info
@@ -112,8 +112,8 @@
             <div class="flex">
               <h2 class="text-xl font-bold">What have you seen someone do?</h2>
               <button
-                @click="openGiftedPrompts()"
                 class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
+                @click="openGiftedPrompts()"
               >
                 <font-awesome icon="lightbulb" class="fa-fw" />
               </button>
@@ -143,7 +143,7 @@
               >
                 <EntityIcon
                   :contact="contact"
-                  :iconSize="64"
+                  :icon-size="64"
                   class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
                 />
                 <h3
@@ -204,8 +204,8 @@
       </div>
 
       <div
-        @click="goToActivityToUserPage()"
         class="border-t p-2 border-slate-300"
+        @click="goToActivityToUserPage()"
       >
         <div class="flex justify-center">
           <div
@@ -247,13 +247,13 @@
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="border-t border-slate-300">
           <li
-            class="border-b border-slate-300 py-2"
             v-for="record in feedData"
             :key="record.jwtId"
+            class="border-b border-slate-300 py-2"
           >
             <div
-              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
+              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
             >
               You've already seen all the following
             </div>
@@ -374,9 +374,9 @@
   <ChoiceButtonDialog ref="choiceButtonDialog" />
 
   <ImageViewer
+    v-model:is-open="isImageViewerOpen"
     :image-url="selectedImage"
     :image-data="selectedImageData"
-    v-model:is-open="isImageViewerOpen"
   />
 </template>