fix: use NuxtLink instead, lint fix :key position

app/components/features/DynamicSpeaker.vue

@@ -1,14 +1,9 @@
 <template>
   <span>
     <template v-for="(constituent, index) in texts">
-      <RouterLink
-        class="speaker-link"
-        v-if="constituent.route"
-        :key="index"
-        :to="constituent.route"
-      >
+      <NuxtLink class="speaker-link" v-if="constituent.route" :key="index" :to="constituent.route">
         {{ constituent.text }}
-      </RouterLink>
+      </NuxtLink>
       <span class="speaker-bg" v-else :key="'plain-' + index">{{ constituent }}</span>
     </template>
   </span>

app/components/features/QuoteList.vue

@@ -17,13 +17,13 @@
           :characters="quote.characters"
           class="my-3"
         />
-        <RouterLink
+        <NuxtLink
           v-else
           :to="{ name: 'Character', params: { character: quote.character } }"
           class="speaker-link"
         >
           {{ quote.speaker }}
-        </RouterLink>
+        </NuxtLink>
       </td>
       <td class="quote-text w-100 pr-3" v-html="transform(quote.text)" />
       <td class="px-1 pl-2">

app/components/features/SearchResult.vue

@@ -37,7 +37,7 @@
           <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value" />
         </tr>
       </table>
-      <RouterLink
+      <NuxtLink
         v-if="expanded"
         class="no-link search-result-link text-muted mb-2 ml-2 w-100"
         :to="{
@@ -48,7 +48,7 @@
       >
         Season {{ item.season }} Episode {{ item.episode_rel }} Scene
         {{ item.section_rel }}
-      </RouterLink>
+      </NuxtLink>
     </BCardText>
   </BCard>
 </template>

app/components/layout/SeasonList.vue

@@ -9,7 +9,6 @@ import {
 import { ChevronDown } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { cn } from '@/lib/utils';
-
 import useStore from '@/store';
 
 const store = useStore();
@@ -47,8 +46,8 @@ const seasons = computed(() => store.quoteData);
         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
           <template v-if="'title' in episode">
             <SeasonListItem
-              class="bg-white/90 hover:bg-gray-100"
               :key="`rl-${index}`"
+              class="bg-white/90 hover:bg-gray-100"
               :episode-number="episode.episodeNumber"
               :season-number="episode.seasonNumber"
               :title="episode.title"

app/components/layout/SeasonListItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { RouterLink } from 'vue-router';
 import { cn } from '@/lib/utils';
 import useStore from '@/store';
 import { ref } from 'vue';
@@ -15,7 +14,7 @@ const props = defineProps<
   } & { class?: HTMLAttributes['class'] }
 >();
 
-const timeoutID = ref<number | null>(null);
+const timeoutID = ref<ReturnType<typeof setTimeout> | null>(null);
 
 const startHover = () => {
   timeoutID.value = setTimeout(() => {
@@ -32,10 +31,10 @@ const stopHover = () => {
 </script>
 
 <template>
-  <RouterLink
+  <NuxtLink
+    :id="`s-${seasonNumber}-ep-${episodeNumber}`"
     tabindex="0"
     :aria-label="`Episode ${episodeNumber}: ${title}`"
-    :id="`s-${seasonNumber}-ep-${episodeNumber}`"
     :to="{ name: 'Episode', params: { season: seasonNumber, episode: episodeNumber } }"
     :class="
       cn(
@@ -52,7 +51,7 @@ const stopHover = () => {
     <span class="text-foreground/80 group-hover/item:text-black">
       &OpenCurlyDoubleQuote;{{ title }}&CloseCurlyDoubleQuote;
     </span>
-  </RouterLink>
+  </NuxtLink>
 </template>
 
 <style scoped></style>

app/pages/characters/index.vue

@@ -21,12 +21,12 @@
               <BCol>
                 <h4>
                   {{ characters[id].name || id }}
-                  <RouterLink
+                  <NuxtLink
                     class="no-link"
                     :to="{ name: 'Character', params: { character: id } }"
                   >
                     <b-icon class="h6" icon="caret-right-fill" />
-                  </RouterLink>
+                  </NuxtLink>
                   <span class="h6 font-italic" style="opacity: 50%">
                     {{ characters[id].actor }}
                   </span>

app/pages/index.vue

@@ -12,7 +12,7 @@
         However, as of the time of writing this, most everything else is setup.
         <hr />
         <p style="text-align: center">
-          Check out the <RouterLink :to="{ name: 'About' }"> about page </RouterLink> for more info
+          Check out the <NuxtLink :to="{ name: 'About' }"> about page </NuxtLink> for more info
           on what this website is.
         </p>
       </BCardText>

app/pages/season/[id].vue

@@ -20,12 +20,12 @@
             <BCol>
               <h4>
                 {{ episode.title }}
-                <RouterLink
+                <NuxtLink
                   class="no-link"
                   :to="getEpisodeRoute(episode.seasonNumber, episode.episodeNumber)"
                 >
                   <b-icon class="h6" icon="caret-right-fill" />
-                </RouterLink>
+                </NuxtLink>
               </h4>
               <p class="pl-3">
                 {{ episode.description }}