fix: missing key in loops

components/CarouselPagination.vue

@@ -2,6 +2,7 @@
   <div class="flex flex-row flex-wrap gap-2 justify-center">
     <button
       v-for="(_, i) in amount"
+      :key="i"
       @click="() => slideTo(i)"
       :class="[
         carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',

components/Notification.vue

@@ -17,6 +17,7 @@
               v-for="[name, link] in notification.actions.map((e) =>
                 e.split('|')
               )"
+              :key="name"
               type="button"
               :href="link"
               class="rounded-md text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"

components/UserHeader.vue

@@ -8,6 +8,7 @@
         <ol class="inline-flex items-center gap-x-12">
           <NuxtLink
             v-for="(nav, navIdx) in navigation"
+            :key="navIdx"
             :href="nav.route"
             :class="[
               'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',
@@ -141,6 +142,7 @@
                 <ol class="flex flex-col gap-y-3">
                   <NuxtLink
                     v-for="(nav, navIdx) in navigation"
+                    :key="navIdx"
                     :href="nav.route"
                     :class="[
                       'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',

components/UserHeader/NotificationWidgetPanel.vue

@@ -24,6 +24,7 @@
     <div class="flex flex-col gap-y-2 max-h-[300px] overflow-y-scroll">
       <Notification
         v-for="notification in props.notifications"
+        :key="notification.id"
         :notification="notification"
       />
     </div>

components/UserHeader/UserWidget.vue

@@ -41,6 +41,7 @@
           <div class="flex flex-col">
             <MenuItem
               v-for="(nav, navIdx) in navigation"
+              :key="navIdx"
               v-slot="{ active, close }"
               hydrate-on-visible
             >

pages/account/devices.vue

@@ -62,6 +62,7 @@
                     <li
                       class="inline-flex items-center gap-x-0.5"
                       v-for="capability in client.capabilities"
+                      :key="capability"
                     >
                       <CheckIcon class="size-4" /> {{ capability }}
                     </li>

pages/admin/task/[id]/index.vue

@@ -50,10 +50,14 @@
     </div>
 
     <div class="bg-zinc-950/50 rounded-md p-2 text-zinc-100">
-      <pre v-for="line in task.log">{{ line }}</pre>
+      <pre v-for="(line, idx) in task.log" :key="idx">{{ line }}</pre>
     </div>
   </div>
-  <div v-else role="status" class="w-full h-screen flex items-center justify-center">
+  <div
+    v-else
+    role="status"
+    class="w-full h-screen flex items-center justify-center"
+  >
     <svg
       aria-hidden="true"
       class="size-8 text-transparent animate-spin fill-white"
@@ -72,7 +76,6 @@
     </svg>
     <span class="sr-only">Loading...</span>
   </div>
-
 </template>
 
 <script setup lang="ts">

pages/admin/users/auth/index.vue

@@ -80,6 +80,7 @@
           <div v-if="authMech.settings">
             <div
               v-for="[key, value] in Object.entries(authMech.settings)"
+              :key="key"
               class="flex justify-between gap-x-4 py-2"
             >
               <dt class="text-zinc-400">{{ key }}</dt>

pages/library/collection/[id]/index.vue

@@ -24,6 +24,7 @@
     >
       <GamePanel
         v-for="entry in collection?.entries"
+        :key="entry.gameId"
         :game="entry.game"
         :href="`/library/game/${entry.game.id}`"
       />

pages/library/index.vue

@@ -72,12 +72,11 @@
 
     <!-- game library grid -->
     <div>
-      <h1 class="text-zinc-100 text-xl font-bold font-display">
-        All Games
-      </h1>
+      <h1 class="text-zinc-100 text-xl font-bold font-display">All Games</h1>
       <div class="mt-4 flex flex-row flex-wrap justify-left gap-4">
         <GamePanel
           v-for="game in games"
+          :key="game.id"
           :game="game"
           :href="`/library/game/${game?.id}`"
         />

pages/store/[id]/index.vue

@@ -71,6 +71,7 @@
                 >
                   <component
                     v-for="platform in platforms"
+                    :key="platform"
                     :is="PLATFORM_ICONS[platform]"
                     class="text-blue-600 w-6 h-6"
                   />
@@ -91,7 +92,8 @@
                   class="whitespace-nowrap flex flex-row items-center gap-x-1 px-3 py-4 text-sm text-zinc-400"
                 >
                   <StarIcon
-                    v-for="value in ratingArray"
+                    v-for="(value, idx) in ratingArray"
+                    :key="idx"
                     :class="[
                       value ? 'text-yellow-600' : 'text-zinc-600',
                       'w-4 h-4',