From 3d79d9e495dc66b7b7eb145e8319cbbc9b33863a Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Wed, 21 Jan 2026 23:39:03 +0100
Subject: [PATCH] Lint frontend

---
 frontend/components/ChampionSelector.vue |  14 ++--
 frontend/components/LaneFilter.vue       |   1 +
 frontend/components/Logo.vue             |   5 ++
 frontend/components/item/Tree.vue        |   8 +-
 frontend/components/item/Viewer.vue      |  61 +++++++-------
 frontend/components/nav/BottomBar.vue    |   2 +
 frontend/components/nav/SideBar.vue      |   5 +-
 frontend/components/rune/Page.vue        |  29 +++++--
 frontend/components/rune/Selector.vue    |   4 +-
 frontend/components/tierlist/Chart.vue   |  22 +++--
 frontend/components/tierlist/Tier.vue    |   1 +
 frontend/error.vue                       |   5 +-
 frontend/eslint.config.mjs               |  49 ++++++++++-
 frontend/nuxt.config.ts                  |   2 +-
 frontend/package-lock.json               | 100 ++++++++++++++++++++---
 frontend/package.json                    |   4 +-
 frontend/pages/about.vue                 |  56 +++++++------
 frontend/pages/champion/[alias].vue      |  80 +++++++++---------
 frontend/pages/index.vue                 |  16 ++--
 frontend/pages/tierlist/[lane].vue       |  65 ++++++++-------
 frontend/utils/helpers.ts                |  10 +--
 21 files changed, 356 insertions(+), 183 deletions(-)

diff --git a/frontend/components/ChampionSelector.vue b/frontend/components/ChampionSelector.vue
index eb22eea..45e8cec 100644
--- a/frontend/components/ChampionSelector.vue
+++ b/frontend/components/ChampionSelector.vue
@@ -32,8 +32,8 @@ const champions = computed(() => {
 
   return championsData.value
     .slice(1)
-    .filter((champion: any) => !champion.name.includes('Doom Bot'))
-    .sort((a: any, b: any) => a.name.localeCompare(b.name))
+    .filter((champion: ChampionSummary) => !champion.name.includes('Doom Bot'))
+    .sort((a: ChampionSummary, b: ChampionSummary) => a.name.localeCompare(b.name))
 })
 
 const lanesMap = computed(() => {
@@ -64,7 +64,7 @@ function filterChampionsByLane(laneFilter: number): void {
   }
 
   const laneName = filterToLane(laneFilter)
-  filteredChampions.value = champions.value.filter((champion: any) => {
+  filteredChampions.value = champions.value.filter((champion: ChampionSummary) => {
     const championLanes = lanesMap.value.get(champion.alias.toLowerCase())
     if (!championLanes) return false
 
@@ -77,14 +77,14 @@ const debouncedSearch = debounce((searchTerm: string) => {
   if (isEmpty(searchTerm)) {
     filteredChampions.value = [...champions.value]
   } else {
-    filteredChampions.value = champions.value.filter((champion: any) =>
+    filteredChampions.value = champions.value.filter((champion: ChampionSummary) =>
       champion.name.toLowerCase().includes(searchTerm.toLowerCase())
     )
   }
 }, 300)
 
 // Watchers
-watch(searchBar, (newS, oldS) => {
+watch(searchBar, (_newS, _oldS) => {
   searchBar.value?.focus()
 })
 
@@ -124,7 +124,7 @@ const isLoading = computed(() => loadingChampions.value || loadingLanes.value)
   <div>
     <!-- Loading state -->
     <div v-if="isLoading" class="loading-state">
-      <div class="loading-spinner"/>
+      <div class="loading-spinner" />
       <p>Loading champions...</p>
     </div>
 
@@ -146,7 +146,7 @@ const isLoading = computed(() => loadingChampions.value || loadingLanes.value)
           @keyup.enter="
             () => filteredChampions.length > 0 && navigateToChampion(filteredChampions[0].alias)
           "
-        >
+        />
       </div>
 
       <!-- Empty state -->
diff --git a/frontend/components/LaneFilter.vue b/frontend/components/LaneFilter.vue
index ec0e1ac..a167382 100644
--- a/frontend/components/LaneFilter.vue
+++ b/frontend/components/LaneFilter.vue
@@ -46,6 +46,7 @@ function handleHover(laneImg: Ref<string>, index: number) {
   <div style="width: fit-content">
     <NuxtImg
       v-for="(laneImg, index) in laneImgs"
+      :key="index"
       format="webp"
       :alt="POSITIONS_STR[index]"
       class="lane-img"
diff --git a/frontend/components/Logo.vue b/frontend/components/Logo.vue
index d6e12c9..e4d2cb5 100644
--- a/frontend/components/Logo.vue
+++ b/frontend/components/Logo.vue
@@ -3,6 +3,11 @@ defineProps<{
   imgWidth?: string
   fontSize?: string
 }>()
+
+// Component name must be multi-word
+defineOptions({
+  name: 'AppLogo'
+})
 </script>
 
 <template>
diff --git a/frontend/components/item/Tree.vue b/frontend/components/item/Tree.vue
index 031065d..ed53a46 100644
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -108,14 +108,18 @@ function handleRefresh() {
         height="64"
         :alt="tree.data.toString()"
         :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)"
-      >
+      />
       <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
         {{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%
       </h3>
     </div>
 
     <div style="margin-left: 30px">
-      <div v-for="child in tree.children" style="width: fit-content; height: fit-content">
+      <div
+        v-for="child in tree.children"
+        :key="child.data"
+        style="width: fit-content; height: fit-content"
+      >
         <ItemTree
           :tree="child"
           :parent-count="tree.count"
diff --git a/frontend/components/item/Viewer.vue b/frontend/components/item/Viewer.vue
index b114d52..474c176 100644
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -12,7 +12,7 @@ const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/defaul
 
 // State
 const { data: items, pending: loadingItems, error: itemsError } = await useFetch(ITEMS_API_URL)
-const itemMap = ref<Map<number, any>>(new Map())
+const itemMap = ref<Map<number, unknown>>(new Map())
 
 // Initialize item map
 watch(
@@ -21,7 +21,7 @@ watch(
     try {
       const itemsData = newItems || []
       if (Array.isArray(itemsData)) {
-        const map = new Map<number, any>()
+        const map = new Map<number, unknown>()
         for (const item of itemsData) {
           if (item?.id) {
             map.set(item.id, item)
@@ -90,24 +90,9 @@ function trimLateGameItems(builds: Builds): void {
   trimLateGameItemsFromTree(builds.tree)
 }
 
-/**
- * Get item data safely
- */
-function getItemData(itemId: number): any {
-  return itemMap.value.get(itemId) || { iconPath: '' }
-}
-
-/**
- * Calculate percentage for item display
- */
-function getItemPercentage(item: { count: number }, total: number): string {
-  if (total <= 0) return '0%'
-  return ((item.count / total) * 100).toFixed(0) + '%'
-}
-
 // Error and loading states
-const hasError = computed(() => itemsError.value || props.error)
-const isLoading = computed(() => loadingItems.value || props.loading)
+const _hasError = computed(() => itemsError.value || props.error)
+const _isLoading = computed(() => loadingItems.value || props.loading)
 </script>
 
 <template>
@@ -116,14 +101,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
       <!-- Start items -->
       <ItemBox v-if="builds.suppItems == undefined || builds.suppItems == null" title="start">
         <div class="iv-items-container">
-          <div v-for="item in builds.start" style="margin-left: 5px; margin-right: 5px">
+          <div
+            v-for="item in builds.start"
+            :key="item.data"
+            style="margin-left: 5px; margin-right: 5px"
+          >
             <NuxtImg
               v-if="item.data != null && item.data != undefined"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -134,14 +123,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
       <!-- Supp items -->
       <ItemBox v-if="builds.suppItems != undefined && builds.suppItems != null" title="supp">
         <div class="iv-items-container">
-          <div v-for="item in builds.suppItems" style="margin-left: 5px; margin-right: 5px">
+          <div
+            v-for="item in builds.suppItems"
+            :key="item.data"
+            style="margin-left: 5px; margin-right: 5px"
+          >
             <NuxtImg
               v-if="item.data != null && item.data != undefined"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -154,14 +147,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
     <!-- Boots first : when champion rush boots -->
     <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :boots-first="builds.bootsFirst">
       <div class="iv-items-container">
-        <div v-for="item in builds.boots" style="margin-left: 5px; margin-right: 5px">
+        <div
+          v-for="item in builds.boots"
+          :key="item.data"
+          style="margin-left: 5px; margin-right: 5px"
+        >
           <NuxtImg
             v-if="item.data != null && item.data != undefined"
             class="item-img"
             width="64"
             height="64"
             :alt="item.data.toString()"
-            :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
           />
           <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
             {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -178,14 +175,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
     <!-- Boots -->
     <ItemBox v-if="builds.bootsFirst <= 0.5" title="boots">
       <div class="iv-items-container">
-        <div v-for="item in builds.boots.slice(0, 4)" style="margin-left: 5px; margin-right: 5px">
+        <div
+          v-for="item in builds.boots.slice(0, 4)"
+          :key="item.data"
+          style="margin-left: 5px; margin-right: 5px"
+        >
           <NuxtImg
             v-if="item.data != null && item.data != undefined"
             class="item-img"
             width="64"
             height="64"
             :alt="item.data.toString()"
-            :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
           />
           <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
             {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -200,6 +201,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
         <div class="iv-items-container">
           <div
             v-for="item in builds.lateGame.slice(0, 4)"
+            :key="item.data"
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
@@ -208,7 +210,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
               width="64"
               height="64"
               :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -219,6 +221,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
         <div v-if="builds.lateGame.length > 4" class="iv-items-container">
           <div
             v-for="item in builds.lateGame.slice(4, 8)"
+            :key="item.data"
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
@@ -227,7 +230,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
               width="64"
               height="64"
               :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
diff --git a/frontend/components/nav/BottomBar.vue b/frontend/components/nav/BottomBar.vue
index 1a8e8a9..dc28b56 100644
--- a/frontend/components/nav/BottomBar.vue
+++ b/frontend/components/nav/BottomBar.vue
@@ -49,6 +49,7 @@ if (route.path.startsWith('/tierlist/')) {
 
     <div
       v-for="(lane, i) in championLanes"
+      :key="i"
       style="display: flex; align-items: center; margin-left: 20px"
     >
       <NuxtImg
@@ -82,6 +83,7 @@ if (route.path.startsWith('/tierlist/')) {
       <div style="display: flex">
         <NuxtLink
           v-for="(pos, i) in POSITIONS"
+          :key="i"
           style="margin-top: 5px; margin-bottom: 5px"
           :to="'/tierlist/' + pos"
         >
diff --git a/frontend/components/nav/SideBar.vue b/frontend/components/nav/SideBar.vue
index 4366441..8327085 100644
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -33,7 +33,7 @@ if (route.path.startsWith('/tierlist/')) {
 
 <template>
   <!-- To make content have a 300px margin -->
-  <div class="sidebar-margin"/>
+  <div class="sidebar-margin" />
 
   <div class="sidebar-container">
     <Logo
@@ -42,7 +42,7 @@ if (route.path.startsWith('/tierlist/')) {
       style="padding-left: 15px; padding-right: 15px; margin-top: 30px"
     />
 
-    <div v-for="(lane, i) in championLanes">
+    <div v-for="(lane, i) in championLanes" :key="i">
       <div
         style="
           display: flex;
@@ -103,6 +103,7 @@ if (route.path.startsWith('/tierlist/')) {
       <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px">Tierlist</h2>
       <NuxtLink
         v-for="(pos, i) in POSITIONS"
+        :key="i"
         style="margin-top: 5px; margin-bottom: 5px"
         :to="'/tierlist/' + pos"
       >
diff --git a/frontend/components/rune/Page.vue b/frontend/components/rune/Page.vue
index bc2b27b..db7e57a 100644
--- a/frontend/components/rune/Page.vue
+++ b/frontend/components/rune/Page.vue
@@ -21,13 +21,13 @@ const { data: stylesData }: PerkStylesResponse = await useFetch(
 )
 watch(
   () => props.primaryStyleId,
-  async (newP, oldP) => {
+  async (_newP, _oldP) => {
     refreshStyles()
   }
 )
 watch(
   () => props.secondaryStyleId,
-  async (newP, oldP) => {
+  async (_newP, _oldP) => {
     refreshStyles()
   }
 )
@@ -55,9 +55,14 @@ refreshStyles()
           :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
         />
       </div>
-      <div v-for="slot in primaryStyle.slots.slice(0, 1)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in primaryStyle.slots.slice(0, 1)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="
             'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
@@ -65,23 +70,33 @@ refreshStyles()
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
         />
       </div>
-      <div v-for="slot in primaryStyle.slots.slice(1, 4)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in primaryStyle.slots.slice(1, 4)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
         />
       </div>
     </div>
-    <div class="rune-spacer-bar"/>
+    <div class="rune-spacer-bar" />
     <div class="rune-holder" style="align-content: end">
       <div class="rune-slot">
-        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" >
+        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" />
       </div>
-      <div v-for="slot in secondaryStyle.slots.slice(1, 4)" class="rune-slot">
+      <div
+        v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
+        :key="slotIndex"
+        class="rune-slot"
+      >
         <NuxtImg
           v-for="perk in slot.perks"
+          :key="perk"
           width="48"
           :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
           :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
diff --git a/frontend/components/rune/Selector.vue b/frontend/components/rune/Selector.vue
index 0979208..0983564 100644
--- a/frontend/components/rune/Selector.vue
+++ b/frontend/components/rune/Selector.vue
@@ -27,7 +27,7 @@ const { data: stylesData }: PerkStylesResponse = await useFetch(
 )
 watch(
   () => props.runes,
-  (newRunes, oldRunes) => {
+  (_newRunes, _oldRunes) => {
     currentlySelectedPage.value = 0
     primaryStyles.value = Array(props.runes.length)
     secondaryStyles.value = Array(props.runes.length)
@@ -72,7 +72,7 @@ function runeSelect(index: number) {
       :selection-ids="runes[currentlySelectedPage].selections"
     />
     <div style="display: flex; margin-top: 20px; justify-content: center">
-      <div v-for="(_, i) in runes" @click="runeSelect(i)">
+      <div v-for="(_, i) in runes" :key="i" @click="runeSelect(i)">
         <div
           :class="
             'rune-selector-entry ' +
diff --git a/frontend/components/tierlist/Chart.vue b/frontend/components/tierlist/Chart.vue
index ca1cfb6..6b39ad0 100644
--- a/frontend/components/tierlist/Chart.vue
+++ b/frontend/components/tierlist/Chart.vue
@@ -6,9 +6,7 @@ import {
   Legend,
   BarElement,
   CategoryScale,
-  LinearScale,
-  plugins,
-  scales
+  LinearScale
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
 
@@ -72,10 +70,20 @@ const chartOptions = ref({
 const chartPlugins = [
   {
     id: 'image-draw',
-    afterDraw: (chart: any) => {
-      const ctx: CanvasRenderingContext2D = chart.ctx
-      const xAxis = chart.scales.x
-      xAxis.ticks.forEach((value: any, index: number) => {
+    afterDraw: (chart: unknown) => {
+      const ctx: CanvasRenderingContext2D = (chart as { ctx: CanvasRenderingContext2D }).ctx
+      const xAxis = (
+        chart as {
+          scales: {
+            x: {
+              ticks: Array<unknown>
+              getPixelForTick: (_index: number) => number
+              bottom: number
+            }
+          }
+        }
+      ).scales.x
+      xAxis.ticks.forEach((value: unknown, index: number) => {
         const x = xAxis.getPixelForTick(index)
         const image = new Image()
         image.src = images[index]
diff --git a/frontend/components/tierlist/Tier.vue b/frontend/components/tierlist/Tier.vue
index 94a6e10..2fa8075 100644
--- a/frontend/components/tierlist/Tier.vue
+++ b/frontend/components/tierlist/Tier.vue
@@ -11,6 +11,7 @@ defineProps<{
     <div class="tierlist-tier-container">
       <NuxtLink
         v-for="{ champion: champion } in tier"
+        :key="champion.alias"
         :to="'/champion/' + champion.alias.toLowerCase()"
       >
         <div class="champion-img-container">
diff --git a/frontend/error.vue b/frontend/error.vue
index ab36dd6..29e8f56 100644
--- a/frontend/error.vue
+++ b/frontend/error.vue
@@ -1,6 +1,9 @@
 <script setup>
 const props = defineProps({
-  error: Object
+  error: {
+    type: Object,
+    default: () => ({})
+  }
 })
 </script>
 
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 934c3a1..f35df02 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,6 +1,49 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt(
-  // Your custom configs here
-)
+import js from '@eslint/js'
+import prettier from 'eslint-config-prettier'
+import globals from 'globals'
+import typescriptEslint from 'typescript-eslint'
+import vue from 'eslint-plugin-vue'
+
+export default withNuxt([
+  js.configs.recommended,
+  ...typescriptEslint.configs.recommended,
+  ...vue.configs['flat/recommended'],
+  prettier,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        // Add global types from our API definitions
+        ChampionSummary: 'readonly',
+        LaneData: 'readonly',
+        ChampionData: 'readonly',
+        ItemTree: 'readonly',
+        Builds: 'readonly',
+        PerkStyle: 'readonly',
+        PerksResponse: 'readonly',
+        PerkStylesResponse: 'readonly',
+        Champion: 'readonly',
+        ChampionsResponse: 'readonly',
+        ChampionResponse: 'readonly',
+        ItemResponse: 'readonly'
+      }
+    },
+    rules: {
+      semi: 'off',
+      'prefer-const': 'error',
+      'no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_'
+        }
+      ],
+      'vue/multi-word-component-names': 'off'
+    }
+  }
+])
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 1c21d80..2f68045 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -53,4 +53,4 @@ export default defineNuxtConfig({
       weights: [200, 400]
     }
   }
-})
\ No newline at end of file
+})
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e26dbe1..655dee1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,16 +22,14 @@
         "vue-router": "latest"
       },
       "devDependencies": {
-        "@eslint/js": "^9.39.2",
         "@typescript-eslint/eslint-plugin": "^8.53.1",
         "@typescript-eslint/parser": "^8.53.1",
         "@vue/compiler-sfc": "^3.5.13",
-        "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-nuxt": "^4.0.0",
         "eslint-plugin-vue": "^10.7.0",
         "prettier": "^3.8.0",
-        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.53.1",
         "vue-tsc": "^2.1.10"
       }
     },
@@ -1082,6 +1080,7 @@
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
       "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "peer": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
@@ -1095,6 +1094,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1104,6 +1104,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1115,6 +1116,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
       "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.17.0"
       },
@@ -1618,6 +1620,7 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
       "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "peer": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -1640,6 +1643,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1649,6 +1653,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -1657,6 +1662,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1668,6 +1674,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -1690,6 +1697,7 @@
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
       "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1724,6 +1732,7 @@
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -1732,6 +1741,7 @@
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.4.0"
@@ -1744,6 +1754,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -1756,6 +1767,7 @@
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -6171,6 +6183,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -6762,6 +6775,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7160,7 +7174,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "peer": true
     },
     "node_modules/confbox": {
       "version": "0.2.2",
@@ -7576,7 +7591,8 @@
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "peer": true
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
@@ -7921,6 +7937,7 @@
       "version": "9.39.2",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8464,6 +8481,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -8478,6 +8496,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -8487,6 +8506,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -8502,6 +8522,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8513,6 +8534,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -8524,6 +8546,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -8535,6 +8558,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -8543,6 +8567,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -8554,6 +8579,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -8627,6 +8653,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8743,12 +8770,14 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "peer": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "peer": true
     },
     "node_modules/fast-npm-meta": {
       "version": "0.4.7",
@@ -8806,6 +8835,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -8833,6 +8863,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -8859,6 +8890,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -8870,7 +8902,8 @@
     "node_modules/flatted": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "peer": true
     },
     "node_modules/fontaine": {
       "version": "0.6.0",
@@ -9103,6 +9136,7 @@
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -9179,6 +9213,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -9345,6 +9380,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "peer": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -9360,6 +9396,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -9380,6 +9417,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -9761,7 +9799,8 @@
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "peer": true
     },
     "node_modules/json-schema-to-typescript-lite": {
       "version": "15.0.0",
@@ -9775,12 +9814,14 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "peer": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "peer": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -9797,6 +9838,7 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -9980,6 +10022,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -10013,7 +10056,8 @@
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "peer": true
     },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
@@ -11413,6 +11457,7 @@
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -11527,6 +11572,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -11541,6 +11587,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -11570,6 +11617,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "peer": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -11647,6 +11695,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -13814,6 +13863,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13822,6 +13872,29 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.53.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
+      "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.53.1",
+        "@typescript-eslint/parser": "8.53.1",
+        "@typescript-eslint/typescript-estree": "8.53.1",
+        "@typescript-eslint/utils": "8.53.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
@@ -14346,6 +14419,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "peer": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -15367,6 +15441,7 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15618,6 +15693,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/frontend/package.json b/frontend/package.json
index 61915cf..6bc4bfc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,16 +29,14 @@
     "vue-router": "latest"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
     "@typescript-eslint/eslint-plugin": "^8.53.1",
     "@typescript-eslint/parser": "^8.53.1",
     "@vue/compiler-sfc": "^3.5.13",
-    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-vue": "^10.7.0",
     "prettier": "^3.8.0",
-    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.53.1",
     "vue-tsc": "^2.1.10"
   }
 }
diff --git a/frontend/pages/about.vue b/frontend/pages/about.vue
index a2905e2..2447d94 100644
--- a/frontend/pages/about.vue
+++ b/frontend/pages/about.vue
@@ -1,36 +1,38 @@
 <script setup lang="ts"></script>
 
 <template>
-  <Head>
-    <Title>About</Title>
-  </Head>
+  <div class="about-root">
+    <Head>
+      <Title>About</Title>
+    </Head>
 
-  <div class="about-main-content">
-    <NavBar :tierlist-list="true" />
+    <div class="about-main-content">
+      <NavBar :tierlist-list="true" />
 
-    <div style="width: fit-content; margin: auto">
-      <Logo />
+      <div style="width: fit-content; margin: auto">
+        <Logo />
 
-      <div style="margin-top: 20px">
-        <h1>About</h1>
-        <h3 style="margin-top: 20px">
-          BuildPath: a tool for League of Legends champions runes and build paths.
-        </h3>
-        <h3 style="margin-top: 10px">Copyright (C) Valentin Haudiquet (@vhaudiquet)</h3>
-        <h3 style="margin-top: 20px">Acknowledgments:</h3>
-        <h3>- Sarah Emery, for the feedback on the designs and code</h3>
-        <h3>- Martin Andrieux, for the nice algorithms :)</h3>
-        <h3>- Paul Chaurand, for the feedback on the league data organization</h3>
-        <h3>- Nathan Mérillon, for the tierlists ideas</h3>
-        <h3>- Jean-Baptiste Döderlein, for the feedback on the mobile design</h3>
-        <h3 style="margin-top: 20px">Libraries used:</h3>
-        <h3>Vue.JS, Nuxt.JS, Chart.JS, svg-dom-arrows</h3>
-        <h2 style="font-size: 1rem; font-weight: 200; margin-top: 25px; max-width: 800px">
-          BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
-          Games or anyone officially involved in producing or managing Riot Games properties. Riot
-          Games, and all associated properties are trademarks or registered trademarks of Riot
-          Games, Inc.
-        </h2>
+        <div style="margin-top: 20px">
+          <h1>About</h1>
+          <h3 style="margin-top: 20px">
+            BuildPath: a tool for League of Legends champions runes and build paths.
+          </h3>
+          <h3 style="margin-top: 10px">Copyright (C) Valentin Haudiquet (@vhaudiquet)</h3>
+          <h3 style="margin-top: 20px">Acknowledgments:</h3>
+          <h3>- Sarah Emery, for the feedback on the designs and code</h3>
+          <h3>- Martin Andrieux, for the nice algorithms :)</h3>
+          <h3>- Paul Chaurand, for the feedback on the league data organization</h3>
+          <h3>- Nathan Mérillon, for the tierlists ideas</h3>
+          <h3>- Jean-Baptiste Döderlein, for the feedback on the mobile design</h3>
+          <h3 style="margin-top: 20px">Libraries used:</h3>
+          <h3>Vue.JS, Nuxt.JS, Chart.JS, svg-dom-arrows</h3>
+          <h2 style="font-size: 1rem; font-weight: 200; margin-top: 25px; max-width: 800px">
+            BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
+            Games or anyone officially involved in producing or managing Riot Games properties. Riot
+            Games, and all associated properties are trademarks or registered trademarks of Riot
+            Games, Inc.
+          </h2>
+        </div>
       </div>
     </div>
   </div>
diff --git a/frontend/pages/champion/[alias].vue b/frontend/pages/champion/[alias].vue
index 0ff38f7..2702b81 100644
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -35,47 +35,49 @@ function updateState(newState: string, newLane: number) {
 </script>
 
 <template>
-  <Head>
-    <Title>{{ championData.name }}</Title>
-  </Head>
+  <div class="champion-root">
+    <Head>
+      <Title>{{ championData.name }}</Title>
+    </Head>
 
-  <div id="alias-content-wrapper">
-    <NavBar
-      :champion-name="championData.name"
-      :champion-lanes="championData.lanes"
-      @state-change="updateState"
-    />
+    <div id="alias-content-wrapper">
+      <NavBar
+        :champion-name="championData.name"
+        :champion-lanes="championData.lanes"
+        @state-change="updateState"
+      />
 
-    <div id="champion-content">
-      <ChampionTitle
-        v-if="championData.gameCount > 0"
-        id="champion-title"
-        :champion-id="championId"
-        :winrate="lane.winrate"
-        :pickrate="lane.pickrate"
-        :game-count="lane.count"
-      />
-      <RuneSelector
-        v-if="state == 'runes' && championData.gameCount > 0"
-        style="margin: auto; margin-top: 40px"
-        :runes="lane.runes!!"
-      />
-      <ItemViewer
-        v-if="state == 'items' && championData.gameCount > 0"
-        style="margin: auto; margin-top: 40px"
-        :builds="lane.builds!!"
-      />
-      <ItemTree
-        v-if="state == 'alternatives' && championData.gameCount > 0"
-        style="margin: auto; margin-top: 40px; width: fit-content"
-        :tree="lane.builds!!.tree"
-      />
-      <h2
-        v-if="championData.gameCount == 0"
-        style="margin: auto; margin-top: 20px; width: fit-content"
-      >
-        Sorry, there is no data for this champion :(
-      </h2>
+      <div id="champion-content">
+        <ChampionTitle
+          v-if="championData.gameCount > 0"
+          id="champion-title"
+          :champion-id="championId"
+          :winrate="lane.winrate"
+          :pickrate="lane.pickrate"
+          :game-count="lane.count"
+        />
+        <RuneSelector
+          v-if="state == 'runes' && championData.gameCount > 0"
+          style="margin: auto; margin-top: 40px"
+          :runes="lane.runes!!"
+        />
+        <ItemViewer
+          v-if="state == 'items' && championData.gameCount > 0"
+          style="margin: auto; margin-top: 40px"
+          :builds="lane.builds!!"
+        />
+        <ItemTree
+          v-if="state == 'alternatives' && championData.gameCount > 0"
+          style="margin: auto; margin-top: 40px; width: fit-content"
+          :tree="lane.builds!!.tree"
+        />
+        <h2
+          v-if="championData.gameCount == 0"
+          style="margin: auto; margin-top: 20px; width: fit-content"
+        >
+          Sorry, there is no data for this champion :(
+        </h2>
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4f11edf..f60efe5 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon'
+// Removed unused imports
 </script>
 
 <template>
-  <Head>
-    <Title>Home</Title>
-  </Head>
+  <div class="index-root">
+    <Head>
+      <Title>Home</Title>
+    </Head>
 
-  <div class="index-main-content">
-    <NavBar :tierlist-list="true" />
+    <div class="index-main-content">
+      <NavBar :tierlist-list="true" />
 
-    <ChampionSelector class="index-champion-selector" />
+      <ChampionSelector class="index-champion-selector" />
+    </div>
   </div>
 </template>
 
diff --git a/frontend/pages/tierlist/[lane].vue b/frontend/pages/tierlist/[lane].vue
index cc4d56c..95f1d3f 100644
--- a/frontend/pages/tierlist/[lane].vue
+++ b/frontend/pages/tierlist/[lane].vue
@@ -70,39 +70,46 @@ tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
 </script>
 
 <template>
-  <Head>
-    <Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
-  </Head>
+  <div class="tierlist-root">
+    <Head>
+      <Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</Title>
+    </Head>
 
-  <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%">
-    <NavBar :tierlist-list="true" />
+    <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%">
+      <NavBar :tierlist-list="true" />
 
-    <div id="tierlist-container" style="margin-left: 10px; width: 100%; overflow-y: scroll">
-      <div
-        style="
-          margin-left: 0px;
-          margin-top: 20px;
-          display: flex;
-          margin-bottom: 30px;
-          align-items: center;
-        "
-      >
-        <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">Tierlist for</h1>
-        <NuxtImg
-          format="webp"
-          style="margin-left: 10px"
-          width="50"
-          height="50"
-          :src="LANE_IMAGES[lanePositionToIndex(lane)]"
+      <div id="tierlist-container" style="margin-left: 10px; width: 100%; overflow-y: scroll">
+        <div
+          style="
+            margin-left: 0px;
+            margin-top: 20px;
+            display: flex;
+            margin-bottom: 30px;
+            align-items: center;
+          "
+        >
+          <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">Tierlist for</h1>
+          <NuxtImg
+            format="webp"
+            style="margin-left: 10px"
+            width="50"
+            height="50"
+            :src="LANE_IMAGES[lanePositionToIndex(lane)]"
+          />
+          <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">
+            {{ POSITIONS_STR[lanePositionToIndex(lane)] }}
+          </h1>
+        </div>
+
+        <TierlistTier
+          v-for="tier in tiers"
+          :key="tier.title"
+          :title="tier.title"
+          :tier="tier.data"
         />
-        <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300">
-          {{ POSITIONS_STR[lanePositionToIndex(lane)] }}
-        </h1>
+
+        <TierlistChart id="chart" :data="tiers" />
       </div>
-
-      <TierlistTier v-for="tier in tiers" :title="tier.title" :tier="tier.data" />
-
-      <TierlistChart id="chart" :data="tiers" />
     </div>
   </div>
 </template>
diff --git a/frontend/utils/helpers.ts b/frontend/utils/helpers.ts
index 625c338..89bc07f 100644
--- a/frontend/utils/helpers.ts
+++ b/frontend/utils/helpers.ts
@@ -8,17 +8,17 @@
  * @param wait Time in milliseconds to wait before calling the function
  * @returns Debounced function
  */
-export function debounce<T extends (...args: any[]) => any>(
+export function debounce<T extends (..._args: unknown[]) => unknown>(
   func: T,
   wait: number
-): (...args: Parameters<T>) => void {
+): (..._args: Parameters<T>) => void {
   let timeout: ReturnType<typeof setTimeout> | null = null
 
-  return function (...args: Parameters<T>): void {
+  return function (..._args: Parameters<T>): void {
     if (timeout) {
       clearTimeout(timeout)
     }
-    timeout = setTimeout(() => func(...args), wait)
+    timeout = setTimeout(() => func(..._args), wait)
   }
 }
 
@@ -128,7 +128,7 @@ export function deepClone<T>(obj: T): T {
  * @param value Value to check
  * @returns True if value is empty
  */
-export function isEmpty(value: any): boolean {
+export function isEmpty(value: unknown): boolean {
   if (value === null || value === undefined) return true
   if (typeof value === 'string' && value.trim() === '') return true
   if (Array.isArray(value) && value.length === 0) return true