From 45815f77c9b064148d89b0f6b1c3f66f6dda40bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Wed, 4 Sep 2024 20:14:58 +0200
Subject: [PATCH] refactor: remove withDefaults, use destructure everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use reactive props destructure (https://blog.vuejs.org/posts/vue-3-5#reactive-props-destructure)
to simplify the prop declaration.

Also, finding unused props is far easier with destructure (a lot of unused props were removed in fact), so all the defineProps statements have been migrated as well.

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 .../src/components/Buttons/FilterButton.vue   | 14 +--
 .../src/components/Buttons/LikeButton.vue     | 11 +--
 .../components/Buttons/MarkPlayedButton.vue   |  6 +-
 .../Buttons/Playback/NextTrackButton.vue      |  6 +-
 .../Buttons/Playback/PlayButton.vue           | 80 ++++++++-------
 .../Buttons/Playback/PlayPauseButton.vue      |  6 +-
 .../Buttons/Playback/PreviousTrackButton.vue  |  6 +-
 .../Buttons/Playback/RepeatButton.vue         |  6 +-
 .../Buttons/Playback/ShuffleButton.vue        |  6 +-
 .../src/components/Buttons/QueueButton.vue    | 15 ++-
 .../src/components/Buttons/SortButton.vue     | 12 +--
 .../src/components/Buttons/TypeButton.vue     |  4 +-
 .../src/components/Dialogs/GenericDialog.vue  | 14 +--
 frontend/src/components/Forms/LoginForm.vue   |  6 +-
 .../components/Item/Card/GenericItemCard.vue  |  8 +-
 .../src/components/Item/Card/ItemCard.vue     | 61 ++++++------
 .../src/components/Item/Card/ServerCard.vue   | 10 +-
 .../src/components/Item/CollectionTabs.vue    |  8 +-
 .../Item/Identify/IdentifyDialog.vue          | 32 +++---
 .../Item/Identify/IdentifyResults.vue         |  4 +-
 frontend/src/components/Item/ItemGrid.vue     | 15 +--
 frontend/src/components/Item/ItemMenu.vue     | 95 ++++++++----------
 .../Item/MediaDetail/MediaDetailAttr.vue      |  8 +-
 .../Item/MediaDetail/MediaDetailContent.vue   | 80 +++++++--------
 .../Item/MediaDetail/MediaDetailDialog.vue    | 12 +--
 frontend/src/components/Item/MediaInfo.vue    | 21 ++--
 .../components/Item/MediaSourceSelector.vue   | 12 +--
 .../components/Item/MediaStreamSelector.vue   | 31 +++---
 .../components/Item/Metadata/DateInput.vue    |  6 +-
 .../components/Item/Metadata/ImageEditor.vue  | 14 +--
 .../components/Item/Metadata/ImageSearch.vue  | 16 +--
 .../Item/Metadata/MetadataEditor.vue          |  9 +-
 .../Item/Metadata/MetadataEditorDialog.vue    |  2 +-
 .../components/Item/Metadata/PersonEditor.vue |  6 +-
 .../Item/Metadata/RefreshMetadataDialog.vue   | 10 +-
 frontend/src/components/Item/PeopleList.vue   | 13 +--
 frontend/src/components/Item/RelatedItems.vue | 13 +--
 frontend/src/components/Item/SeasonTabs.vue   | 12 +--
 .../Layout/AppBar/AppBarButtonLayout.vue      | 16 +--
 .../AppBar/Buttons/TaskManagerButton.vue      |  2 -
 .../components/Layout/Artist/ArtistTab.vue    |  5 +-
 .../components/Layout/Carousel/Carousel.vue   | 27 ++----
 .../Layout/Carousel/CarouselProgressBar.vue   | 36 ++++---
 .../Layout/Carousel/Item/ItemsCarousel.vue    | 13 +--
 .../Carousel/Item/ItemsCarouselTitle.vue      | 34 +++----
 .../Layout/Images/Blurhash/BlurhashCanvas.vue | 27 +++---
 .../Layout/Images/Blurhash/BlurhashImage.vue  | 31 +++---
 .../Images/Blurhash/BlurhashImageIcon.vue     |  2 +-
 .../components/Layout/Images/UserImage.vue    | 18 ++--
 .../Layout/Navigation/NavigationDrawer.vue    |  2 +-
 .../src/components/Layout/SwiperSection.vue   | 16 +--
 .../src/components/Playback/TrackList.vue     | 16 ++-
 .../src/components/Skeletons/SkeletonCard.vue | 17 +---
 .../components/Skeletons/SkeletonItemGrid.vue | 10 +-
 frontend/src/components/System/AddApiKey.vue  |  2 +-
 .../src/components/System/LocaleSwitcher.vue  |  3 +-
 frontend/src/components/Users/UserCard.vue    |  2 +-
 frontend/src/components/lib/JImg.vue          | 12 +--
 frontend/src/components/lib/JSafeHtml.vue     |  6 +-
 frontend/src/components/lib/JTransition.vue   |  6 +-
 frontend/src/components/lib/JView.vue         |  2 +-
 .../src/components/lib/JVirtual/JVirtual.vue  | 97 +++++++++----------
 62 files changed, 482 insertions(+), 610 deletions(-)

diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
index 7e7f5a741fa..4ec1fbbad6b 100644
--- a/frontend/src/components/Buttons/FilterButton.vue
+++ b/frontend/src/components/Buttons/FilterButton.vue
@@ -193,7 +193,7 @@ export interface Filters {
   years: number[];
 }
 
-const props = defineProps<{
+const { item, disabled } = defineProps<{
   item: BaseItemDto;
   disabled?: boolean;
 }>();
@@ -216,8 +216,8 @@ const yearFilters = ref<number[]>([]);
 
 const isMovieOrTvShow = computed(
   () =>
-    props.item.CollectionType === 'movies'
-    || props.item.CollectionType === 'tvshows'
+    item.CollectionType === 'movies'
+    || item.CollectionType === 'tvshows'
 );
 
 const statusFilters = computed<{ label: string; name: ItemFilter }[]>(() => [
@@ -279,7 +279,7 @@ const typeFilters: { label: string; name: TypeFilters }[] = [
  * applying filters and sorting
  */
 async function refreshItems(): Promise<void> {
-  if (!props.item.Id || !props.item.Type) {
+  if (!item.Id || !item.Type) {
     return;
   }
 
@@ -287,8 +287,8 @@ async function refreshItems(): Promise<void> {
     const response = (
       await remote.sdk.newUserApi(getFilterApi).getQueryFiltersLegacy({
         userId: remote.auth.currentUserId,
-        parentId: props.item.Id,
-        includeItemTypes: [props.item.Type]
+        parentId: item.Id,
+        includeItemTypes: [item.Type]
       })
     ).data;
 
@@ -320,7 +320,7 @@ function emitFilterChange(): void {
     years: selectedYearFilters.value
   });
 }
-watch(() => props.item, refreshItems);
+watch(() => item, refreshItems);
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
index deed4ba53c8..c80a35f54bd 100644
--- a/frontend/src/components/Buttons/LikeButton.vue
+++ b/frontend/src/components/Buttons/LikeButton.vue
@@ -15,12 +15,7 @@ import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
 import { useApi } from '@/composables/apis';
 
-const props = withDefaults(
-  defineProps<{ item: BaseItemDto; size?: string }>(),
-  {
-    size: 'small'
-  }
-);
+const { size = 'small', item } = defineProps<{ item: BaseItemDto; size?: string }>();
 /**
  * We use the composables to handle when there's no connection to the server
  *
@@ -29,12 +24,12 @@ const props = withDefaults(
  */
 const methodToExecute = ref<'markFavoriteItem' | 'unmarkFavoriteItem' | undefined>();
 const { loading } = await useApi(getUserLibraryApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
-  itemId: props.item.Id ?? ''
+  itemId: item.Id ?? ''
 }));
 
 const isFavorite = computed({
   get() {
-    return props.item.UserData?.IsFavorite ?? false;
+    return item.UserData?.IsFavorite ?? false;
   },
   set(newValue) {
     methodToExecute.value = newValue ? 'markFavoriteItem' : 'unmarkFavoriteItem';
diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
index 7a2a503b4d4..ca3f3443218 100644
--- a/frontend/src/components/Buttons/MarkPlayedButton.vue
+++ b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -16,7 +16,7 @@ import { computed, ref } from 'vue';
 import { canMarkWatched } from '@/utils/items';
 import { useApi } from '@/composables/apis';
 
-const props = defineProps<{
+const { item } = defineProps<{
   item: BaseItemDto;
 }>();
 
@@ -29,12 +29,12 @@ const methodToExecute = ref<'markPlayedItem' | 'markUnplayedItem' | undefined>()
  * to do manual modification here
  */
 const { loading } = await useApi(getPlaystateApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
-  itemId: props.item.Id ?? ''
+  itemId: item.Id ?? ''
 }));
 
 const isPlayed = computed({
   get() {
-    return props.item.UserData?.Played;
+    return item.UserData?.Played;
   },
   set(newValue) {
     methodToExecute.value = newValue ? 'markPlayedItem' : 'markUnplayedItem';
diff --git a/frontend/src/components/Buttons/Playback/NextTrackButton.vue b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
index 4bee2a43296..aa965d77701 100644
--- a/frontend/src/components/Buttons/Playback/NextTrackButton.vue
+++ b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
@@ -1,10 +1,10 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="props.size"
     :disabled="!playbackManager.nextItem"
     @click="playbackManager.setNextItem">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiSkipNext />
     </VIcon>
   </VBtn>
@@ -12,6 +12,4 @@
 
 <script setup lang="ts">
 import { playbackManager } from '@/store/playback-manager';
-
-const props = defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
index 6dccc4f1aa9..a0f6630ef30 100644
--- a/frontend/src/components/Buttons/Playback/PlayButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -46,29 +46,27 @@ import { playbackManager } from '@/store/playback-manager';
 import { canPlay, canResume } from '@/utils/items';
 import { ticksToMs } from '@/utils/time';
 
-const props = withDefaults(
-  defineProps<{
-    item: BaseItemDto;
-    iconOnly?: boolean;
-    fab?: boolean;
-    shuffle?: boolean;
-    videoTrackIndex?: number;
-    audioTrackIndex?: number;
-    subtitleTrackIndex?: number;
-    mediaSourceIndex?: number;
-    disabled?: boolean;
-  }>(),
-  {
-    iconOnly: false,
-    fab: false,
-    shuffle: false,
-    disabled: false,
-    videoTrackIndex: undefined,
-    audioTrackIndex: undefined,
-    subtitleTrackIndex: undefined,
-    mediaSourceIndex: undefined
-  }
-);
+const {
+  item,
+  iconOnly,
+  fab,
+  shuffle,
+  videoTrackIndex,
+  audioTrackIndex,
+  subtitleTrackIndex,
+  mediaSourceIndex,
+  disabled
+} = defineProps<{
+  item: BaseItemDto;
+  iconOnly?: boolean;
+  fab?: boolean;
+  shuffle?: boolean;
+  videoTrackIndex?: number;
+  audioTrackIndex?: number;
+  subtitleTrackIndex?: number;
+  mediaSourceIndex?: number;
+  disabled?: boolean;
+}>();
 
 const loading = ref(false);
 
@@ -76,33 +74,33 @@ const loading = ref(false);
 async function playOrResume(): Promise<void> {
   loading.value = true;
 
-  if (props.item && canResume(props.item)) {
+  if (canResume(item)) {
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex,
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex,
       startFromTime:
-        ticksToMs(props.item.UserData?.PlaybackPositionTicks) / 1000
+        ticksToMs(item.UserData?.PlaybackPositionTicks) / 1000
     });
-  } else if (props.shuffle) {
+  } else if (shuffle) {
     // We force playback from the start when shuffling, since you wouldn't resume AND shuffle at the same time
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex,
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex,
       startShuffled: true
     });
   } else {
     await playbackManager.play({
-      item: props.item,
-      audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex,
-      videoTrackIndex: props.videoTrackIndex,
-      mediaSourceIndex: props.mediaSourceIndex
+      item: item,
+      audioTrackIndex: audioTrackIndex,
+      subtitleTrackIndex: subtitleTrackIndex,
+      videoTrackIndex: videoTrackIndex,
+      mediaSourceIndex: mediaSourceIndex
     });
   }
 
diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
index 3565e5d577b..c8c6abb772b 100644
--- a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -1,11 +1,11 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :loading="playbackManager.isBuffering"
     @click="playbackManager.playPause">
     <VIcon
-      :size="size"
+      v-bind="$attrs"
       :icon="playPauseIcon" />
   </VBtn>
 </template>
@@ -17,8 +17,6 @@ import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
 import { computed } from 'vue';
 import { PlaybackStatus, playbackManager } from '@/store/playback-manager';
 
-defineProps<{ size?: string }>();
-
 const playPauseIcon = computed(() => {
   if (playbackManager.isPaused) {
     return IMdiPlayCircleOutline;
diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
index 8aa5fc2d949..171d2507fb5 100644
--- a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
+++ b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -1,10 +1,10 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     @click="() => playbackManager.setPreviousItem()"
     @dblclick="() => playbackManager.setPreviousItem(true)">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiSkipPrevious />
     </VIcon>
   </VBtn>
@@ -13,6 +13,4 @@
 <script setup lang="ts">
 import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
 import { playbackManager } from '@/store/playback-manager';
-
-defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
index 5a913bae1b2..6d85e73f439 100644
--- a/frontend/src/components/Buttons/Playback/RepeatButton.vue
+++ b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -1,11 +1,11 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :color="playbackManager.isRepeating ? 'primary' : undefined"
     @click="playbackManager.toggleRepeatMode">
     <VIcon
-      :size="size"
+      v-bind="$attrs"
       :icon="repeatIcon" />
   </VBtn>
 </template>
@@ -16,8 +16,6 @@ import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
 import { computed } from 'vue';
 import { RepeatMode, playbackManager } from '@/store/playback-manager';
 
-defineProps<{ size?: string }>();
-
 const repeatIcon = computed(() =>
   playbackManager.repeatMode === RepeatMode.RepeatOne
     ? IMdiRepeatOnce
diff --git a/frontend/src/components/Buttons/Playback/ShuffleButton.vue b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
index 17a820f76c3..d5767bd6f01 100644
--- a/frontend/src/components/Buttons/Playback/ShuffleButton.vue
+++ b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
@@ -1,10 +1,10 @@
 <template>
   <VBtn
+    v-bind="$attrs"
     icon
-    :size="size"
     :color="playbackManager.isShuffling ? 'primary' : undefined"
     @click="playbackManager.toggleShuffle">
-    <VIcon :size="size">
+    <VIcon v-bind="$attrs">
       <IMdiShuffle />
     </VIcon>
   </VBtn>
@@ -12,6 +12,4 @@
 
 <script setup lang="ts">
 import { playbackManager } from '@/store/playback-manager';
-
-defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
index e286646006e..95f0715f044 100644
--- a/frontend/src/components/Buttons/QueueButton.vue
+++ b/frontend/src/components/Buttons/QueueButton.vue
@@ -78,19 +78,16 @@ import { useI18n } from 'vue-i18n';
 import { getTotalEndsAtTime } from '@/utils/time';
 import { InitMode, playbackManager } from '@/store/playback-manager';
 
-const props = withDefaults(
-  defineProps<{
-    size?: number;
-    closeOnClick?: boolean;
-  }>(),
-  { size: 40, closeOnClick: false }
-);
+const { size = 40, closeOnClick = false } = defineProps<{
+  size?: number;
+  closeOnClick?: boolean;
+}>();
 
 const { t } = useI18n();
 
 const menuModel = ref(false);
-const listWidth = computed(() => `${props.size}vw`);
-const listHeight = computed(() => `${props.size}vh`);
+const listWidth = computed(() => `${size}vw`);
+const listHeight = computed(() => `${size}vh`);
 
 const sourceText = computed(() => {
   /**
diff --git a/frontend/src/components/Buttons/SortButton.vue b/frontend/src/components/Buttons/SortButton.vue
index ea86132531f..df6169ae043 100644
--- a/frontend/src/components/Buttons/SortButton.vue
+++ b/frontend/src/components/Buttons/SortButton.vue
@@ -1,10 +1,9 @@
 <template>
   <VBtn
     icon
-    v-bind="props"
     :disabled="disabled"
-    @click="emit('change', model[0], !props.ascending)">
-    <VIcon v-if="props.ascending">
+    @click="emit('change', model[0], !ascending)">
+    <VIcon v-if="ascending">
       <IMdiSortAscending />
     </VIcon>
     <VIcon v-else>
@@ -26,7 +25,7 @@
         v-model:selected="model"
         :items="items"
         class="filter-content"
-        @update:selected="emit('change', model[0], props.ascending)" />
+        @update:selected="emit('change', model[0], ascending)" />
     </VMenu>
   </VBtn>
 </template>
@@ -35,10 +34,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = withDefaults(
-  defineProps<{ ascending: boolean; disabled?: boolean }>(),
-  { disabled: false }
-);
+const { ascending, disabled } = defineProps<{ ascending: boolean; disabled?: boolean }>();
 const emit = defineEmits<{
   change: [sortBy: string, ascendingOrder: boolean];
 }>();
diff --git a/frontend/src/components/Buttons/TypeButton.vue b/frontend/src/components/Buttons/TypeButton.vue
index 09e5847d891..2a131a8f476 100644
--- a/frontend/src/components/Buttons/TypeButton.vue
+++ b/frontend/src/components/Buttons/TypeButton.vue
@@ -26,7 +26,7 @@ import type { BaseItemDto, BaseItemKind } from '@jellyfin/sdk/lib/generated-clie
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = defineProps<{
+const { type } = defineProps<{
   type: BaseItemDto['CollectionType'];
 }>();
 
@@ -36,7 +36,7 @@ const model = defineModel<BaseItemKind | undefined>({ required: true });
 const { t } = useI18n();
 
 const items = computed<{ title: string; value: BaseItemKind }[]>(() => {
-  switch (props.type) {
+  switch (type) {
     case 'movies': {
       return [
         { title: t('movies'), value: 'Movie' },
diff --git a/frontend/src/components/Dialogs/GenericDialog.vue b/frontend/src/components/Dialogs/GenericDialog.vue
index 269d2d37ae3..cf166a98801 100644
--- a/frontend/src/components/Dialogs/GenericDialog.vue
+++ b/frontend/src/components/Dialogs/GenericDialog.vue
@@ -12,7 +12,7 @@
       <slot name="loader" />
       <VToolbar color="transparent">
         <template
-          v-if="slots.toolbarPrepend"
+          v-if="$slots.toolbarPrepend"
           #prepend>
           <slot name="toolbarPrepend" />
         </template>
@@ -38,9 +38,9 @@
 
       <slot />
 
-      <VDivider v-if="slots.actions" />
+      <VDivider v-if="$slots.actions" />
       <VCardActions
-        v-if="slots.actions"
+        v-if="$slots.actions"
         class="d-flex align-center pa-3"
         :class="{
           'justify-end': !$vuetify.display.mobile,
@@ -53,10 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useSlots } from 'vue';
-
-const props = defineProps<{
-  modelValue: boolean;
+const { title, subtitle, loading } = defineProps<{
   title: string;
   subtitle?: string;
   loading?: boolean;
@@ -66,6 +63,5 @@ const emit = defineEmits<{
   close: [];
 }>();
 
-const slots = useSlots();
-const model = ref(props.modelValue);
+const model = defineModel<boolean>();
 </script>
diff --git a/frontend/src/components/Forms/LoginForm.vue b/frontend/src/components/Forms/LoginForm.vue
index 06df8a23072..4147785ebb7 100644
--- a/frontend/src/components/Forms/LoginForm.vue
+++ b/frontend/src/components/Forms/LoginForm.vue
@@ -77,7 +77,7 @@ import { fetchIndexPage } from '@/utils/items';
 import { remote } from '@/plugins/remote';
 import { getJSONConfig } from '@/utils/external-config';
 
-const props = defineProps<{ user?: UserDto }>();
+const { user } = defineProps<{ user?: UserDto }>();
 
 defineEmits<{
   change: [];
@@ -100,11 +100,11 @@ const rules = [
  * Login the user into the client
  */
 async function userLogin(): Promise<void> {
-  if (props.user) {
+  if (user) {
     /**
      * If we have a user from the public user selector, set it as login
      */
-    login.value.username = props.user.Name || '';
+    login.value.username = user.Name ?? '';
   }
 
   loading.value = true;
diff --git a/frontend/src/components/Item/Card/GenericItemCard.vue b/frontend/src/components/Item/Card/GenericItemCard.vue
index b4305799170..a25e4830ad9 100644
--- a/frontend/src/components/Item/Card/GenericItemCard.vue
+++ b/frontend/src/components/Item/Card/GenericItemCard.vue
@@ -43,7 +43,7 @@
     <div
       v-if="$slots.title || ($slots.title && $slots.subtitle)"
       class="card-text">
-      <a class="d-block font-weight-medium pa-0 mt-1 text-truncate">
+      <a class="font-weight-medium pa-0 mt-1 text-truncate d-block">
         <slot name="title" />
       </a>
       <a class="v-card-subtitle">
@@ -60,7 +60,7 @@ import { isNil } from '@/utils/validation';
 import { hasFinePointer } from '@/store';
 import type { CardShapes } from '@/utils/items';
 
-interface Props {
+const { shape, progress, overlay, forceOverlay, to, margin } = defineProps<{
   shape: CardShapes;
   /**
    * Progress to show in the bottom of the image
@@ -83,9 +83,7 @@ interface Props {
    * Whether to apply a margin to the card
    */
   margin?: boolean;
-}
-
-defineProps<Props>();
+}>();
 
 const attrs = useAttrs();
 
diff --git a/frontend/src/components/Item/Card/ItemCard.vue b/frontend/src/components/Item/Card/ItemCard.vue
index b464aa698ff..a1559c1c714 100644
--- a/frontend/src/components/Item/Card/ItemCard.vue
+++ b/frontend/src/components/Item/Card/ItemCard.vue
@@ -49,7 +49,7 @@
       <RouterLink
         class="link"
         :to="cardTitleLink">
-        {{ cardTitle }}
+        {{ cardTitle ?? '' }}
       </RouterLink>
     </template>
     <template
@@ -86,24 +86,23 @@ import {
 } from '@/utils/items';
 import { taskManager } from '@/store/task-manager';
 
-const props = defineProps<{
+const { item, shape, overlay, text, margin } = defineProps<{
   item: BaseItemDto;
   shape?: CardShapes;
   overlay?: boolean;
   text?: boolean;
   margin?: boolean;
-  link?: boolean;
 }>();
 
 const { t } = useI18n();
 const isMenuOpen = shallowRef(false);
 
-const cardType = computed(() => getShapeFromItemType(props.item.Type));
+const cardType = computed(() => getShapeFromItemType(item.Type));
 
 const cardTitle = computed(() =>
-  props.item.Type === BaseItemKind.Episode
-    ? props.item.SeriesName || ''
-    : props.item.Name || ''
+  item.Type === BaseItemKind.Episode
+    ? item.SeriesName
+    : item.Name
 );
 
 /**
@@ -112,37 +111,37 @@ const cardTitle = computed(() =>
  * or the album artist
  */
 const cardSubtitle = computed(() => {
-  switch (props.item.Type) {
+  switch (item.Type) {
     case BaseItemKind.Episode: {
-      return !isNil(props.item.ParentIndexNumber) && !isNil(props.item.IndexNumber) && !isNil(props.item.Name)
+      return !isNil(item.ParentIndexNumber) && !isNil(item.IndexNumber) && !isNil(item.Name)
         ? `${t('seasonEpisodeAbbrev', {
-        seasonNumber: props.item.ParentIndexNumber,
-        episodeNumber: props.item.IndexNumber
-      })} - ${props.item.Name}`
+        seasonNumber: item.ParentIndexNumber,
+        episodeNumber: item.IndexNumber
+      })} - ${item.Name}`
         : undefined;
     }
     case BaseItemKind.MusicAlbum: {
-      return props.item.AlbumArtist;
+      return item.AlbumArtist;
     }
     case BaseItemKind.Series: {
-      if (props.item.Status === 'Continuing' && !isNil(props.item.ProductionYear)) {
-        return `${props.item.ProductionYear} - ${t('present')}`;
-      } else if (props.item.EndDate) {
-        const endYear = new Date(props.item.EndDate).toLocaleString('en-us', {
+      if (item.Status === 'Continuing' && !isNil(item.ProductionYear)) {
+        return `${item.ProductionYear} - ${t('present')}`;
+      } else if (item.EndDate) {
+        const endYear = new Date(item.EndDate).toLocaleString('en-us', {
           year: 'numeric'
         });
 
-        if (String(props.item.ProductionYear) === endYear) {
-          return String(props.item.ProductionYear);
+        if (String(item.ProductionYear) === endYear) {
+          return String(item.ProductionYear);
         }
 
-        return isNil(props.item.ProductionYear) ? undefined : `${props.item.ProductionYear} - ${endYear}`;
+        return isNil(item.ProductionYear) ? undefined : `${item.ProductionYear} - ${endYear}`;
       }
 
       break;
     }
     default: {
-      return props.item.ProductionYear;
+      return item.ProductionYear;
     }
   }
 });
@@ -153,11 +152,11 @@ const cardSubtitle = computed(() => {
  * @returns A router link to the item or a related item
  */
 const cardTitleLink = computed(() => {
-  if (props.item.Type === BaseItemKind.Episode && props.item.SeriesId) {
-    return getItemDetailsLink({ Id: props.item.SeriesId }, 'Series');
+  if (item.Type === BaseItemKind.Episode && item.SeriesId) {
+    return getItemDetailsLink({ Id: item.SeriesId }, 'Series');
   }
 
-  return getItemDetailsLink(props.item);
+  return getItemDetailsLink(item);
 });
 
 /**
@@ -167,17 +166,17 @@ const cardTitleLink = computed(() => {
  */
 const cardSubtitleLink = computed(() => {
   if (
-    props.item.Type === BaseItemKind.MusicAlbum
-    && props.item.AlbumArtists?.length
+    item.Type === BaseItemKind.MusicAlbum
+    && item.AlbumArtists?.length
   ) {
-    return getItemDetailsLink(props.item.AlbumArtists[0], 'MusicArtist');
-  } else if (props.item.Type === BaseItemKind.Episode) {
-    return getItemDetailsLink(props.item);
+    return getItemDetailsLink(item.AlbumArtists[0], 'MusicArtist');
+  } else if (item.Type === BaseItemKind.Episode) {
+    return getItemDetailsLink(item);
   }
 });
 
 const progress = computed(
-  () => props.item.UserData?.PlayedPercentage ?? undefined
+  () => item.UserData?.PlayedPercentage ?? undefined
 );
 
 const getImageType = computed(() =>
@@ -188,6 +187,6 @@ const getImageType = computed(() =>
  * Gets the library update progress
  */
 const refreshProgress = computed(
-  () => taskManager.getTask(props.item.Id || '')?.progress
+  () => taskManager.getTask(item.Id || '')?.progress
 );
 </script>
diff --git a/frontend/src/components/Item/Card/ServerCard.vue b/frontend/src/components/Item/Card/ServerCard.vue
index c964966dde1..63883997e8d 100644
--- a/frontend/src/components/Item/Card/ServerCard.vue
+++ b/frontend/src/components/Item/Card/ServerCard.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { remote } from '@/plugins/remote';
 import type { ServerInfo } from '@/plugins/remote/auth';
 
-const props = defineProps<{ serverInfo: ServerInfo }>();
+const { serverInfo } = defineProps<{ serverInfo: ServerInfo }>();
 
-const loading = ref(false);
+const loading = shallowRef(false);
 const router = useRouter();
 
 /**
@@ -58,7 +58,7 @@ async function setServer(): Promise<void> {
   loading.value = true;
 
   try {
-    await remote.auth.connectServer(props.serverInfo.PublicAddress);
+    await remote.auth.connectServer(serverInfo.PublicAddress);
     await router.push('/server/login');
   } finally {
     loading.value = false;
@@ -68,6 +68,6 @@ async function setServer(): Promise<void> {
  * Deletes the server from the app
  */
 async function removeServer(): Promise<void> {
-  await remote.auth.deleteServer(props.serverInfo.PublicAddress);
+  await remote.auth.deleteServer(serverInfo.PublicAddress);
 }
 </script>
diff --git a/frontend/src/components/Item/CollectionTabs.vue b/frontend/src/components/Item/CollectionTabs.vue
index c43e13a740d..f4fb39b9224 100644
--- a/frontend/src/components/Item/CollectionTabs.vue
+++ b/frontend/src/components/Item/CollectionTabs.vue
@@ -8,7 +8,7 @@
         v-for="(baseItems, type) in children"
         :key="type"
         :value="type">
-        {{ type }} ({{ baseItems.length }})
+        {{ type }} ({{ baseItems?.length ?? '' }})
       </VTab>
     </VTabs>
     <h1
@@ -28,7 +28,7 @@
             v-if="loading"
             :view-type="item.Type" /> -->
           <ItemGrid
-            :items="baseItems" />
+            :items="baseItems ?? []" />
         </VContainer>
       </VWindowItem>
     </VWindow>
@@ -39,10 +39,10 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed, shallowRef } from 'vue';
 
-const props = defineProps<{
+const { items } = defineProps<{
   items: BaseItemDto[];
 }>();
 
 const currentTab = shallowRef(0);
-const children = computed(() => Object.groupBy(props.items, ({ Type }) => Type!));
+const children = computed(() => Object.groupBy(items, ({ Type }) => Type!));
 </script>
diff --git a/frontend/src/components/Item/Identify/IdentifyDialog.vue b/frontend/src/components/Item/Identify/IdentifyDialog.vue
index 716e485aa0c..221d7c7b50a 100644
--- a/frontend/src/components/Item/Identify/IdentifyDialog.vue
+++ b/frontend/src/components/Item/Identify/IdentifyDialog.vue
@@ -108,7 +108,7 @@ interface IdentifyField {
   value?: string | null;
 }
 
-const props = defineProps<{ item: BaseItemDto }>();
+const { item } = defineProps<{ item: BaseItemDto }>();
 
 const emit = defineEmits<{
   close: [];
@@ -126,7 +126,7 @@ const { t } = useI18n();
 
 const availableProviders = (
   await remote.sdk.newUserApi(getItemLookupApi).getExternalIdInfos({
-    itemId: props.item.Id ?? ''
+    itemId: item.Id ?? ''
   })
 ).data;
 
@@ -141,27 +141,27 @@ const searchFields = computed<IdentifyField[]>(() => {
       key: 'search-name',
       title: t('name'),
       type: 'string',
-      value: props.item.Name ?? ''
+      value: item.Name ?? ''
     }
   ];
 
-  if (!['BoxSet', 'Person'].includes(props.item.Type || '')) {
+  if (!['BoxSet', 'Person'].includes(item.Type || '')) {
     result.push({
       key: 'search-year',
       title: t('year'),
       type: 'number',
-      value: props.item.ProductionYear ? String(props.item.ProductionYear) : ''
+      value: item.ProductionYear ? String(item.ProductionYear) : ''
     });
   }
 
   /**
    * Providers that the item already has
    */
-  if (props.item.ProviderIds) {
-    for (const key in props.item.ProviderIds) {
+  if (item.ProviderIds) {
+    for (const key in item.ProviderIds) {
       result.push({
         key,
-        value: props.item.ProviderIds[key],
+        value: item.ProviderIds[key],
         title: `${key} ID`,
         type: 'string'
       });
@@ -171,7 +171,7 @@ const searchFields = computed<IdentifyField[]>(() => {
   /**
    * Providers available for the item type, but not assigned to it
    */
-  const populatedKeys = Object.keys(props.item.ProviderIds ?? {});
+  const populatedKeys = Object.keys(item.ProviderIds ?? {});
   const missingProviders = availableProviders
     .filter(p => !populatedKeys.includes(p.Key ?? ''))
     .map(p => p.Key)
@@ -207,13 +207,7 @@ const progress = computed(() => {
     }
   }
 });
-const itemPath = computed<string | undefined>(() => {
-  if (!props.item) {
-    return;
-  }
-
-  return props.item.Path ?? undefined;
-});
+const itemPath = computed<string | undefined>(() => item.Path ?? undefined);
 
 /**
  * Get the remote search results for an item and search params.
@@ -369,7 +363,7 @@ async function performSearch(): Promise<void> {
   isLoading.value = true;
 
   try {
-    const results = await getItemRemoteSearch(props.item, fieldsInputs.value);
+    const results = await getItemRemoteSearch(item, fieldsInputs.value);
 
     searchResults.value = isArray(results) ? results : [];
   } catch (error) {
@@ -391,7 +385,7 @@ async function applySelectedSearch(result: RemoteSearchResult): Promise<void> {
 
       try {
         await remote.sdk.newUserApi(getItemLookupApi).applySearchCriteria({
-          itemId: props.item.Id ?? '',
+          itemId: item.Id ?? '',
           remoteSearchResult: result,
           replaceAllImages: replaceImage.value
         });
@@ -407,7 +401,7 @@ async function applySelectedSearch(result: RemoteSearchResult): Promise<void> {
     {
       title: '',
       text: t('identifyConfirmChanges', {
-        originalItem: props.item.Name,
+        originalItem: item.Name,
         newIdentifiedItem: result.Name
       }),
       confirmText: t('confirm')
diff --git a/frontend/src/components/Item/Identify/IdentifyResults.vue b/frontend/src/components/Item/Identify/IdentifyResults.vue
index cfa1f915396..809e25a5dae 100644
--- a/frontend/src/components/Item/Identify/IdentifyResults.vue
+++ b/frontend/src/components/Item/Identify/IdentifyResults.vue
@@ -37,7 +37,7 @@ import type {
 import { computed } from 'vue';
 import { getShapeFromItemType } from '@/utils/items';
 
-const props = defineProps<{
+const { items, itemType } = defineProps<{
   items: RemoteSearchResult[];
   itemType?: BaseItemKind;
 }>();
@@ -46,7 +46,7 @@ defineEmits<{
   select: [item: RemoteSearchResult];
 }>();
 
-const shape = computed(() => getShapeFromItemType(props.itemType));
+const shape = computed(() => getShapeFromItemType(itemType));
 
 /**
  * Generate card's subtitles
diff --git a/frontend/src/components/Item/ItemGrid.vue b/frontend/src/components/Item/ItemGrid.vue
index f14a554f788..29cc0d71347 100644
--- a/frontend/src/components/Item/ItemGrid.vue
+++ b/frontend/src/components/Item/ItemGrid.vue
@@ -59,16 +59,11 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
-withDefaults(
-  defineProps<{
-    items: BaseItemDto[];
-    large?: boolean;
-    noVirtual?: boolean;
-  }>(),
-  {
-    noVirtual: false
-  }
-);
+const { items, large, noVirtual } = defineProps<{
+  items: BaseItemDto[];
+  large?: boolean;
+  noVirtual?: boolean;
+}>();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index 245ea33835e..d803b42d20e 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -40,15 +40,15 @@
     @close="metadataDialog = false" />
   <RefreshMetadataDialog
     v-if="refreshDialog && item.Id"
-    :item="menuProps.item"
+    :item="item"
     @close="refreshDialog = false" />
   <IdentifyDialog
     v-if="identifyItemDialog && item.Id"
-    :item="menuProps.item"
+    :item="item"
     @close="identifyItemDialog = false" />
   <MediaDetailDialog
     v-if="mediaInfoDialog && item.Id"
-    :item="menuProps.item"
+    :item="item"
     :media-source-index="mediaSourceIndex"
     @close="mediaInfoDialog = false" />
 </template>
@@ -106,23 +106,13 @@ const openMenu = shallowRef<string>();
 </script>
 
 <script setup lang="ts">
-const menuProps = withDefaults(
-  defineProps<{
-    item: BaseItemDto;
-    outlined?: boolean;
-    zIndex?: number;
-    rightClick?: boolean;
-    queue?: boolean;
-    mediaSourceIndex?: number;
-  }>(),
-  {
-    outlined: false,
-    zIndex: 1000,
-    rightClick: true,
-    queue: false,
-    mediaSourceIndex: undefined
-  }
-);
+const { item, outlined, zIndex = 1000, queue, mediaSourceIndex } = defineProps<{
+  item: BaseItemDto;
+  outlined?: boolean;
+  zIndex?: number;
+  queue?: boolean;
+  mediaSourceIndex?: number;
+}>();
 
 const emit = defineEmits<{
   active: [];
@@ -150,7 +140,7 @@ const show = computed({
 
 const itemId = computed(
   () => getItemIdFromSourceIndex(
-    menuProps.item, menuProps.mediaSourceIndex
+    item, mediaSourceIndex
   )
 );
 const positionX = shallowRef<number | undefined>();
@@ -168,12 +158,11 @@ watch(isActive, (newVal) => {
 
 const errorMessage = t('anErrorHappened');
 const isItemRefreshing = computed(
-  () => taskManager.getTask(menuProps.item.Id ?? '') !== undefined
+  () => taskManager.getTask(item.Id ?? '') !== undefined
 );
 const itemDeletionName = computed(() => {
-  const parentName = menuProps.item.Name ?? undefined;
-  const mediaSource
-    = menuProps.item.MediaSources?.[menuProps.mediaSourceIndex ?? -1];
+  const parentName = item.Name ?? undefined;
+  const mediaSource = item.MediaSources?.[mediaSourceIndex ?? -1];
 
   if (mediaSource?.Name) {
     let name = mediaSource.Name;
@@ -198,7 +187,7 @@ const playNextAction = {
   title: t('playNext'),
   icon: IMdiPlaySpeed,
   action: async (): Promise<void> => {
-    await playbackManager.playNext(menuProps.item);
+    await playbackManager.playNext(item);
     useSnackbar(t('itemPlayNext'), 'success');
   }
 };
@@ -206,14 +195,14 @@ const pushToTopOfQueueAction = {
   title: t('pushToTop'),
   icon: IMdiArrowExpandUp,
   action: (): void => {
-    playbackManager.changeItemPosition(menuProps.item.Id, 0);
+    playbackManager.changeItemPosition(item.Id, 0);
   }
 };
 const removeFromQueueAction = {
   title: t('removeFromQueue'),
   icon: IMdiPlaylistMinus,
   action: (): void => {
-    playbackManager.removeFromQueue(menuProps.item.Id || '');
+    playbackManager.removeFromQueue(item.Id || '');
   }
 };
 const pushToBottomOfQueueAction = {
@@ -221,7 +210,7 @@ const pushToBottomOfQueueAction = {
   icon: IMdiArrowExpandDown,
   action: (): void => {
     playbackManager.changeItemPosition(
-      menuProps.item.Id,
+      item.Id,
       playbackManager.queue.length - 1
     );
   }
@@ -231,7 +220,7 @@ const playFromBeginningAction = {
   icon: IMdiReplay,
   action: async (): Promise<void> => {
     await playbackManager.play({
-      item: menuProps.item
+      item: item
     });
   }
 };
@@ -240,8 +229,8 @@ const shuffleAction = {
   icon: IMdiShuffle,
   action: async (): Promise<void> => {
     await playbackManager.play({
-      item: menuProps.item,
-      initiator: menuProps.item,
+      item: item,
+      initiator: item,
       startShuffled: true
     });
   }
@@ -250,7 +239,7 @@ const addToQueueAction = {
   title: t('addToQueue'),
   icon: IMdiPlaylistPlus,
   action: async (): Promise<void> => {
-    await playbackManager.addToQueue(menuProps.item);
+    await playbackManager.addToQueue(item);
     useSnackbar(t('addedToQueue'), 'success');
   }
 };
@@ -258,9 +247,9 @@ const instantMixAction = {
   title: t('instantMix'),
   icon: IMdiDisc,
   action: async (): Promise<void> => {
-    if (menuProps.item.Id) {
+    if (item.Id) {
       try {
-        await playbackManager.instantMixFromItem(menuProps.item.Id);
+        await playbackManager.instantMixFromItem(item.Id);
         useSnackbar(t('instantMixQueued'), 'success');
       } catch {
         useSnackbar(errorMessage, 'error');
@@ -306,7 +295,7 @@ const deleteItemAction = {
         try {
           await apiStore.itemDelete(itemId.value);
 
-          if (itemId.value === menuProps.item.Id && route.fullPath.includes(itemId.value)) {
+          if (itemId.value === item.Id && route.fullPath.includes(itemId.value)) {
             await router.replace('/');
           }
         } catch (error) {
@@ -344,14 +333,14 @@ const copyDownloadURLAction = {
       return;
     }
 
-    if (menuProps.item.Id) {
-      switch (menuProps.item.Type) {
+    if (item.Id) {
+      switch (item.Type) {
         case 'Season': {
-          streamUrls = await getItemSeasonDownloadMap(menuProps.item.Id);
+          streamUrls = await getItemSeasonDownloadMap(item.Id);
           break;
         }
         case 'Series': {
-          streamUrls = await getItemSeriesDownloadMap(menuProps.item.Id);
+          streamUrls = await getItemSeriesDownloadMap(item.Id);
           break;
         }
         default: {
@@ -400,18 +389,18 @@ function getQueueOptions(): MenuOption[] {
   const queueOptions: MenuOption[] = [];
 
   if (
-    menuProps.queue
-    && playbackManager.queueIds.includes(menuProps.item.Id || '')
+    queue
+    && playbackManager.queueIds.includes(item.Id || '')
   ) {
     queueOptions.push(pushToTopOfQueueAction);
 
-    if (playbackManager.currentItem?.Id !== menuProps.item.Id) {
+    if (playbackManager.currentItem?.Id !== item.Id) {
       queueOptions.push(removeFromQueueAction);
     }
 
     if (
-      playbackManager.nextItem?.Id !== menuProps.item.Id
-      && playbackManager.currentItem?.Id !== menuProps.item.Id
+      playbackManager.nextItem?.Id !== item.Id
+      && playbackManager.currentItem?.Id !== item.Id
     ) {
       queueOptions.push(playNextAction);
     }
@@ -428,7 +417,7 @@ function getQueueOptions(): MenuOption[] {
 function getPlaybackOptions(): MenuOption[] {
   const playbackOptions: MenuOption[] = [];
 
-  if (canResume(menuProps.item)) {
+  if (canResume(item)) {
     playbackOptions.push(playFromBeginningAction);
   }
 
@@ -436,9 +425,9 @@ function getPlaybackOptions(): MenuOption[] {
 
   if (playbackManager.currentItem) {
     if (
-      playbackManager.nextItem?.Id !== menuProps.item.Id
-      && playbackManager.currentItem.Id !== menuProps.item.Id
-      && !menuProps.queue
+      playbackManager.nextItem?.Id !== item.Id
+      && playbackManager.currentItem.Id !== item.Id
+      && !queue
     ) {
       playbackOptions.push(playNextAction);
     }
@@ -446,7 +435,7 @@ function getPlaybackOptions(): MenuOption[] {
     playbackOptions.push(addToQueueAction);
   }
 
-  if (canInstantMix(menuProps.item) && playbackManager.currentItem) {
+  if (canInstantMix(item) && playbackManager.currentItem) {
     playbackOptions.push(instantMixAction);
   }
 
@@ -472,18 +461,18 @@ function getCopyOptions(): MenuOption[] {
 function getLibraryOptions(): MenuOption[] {
   const libraryOptions: MenuOption[] = [];
 
-  if (menuProps.item.MediaSources) {
+  if (item.MediaSources) {
     libraryOptions.push(mediaInfoAction);
   }
 
-  if (canRefreshMetadata(menuProps.item)) {
+  if (canRefreshMetadata(item)) {
     libraryOptions.push(refreshAction);
   }
 
   if (remote.auth.currentUser?.Policy?.IsAdministrator) {
     libraryOptions.push(editMetadataAction);
 
-    if (canIdentify(menuProps.item)) {
+    if (canIdentify(item)) {
       libraryOptions.push(identifyItemAction);
     }
   }
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
index f0d25514ef2..37684a05e78 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
@@ -17,16 +17,16 @@ import IMdiHelp from 'virtual:icons/mdi/help';
 import { computed } from 'vue';
 import { isBool } from '@/utils/validation';
 
-const props = defineProps<{
+const { name, value } = defineProps<{
   name: string;
   value?: string | number | boolean;
 }>();
 
 const icon = computed(() => {
-  if (isBool(props.value)) {
-    return props.value ? IMdiCheck : IMdiClose;
+  if (isBool(value)) {
+    return value ? IMdiCheck : IMdiClose;
   }
 
-  return props.value === 'undefined' ? IMdiHelp : undefined;
+  return value === 'undefined' ? IMdiHelp : undefined;
 });
 </script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
index f1d1750ef95..c0cf7fd2ff3 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
@@ -23,7 +23,7 @@ import { isNumber, isBool } from '@/utils/validation';
 import { getLocaleName } from '@/utils/i18n';
 import { formatBitRate } from '@/utils/items';
 
-const props = defineProps<{
+const { stream, videoTimestamp } = defineProps<{
   stream: MediaStream;
   videoTimestamp?: TransportStreamTimestamp;
 }>();
@@ -33,26 +33,26 @@ const { t, locale } = useI18n();
 const properties = computed(() => {
   const p = new Map<string, string | number | boolean | null | undefined>();
   const resolution
-    = props.stream.Width && props.stream.Height
-      ? `${props.stream.Width}x${props.stream.Height}`
+    = stream.Width && stream.Height
+      ? `${stream.Width}x${stream.Height}`
       : undefined;
-  const framerate = props.stream.AverageFrameRate ?? props.stream.RealFrameRate;
-  const language = props.stream.Language
-    ? getLocaleName(props.stream.Language, locale.value)
+  const framerate = stream.AverageFrameRate ?? stream.RealFrameRate;
+  const language = stream.Language
+    ? getLocaleName(stream.Language, locale.value)
     : undefined;
 
-  p.set(t('mediaInfoFileTitle'), props.stream.DisplayTitle);
+  p.set(t('mediaInfoFileTitle'), stream.DisplayTitle);
   p.set(t('mediaInfoGenericLanguage'), language);
-  p.set(t('mediaInfoGenericCodec'), props.stream.Codec?.toUpperCase());
-  p.set(t('mediaInfoGenericCodecTag'), props.stream.CodecTag);
-  p.set(t('mediaInfoGenericProfile'), props.stream.Profile);
-  p.set(t('mediaInfoVideoLevel'), props.stream.Level);
+  p.set(t('mediaInfoGenericCodec'), stream.Codec?.toUpperCase());
+  p.set(t('mediaInfoGenericCodecTag'), stream.CodecTag);
+  p.set(t('mediaInfoGenericProfile'), stream.Profile);
+  p.set(t('mediaInfoVideoLevel'), stream.Level);
   p.set(t('mediaInfoVideoResolution'), resolution);
-  p.set(t('mediaInfoAspectRatio'), props.stream.AspectRatio);
-  p.set(t('mediaInfoVideoIsAnamorphic'), props.stream.IsAnamorphic);
+  p.set(t('mediaInfoAspectRatio'), stream.AspectRatio);
+  p.set(t('mediaInfoVideoIsAnamorphic'), stream.IsAnamorphic);
   p.set(
     t('mediaInfoVideoScanType'),
-    props.stream.IsInterlaced
+    stream.IsInterlaced
       ? t('mediaInfoVideoScanInterlaced')
       : t('mediaInfoVideoScanProgressive')
   );
@@ -64,44 +64,44 @@ const properties = computed(() => {
   );
   p.set(
     t('mediaInfoGenericBitrate'),
-    isNumber(props.stream.BitRate) && props.stream.BitRate > 0
-      ? formatBitRate(props.stream.BitRate)
+    isNumber(stream.BitRate) && stream.BitRate > 0
+      ? formatBitRate(stream.BitRate)
       : undefined
   );
   p.set(
     t('mediaInfoVideoBitDepth'),
-    isNumber(props.stream.BitDepth) && props.stream.BitDepth > 0
-      ? `${props.stream.BitDepth} bits`
+    isNumber(stream.BitDepth) && stream.BitDepth > 0
+      ? `${stream.BitDepth} bits`
       : undefined
   );
-  p.set(t('mediaInfoVideoRange'), props.stream.VideoRange);
-  p.set(t('mediaInfoVideoRangeType'), props.stream.VideoRangeType);
-  p.set(t('mediaInfoVideoDoViTitle'), props.stream.VideoDoViTitle);
-  p.set(t('mediaInfoVideoDoViMajorVersion'), props.stream.DvVersionMajor);
-  p.set(t('mediaInfoVideoDoViMinorVersion'), props.stream.DvVersionMinor);
-  p.set(t('mediaInfoVideoDoViProfile'), props.stream.DvProfile);
-  p.set(t('mediaInfoVideoDoViLevel'), props.stream.DvLevel);
-  p.set(t('mediaInfoVideoDoViRpuPresent'), props.stream.RpuPresentFlag);
-  p.set(t('mediaInfoVideoDoViElPresent'), props.stream.ElPresentFlag);
-  p.set(t('mediaInfoVideoDoViBlPresent'), props.stream.BlPresentFlag);
+  p.set(t('mediaInfoVideoRange'), stream.VideoRange);
+  p.set(t('mediaInfoVideoRangeType'), stream.VideoRangeType);
+  p.set(t('mediaInfoVideoDoViTitle'), stream.VideoDoViTitle);
+  p.set(t('mediaInfoVideoDoViMajorVersion'), stream.DvVersionMajor);
+  p.set(t('mediaInfoVideoDoViMinorVersion'), stream.DvVersionMinor);
+  p.set(t('mediaInfoVideoDoViProfile'), stream.DvProfile);
+  p.set(t('mediaInfoVideoDoViLevel'), stream.DvLevel);
+  p.set(t('mediaInfoVideoDoViRpuPresent'), stream.RpuPresentFlag);
+  p.set(t('mediaInfoVideoDoViElPresent'), stream.ElPresentFlag);
+  p.set(t('mediaInfoVideoDoViBlPresent'), stream.BlPresentFlag);
   p.set(
     t('mediaInfoVideoDoViBlSignalCompatId'),
-    props.stream.DvBlSignalCompatibilityId
+    stream.DvBlSignalCompatibilityId
   );
-  p.set(t('mediaInfoVideoColorSpace'), props.stream.ColorSpace);
-  p.set(t('mediaInfoVideoColorTransfer'), props.stream.ColorTransfer);
-  p.set(t('mediaInfoVideoColorPrimaries'), props.stream.ColorPrimaries);
-  p.set(t('mediaInfoVideoColorRange'), props.stream.ColorRange);
-  p.set(t('mediaInfoVideoPixelFormat'), props.stream.PixelFormat);
-  p.set(t('mediaInfoVideoRefFrames'), props.stream.RefFrames);
+  p.set(t('mediaInfoVideoColorSpace'), stream.ColorSpace);
+  p.set(t('mediaInfoVideoColorTransfer'), stream.ColorTransfer);
+  p.set(t('mediaInfoVideoColorPrimaries'), stream.ColorPrimaries);
+  p.set(t('mediaInfoVideoColorRange'), stream.ColorRange);
+  p.set(t('mediaInfoVideoPixelFormat'), stream.PixelFormat);
+  p.set(t('mediaInfoVideoRefFrames'), stream.RefFrames);
   /**
    * TODO: What is this?
    */
-  p.set('NAL', props.stream.NalLengthSize);
-  p.set(t('mediaInfoGenericIsDefault'), props.stream.IsDefault ?? false);
-  p.set(t('mediaInfoGenericIsForced'), props.stream.IsForced ?? false);
-  p.set(t('mediaInfoGenericIsExternal'), props.stream.IsExternal ?? false);
-  p.set(t('mediaInfoVideoTimestamp'), props.videoTimestamp);
+  p.set('NAL', stream.NalLengthSize);
+  p.set(t('mediaInfoGenericIsDefault'), stream.IsDefault ?? false);
+  p.set(t('mediaInfoGenericIsForced'), stream.IsForced ?? false);
+  p.set(t('mediaInfoGenericIsExternal'), stream.IsExternal ?? false);
+  p.set(t('mediaInfoVideoTimestamp'), videoTimestamp);
 
   return p.entries();
 });
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
index 0473f7e9c94..923a98713b7 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
@@ -151,7 +151,7 @@ import { getLocaleName } from '@/utils/i18n';
 import { formatBitRate, formatFileSize } from '@/utils/items';
 import { isArray, isNil, isNumber } from '@/utils/validation';
 
-const props = defineProps<{ item: BaseItemDto; mediaSourceIndex?: number }>();
+const { item, mediaSourceIndex } = defineProps<{ item: BaseItemDto; mediaSourceIndex?: number }>();
 
 const emit = defineEmits<{
   close: [];
@@ -159,7 +159,7 @@ const emit = defineEmits<{
 
 const { t, locale } = useI18n();
 
-const model = ref(true);
+const model = defineModel<boolean>({ default: true });
 const currentTab = ref<string>();
 
 /**
@@ -171,10 +171,10 @@ function close(): void {
 }
 
 const mediaSources = computed<MediaSourceInfo[]>(() => {
-  return props.item.MediaSources ?? [];
+  return item.MediaSources ?? [];
 });
 
-const selectedMediaSourceIndex = ref<number>(props.mediaSourceIndex ?? 0);
+const selectedMediaSourceIndex = ref<number>(mediaSourceIndex ?? 0);
 const selectedMediaSource = computed<MediaSourceInfo | undefined>(
   () => mediaSources.value[selectedMediaSourceIndex.value] ?? undefined
 );
@@ -200,8 +200,8 @@ const selectedMediaStreamsImage = computed<MediaStream[]>(() =>
 );
 
 const displayName = computed(() => {
-  if ((props.item.MediaSources?.length ?? 0) > 1) {
-    const parent = props.item.Name;
+  if ((item.MediaSources?.length ?? 0) > 1) {
+    const parent = item.Name;
 
     if (parent) {
       return `${parent} - ${selectedMediaSource.value?.Name ?? ''}`;
diff --git a/frontend/src/components/Item/MediaInfo.vue b/frontend/src/components/Item/MediaInfo.vue
index 5cadab899ad..3ab2b31b2a8 100644
--- a/frontend/src/components/Item/MediaInfo.vue
+++ b/frontend/src/components/Item/MediaInfo.vue
@@ -34,19 +34,14 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getEndsAtTime, getRuntimeTime } from '@/utils/time';
 
-withDefaults(
-  defineProps<{
-    item: BaseItemDto;
-    year?: boolean;
-    rating?: boolean;
-    runtime?: boolean;
-    tracks?: boolean;
-    endsAt?: boolean;
-  }>(),
-  {
-    endsAt: false
-  }
-);
+const { item, year, rating, runtime, tracks, endsAt } = defineProps<{
+  item: BaseItemDto;
+  year?: boolean;
+  rating?: boolean;
+  runtime?: boolean;
+  tracks?: boolean;
+  endsAt?: boolean;
+}>();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Item/MediaSourceSelector.vue b/frontend/src/components/Item/MediaSourceSelector.vue
index 7ecb286602e..8ab8972aa30 100644
--- a/frontend/src/components/Item/MediaSourceSelector.vue
+++ b/frontend/src/components/Item/MediaSourceSelector.vue
@@ -2,8 +2,8 @@
   <VSelect
     v-model="currentSource"
     :items="selectSources"
-    :label="selectProps.label"
-    :single-line="selectProps.label == undefined"
+    :label="label"
+    :single-line="label == undefined"
     hide-details
     class="text-truncate">
     <template #selection="{ item: i }">
@@ -22,7 +22,7 @@ import { computed, ref, watch } from 'vue';
 import type { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
 import { getItemizedSelect } from '@/utils/forms';
 
-const selectProps = defineProps<{
+const { sources, defaultSourceIndex, label } = defineProps<{
   sources: MediaSourceInfo[];
   defaultSourceIndex?: number;
   label?: string;
@@ -33,12 +33,12 @@ const emit = defineEmits<{
 }>();
 
 const currentSource = ref(
-  selectProps.sources[selectProps.defaultSourceIndex ?? 0]
+  sources[defaultSourceIndex ?? 0]
 );
-const selectSources = computed(() => getItemizedSelect(selectProps.sources));
+const selectSources = computed(() => getItemizedSelect(sources));
 
 watch(currentSource, () => {
-  const newIndex = selectProps.sources.findIndex(
+  const newIndex = sources.findIndex(
     s => s.Id === currentSource.value.Id
   );
 
diff --git a/frontend/src/components/Item/MediaStreamSelector.vue b/frontend/src/components/Item/MediaStreamSelector.vue
index 9ab536e7c99..c7fa13411cd 100644
--- a/frontend/src/components/Item/MediaStreamSelector.vue
+++ b/frontend/src/components/Item/MediaStreamSelector.vue
@@ -1,8 +1,8 @@
 <template>
   <VSelect
     v-model="trackIndex"
-    :clearable="$props.type === 'Subtitle'"
-    :placeholder="$props.type === 'Subtitle' ? t('disabled') : undefined"
+    :clearable="type === 'Subtitle'"
+    :placeholder="type === 'Subtitle' ? t('disabled') : undefined"
     density="comfortable"
     hide-details
     single-line
@@ -35,14 +35,11 @@ import { watchImmediate } from '@vueuse/core';
 import { getLocaleName } from '@/utils/i18n';
 import { upperFirst } from '@/utils/data-manipulation';
 
-const props = withDefaults(
-  defineProps<{
-    mediaStreams: MediaStream[];
-    type: string;
-    defaultStreamIndex?: number;
-  }>(),
-  { defaultStreamIndex: undefined }
-);
+const { mediaStreams, type, defaultStreamIndex } = defineProps<{
+  mediaStreams: MediaStream[];
+  type: string;
+  defaultStreamIndex?: number;
+}>();
 const emit = defineEmits<{
   input: [newIndex?: number];
 }>();
@@ -79,7 +76,7 @@ function getSurroundIcon(layout: string): typeof IMdiSurroundSound {
 function getTrackIcon(
   track: MediaStream
 ): typeof IMdiSurroundSound | undefined {
-  if (props.type === 'Audio' && track.ChannelLayout) {
+  if (type === 'Audio' && track.ChannelLayout) {
     return getSurroundIcon(track.ChannelLayout);
   }
 }
@@ -89,12 +86,12 @@ function getTrackIcon(
  * @returns Optional subtitle to use for the track line in the v-select menu
  */
 function getTrackSubtitle(track: MediaStream): string | undefined {
-  if ((props.type === 'Audio' || props.type === 'Subtitle') && track.Language) {
+  if ((type === 'Audio' || type === 'Subtitle') && track.Language) {
     return upperFirst(
       getLocaleName(track.Language, locale.value)
       ?? `${t('unknown')} (${track.Language})`
     );
-  } else if (props.type === 'Audio' || props.type === 'Subtitle') {
+  } else if (type === 'Audio' || type === 'Subtitle') {
     return t('undefined');
   }
 }
@@ -105,7 +102,7 @@ function getTrackSubtitle(track: MediaStream): string | undefined {
  * @returns List of objects prepared for Vuetify v-select with the strings to display as "text" and index number as "value".
  */
 const selectItems = computed(() =>
-  props.mediaStreams.map(value => ({
+  mediaStreams.map(value => ({
     icon: getTrackIcon(value),
     selection: value.DisplayTitle ?? '',
     subtitle: getTrackSubtitle(value),
@@ -118,13 +115,13 @@ const selectItems = computed(() =>
  * Default index to use (null if none because of V-Select empty value)
  */
 // eslint-disable-next-line unicorn/no-null
-const trackIndex = ref<number | null>(props.defaultStreamIndex ?? props.mediaStreams.find(track => track.IsDefault)?.Index ?? null);
+const trackIndex = ref<number | null>(defaultStreamIndex ?? mediaStreams.find(track => track.IsDefault)?.Index ?? null);
 
 /**
  * Check if Type is Video or Audio and trackIndex is null then set trackIndex as this.selectItems[0].value
  */
 if (
-  (props.type === 'Video' || props.type === 'Audio')
+  (type === 'Video' || type === 'Audio')
   && trackIndex.value === null
   && selectItems.value[0] !== undefined
 ) {
@@ -140,7 +137,7 @@ watchImmediate(
 );
 
 watch(
-  () => props.defaultStreamIndex,
+  () => defaultStreamIndex,
   (newValue) => {
     if (newValue !== trackIndex.value) {
       // eslint-disable-next-line unicorn/no-null
diff --git a/frontend/src/components/Item/Metadata/DateInput.vue b/frontend/src/components/Item/Metadata/DateInput.vue
index c27383e35bd..dcca01f1e4d 100644
--- a/frontend/src/components/Item/Metadata/DateInput.vue
+++ b/frontend/src/components/Item/Metadata/DateInput.vue
@@ -14,9 +14,9 @@
   </VTextField>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 
-defineProps<{
+const { value, label } = defineProps<{
   value: string;
   label: string;
 }>();
@@ -25,7 +25,7 @@ defineEmits<{
   'update:date': [value: string];
 }>();
 
-const menu = ref(false);
+const menu = shallowRef(false);
 
 /*
  * Const handleChange = (value: string): void => {
diff --git a/frontend/src/components/Item/Metadata/ImageEditor.vue b/frontend/src/components/Item/Metadata/ImageEditor.vue
index 29ff525508f..d9478f5c452 100644
--- a/frontend/src/components/Item/Metadata/ImageEditor.vue
+++ b/frontend/src/components/Item/Metadata/ImageEditor.vue
@@ -113,7 +113,7 @@ import {
 } from '@/utils/images';
 import { remote } from '@/plugins/remote';
 
-const props = defineProps<{ metadata: BaseItemDto }>();
+const { metadata } = defineProps<{ metadata: BaseItemDto }>();
 
 const images = ref<ImageInfo[]>([]);
 const dialog = ref(false);
@@ -136,13 +136,13 @@ const backdropImages = computed<ImageInfo[]>(() =>
  * Fetches image information for the item
  */
 async function getItemImageInfos(): Promise<void> {
-  if (!props.metadata.Id) {
+  if (!metadata.Id) {
     return;
   }
 
   images.value = (
     await remote.sdk.newUserApi(getImageApi).getItemImageInfos({
-      itemId: props.metadata.Id
+      itemId: metadata.Id
     })
   ).data;
 }
@@ -152,7 +152,7 @@ async function getItemImageInfos(): Promise<void> {
  */
 function imageFormat(imageInfo: ImageInfo): string | undefined {
   if (imageInfo.ImageType && imageInfo.ImageTag) {
-    return getImageInfo(props.metadata, {
+    return getImageInfo(metadata, {
       preferThumb: imageInfo.ImageType === ImageType.Thumb,
       preferBanner: imageInfo.ImageType === ImageType.Banner,
       preferLogo: imageInfo.ImageType === ImageType.Logo,
@@ -173,12 +173,12 @@ function onSearch(): void {
  * Removes an image from an item
  */
 async function onDelete(item: ImageInfo): Promise<void> {
-  if (!props.metadata.Id || !item.ImageType) {
+  if (!metadata.Id || !item.ImageType) {
     return;
   }
 
   await remote.sdk.newUserApi(getImageApi).deleteItemImage({
-    itemId: props.metadata.Id,
+    itemId: metadata.Id,
     imageType: item.ImageType,
     imageIndex: item.ImageIndex ?? undefined
   });
@@ -186,5 +186,5 @@ async function onDelete(item: ImageInfo): Promise<void> {
   await getItemImageInfos();
 }
 
-watchImmediate(() => props.metadata, getItemImageInfos);
+watchImmediate(() => metadata, getItemImageInfos);
 </script>
diff --git a/frontend/src/components/Item/Metadata/ImageSearch.vue b/frontend/src/components/Item/Metadata/ImageSearch.vue
index 1e3a8ad6fe5..cf6580bba5f 100644
--- a/frontend/src/components/Item/Metadata/ImageSearch.vue
+++ b/frontend/src/components/Item/Metadata/ImageSearch.vue
@@ -125,7 +125,7 @@ import { useI18n } from 'vue-i18n';
 import { getLocaleName } from '@/utils/i18n';
 import { remote } from '@/plugins/remote';
 
-const props = defineProps<{
+const { metadata, dialog } = defineProps<{
   metadata: BaseItemDto;
   dialog: boolean;
 }>();
@@ -205,13 +205,13 @@ const sources = computed(() =>
  * Returns a list of image providers for the current item
  */
 async function getRemoteImageProviders(): Promise<void> {
-  if (!props.metadata.Id) {
+  if (!metadata.Id) {
     return;
   }
 
   providers.value = (
     await remote.sdk.newUserApi(getRemoteImageApi).getRemoteImageProviders({
-      itemId: props.metadata.Id
+      itemId: metadata.Id
     })
   ).data;
 }
@@ -220,7 +220,7 @@ async function getRemoteImageProviders(): Promise<void> {
  * Fetches the image information for the currently selected item given the filters
  */
 async function getImages(): Promise<void> {
-  if (!props.metadata.Id) {
+  if (!metadata.Id) {
     return;
   }
 
@@ -228,7 +228,7 @@ async function getImages(): Promise<void> {
   images.value
     = (
       await remote.sdk.newUserApi(getRemoteImageApi).getRemoteImages({
-        itemId: props.metadata.Id,
+        itemId: metadata.Id,
         type: type.value,
         providerName: source.value ?? undefined,
         includeAllLanguages: allLanguages.value
@@ -242,13 +242,13 @@ async function getImages(): Promise<void> {
  * Handles downloading an image given the image info
  */
 async function onDownload(item: RemoteImageInfo): Promise<void> {
-  if (!item.Type || !item.Url || !props.metadata.Id) {
+  if (!item.Type || !item.Url || !metadata.Id) {
     return;
   }
 
   loading.value = true;
   await remote.sdk.newUserApi(getRemoteImageApi).downloadRemoteImage({
-    itemId: props.metadata.Id,
+    itemId: metadata.Id,
     type: item.Type,
     imageUrl: item.Url
   });
@@ -271,7 +271,7 @@ function reset(): void {
 
 watch([type, source, allLanguages], getImages);
 watch(
-  () => props.dialog,
+  () => dialog,
   async (dialog) => {
     if (dialog) {
       await getRemoteImageProviders();
diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index 05599768cfd..bb3fff0963d 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -245,7 +245,7 @@ interface ContentOption {
   key: string;
 }
 
-const props = defineProps<{ itemId: string }>();
+const { itemId } = defineProps<{ itemId: string }>();
 
 const emit = defineEmits<{
   'save': [];
@@ -256,7 +256,6 @@ const emit = defineEmits<{
 const { t } = useI18n();
 
 const metadata = ref<BaseItemDto>();
-const menu = ref(false);
 const person = ref<BaseItemPerson>();
 const genres = ref<string[]>([]);
 const loading = ref(false);
@@ -321,13 +320,13 @@ async function getData(): Promise<void> {
   const itemInfo = (
     await remote.sdk.newUserApi(getUserLibraryApi).getItem({
       userId: remote.auth.currentUserId ?? '',
-      itemId: props.itemId
+      itemId: itemId
     })
   ).data;
 
   const options = (
     await remote.sdk.newUserApi(getItemUpdateApi).getMetadataEditorInfo({
-      itemId: props.itemId
+      itemId: itemId
     })
   ).data;
 
@@ -527,5 +526,5 @@ function onPersonDel(index: number): void {
   metadata.value.People.splice(index, 1);
 }
 
-watchImmediate(() => props.itemId, getData);
+watchImmediate(() => itemId, getData);
 </script>
diff --git a/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue b/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
index c4acf7e77a1..54a267b3bd8 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-defineProps<{ itemId: string }>();
+const { itemId } = defineProps<{ itemId: string }>();
 
 const emit = defineEmits<{
   close: [];
diff --git a/frontend/src/components/Item/Metadata/PersonEditor.vue b/frontend/src/components/Item/Metadata/PersonEditor.vue
index 37ce105709f..adee5401fb7 100644
--- a/frontend/src/components/Item/Metadata/PersonEditor.vue
+++ b/frontend/src/components/Item/Metadata/PersonEditor.vue
@@ -83,7 +83,7 @@ import { useI18n } from 'vue-i18n';
 import { type BaseItemPerson, ImageType } from '@jellyfin/sdk/lib/generated-client';
 import { watchImmediate } from '@vueuse/core';
 
-const props = defineProps<{ person: BaseItemPerson | undefined }>();
+const { person } = defineProps<{ person: BaseItemPerson | undefined }>();
 
 const emit = defineEmits<{
   'update:person': [person: BaseItemPerson];
@@ -103,8 +103,8 @@ const options = computed(() => [
 ]);
 
 watchImmediate(
-  () => props.person,
-  (person) => {
+  () => person,
+  () => {
     editState.value = { ...person };
   }
 );
diff --git a/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
index ab0500e9d9b..b13d5a3ffa2 100644
--- a/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
+++ b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
@@ -68,7 +68,7 @@ interface RefreshMethod {
   value: 'scan' | 'missing' | 'all';
 }
 
-const props = defineProps<{
+const { item } = defineProps<{
   item: BaseItemDto;
 }>();
 
@@ -120,7 +120,7 @@ const refreshMode = computed<MetadataRefreshMode>(() => {
 async function refreshMetadata(): Promise<void> {
   const replaceMetadata = selectedMethod.value.value === 'all';
 
-  if (!props.item.Id) {
+  if (!item.Id) {
     return;
   }
 
@@ -128,7 +128,7 @@ async function refreshMetadata(): Promise<void> {
     loading.value = true;
 
     await remote.sdk.newUserApi(getItemRefreshApi).refreshItem({
-      itemId: props.item.Id,
+      itemId: item.Id,
       metadataRefreshMode: refreshMode.value,
       imageRefreshMode: refreshMode.value,
       replaceAllMetadata: replaceMetadata,
@@ -137,8 +137,8 @@ async function refreshMetadata(): Promise<void> {
 
     taskManager.startTask({
       type: TaskType.LibraryRefresh,
-      id: props.item.Id || '',
-      data: props.item.Name ?? `ID ${props.item.Id}`,
+      id: item.Id || '',
+      data: item.Name ?? `ID ${item.Id}`,
       progress: 0
     });
 
diff --git a/frontend/src/components/Item/PeopleList.vue b/frontend/src/components/Item/PeopleList.vue
index 07e10e68a23..6d3ac030029 100644
--- a/frontend/src/components/Item/PeopleList.vue
+++ b/frontend/src/components/Item/PeopleList.vue
@@ -17,7 +17,7 @@
       </VListItem>
     </div>
     <div
-      v-for="index in skeletonLength"
+      v-for="index in skeletonLength ?? 0"
       v-else
       :key="index"
       class="d-flex align-center mt-5 mb-5">
@@ -32,11 +32,8 @@
 import type { BaseItemPerson } from '@jellyfin/sdk/lib/generated-client';
 import { getItemDetailsLink } from '@/utils/items';
 
-withDefaults(
-  defineProps<{
-    items: BaseItemPerson[];
-    skeletonLength?: number;
-  }>(),
-  { skeletonLength: 0 }
-);
+const { items, skeletonLength } = defineProps<{
+  items: BaseItemPerson[];
+  skeletonLength?: number;
+}>();
 </script>
diff --git a/frontend/src/components/Item/RelatedItems.vue b/frontend/src/components/Item/RelatedItems.vue
index 7a1fa1ec924..18ce8da9253 100644
--- a/frontend/src/components/Item/RelatedItems.vue
+++ b/frontend/src/components/Item/RelatedItems.vue
@@ -39,15 +39,10 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useI18n } from 'vue-i18n';
 import { getItemDetailsLink } from '@/utils/items';
 
-withDefaults(
-  defineProps<{
-    relatedItems: BaseItemDto[];
-    vertical?: boolean;
-  }>(),
-  {
-    vertical: false
-  }
-);
+const { relatedItems, vertical } = defineProps<{
+  relatedItems: BaseItemDto[];
+  vertical?: boolean;
+}>();
 
 const { t } = useI18n();
 </script>
diff --git a/frontend/src/components/Item/SeasonTabs.vue b/frontend/src/components/Item/SeasonTabs.vue
index 6c4e6e9aa3c..b520d8c5878 100644
--- a/frontend/src/components/Item/SeasonTabs.vue
+++ b/frontend/src/components/Item/SeasonTabs.vue
@@ -58,7 +58,7 @@
 import { type BaseItemDto, ItemFields } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
-import { ref, watch } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 import { getItemDetailsLink } from '@/utils/items';
 import { remote } from '@/plugins/remote';
 
@@ -73,8 +73,8 @@ interface TvShowItem {
   seasonEpisodes: Record<string, BaseItemDto[]>;
 }
 
-const props = defineProps<{ item: BaseItemDto }>();
-const currentTab = ref(0);
+const { item } = defineProps<{ item: BaseItemDto }>();
+const currentTab = shallowRef(0);
 const seasons = ref<BaseItemDto[] | null | undefined>([]);
 const seasonEpisodes = ref<TvShowItem['seasonEpisodes']>({});
 
@@ -82,14 +82,14 @@ const seasonEpisodes = ref<TvShowItem['seasonEpisodes']>({});
  * Fetch component data
  */
 async function fetch(): Promise<void> {
-  if (!props.item.Id) {
+  if (!item.Id) {
     return;
   }
 
   seasons.value = (
     await remote.sdk.newUserApi(getTvShowsApi).getSeasons({
       userId: remote.auth.currentUserId,
-      seriesId: props.item.Id
+      seriesId: item.Id
     })
   ).data.Items;
 
@@ -113,7 +113,7 @@ async function fetch(): Promise<void> {
 }
 
 await fetch();
-watch(props, async () => {
+watch(() => item, async () => {
   await fetch();
 });
 </script>
diff --git a/frontend/src/components/Layout/AppBar/AppBarButtonLayout.vue b/frontend/src/components/Layout/AppBar/AppBarButtonLayout.vue
index 5fa34dbfd5f..e5b4d561689 100644
--- a/frontend/src/components/Layout/AppBar/AppBarButtonLayout.vue
+++ b/frontend/src/components/Layout/AppBar/AppBarButtonLayout.vue
@@ -1,10 +1,10 @@
 <template>
   <VBtn
     class="align-self-center ma-1"
-    v-bind="mergeProps($props)"
     icon
     size="small"
-    variant="elevated">
+    variant="elevated"
+    v-bind="$attrs">
     <slot name="icon" />
 
     <VTooltip
@@ -14,15 +14,3 @@
     </VTooltip>
   </VBtn>
 </template>
-
-<script setup lang="ts">
-import { mergeProps } from 'vue';
-
-withDefaults(
-  defineProps<{
-    color?: string;
-    disabled?: boolean;
-  }>(),
-  { color: '', disabled: false }
-);
-</script>
diff --git a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
index b3fde23dc63..cb8566b197f 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
@@ -57,8 +57,6 @@ interface TaskInfo {
   id: string;
 }
 
-defineProps<{ fab?: boolean }>();
-
 const menu = ref(false);
 const completedTaskList = ref<TaskInfo[]>([]);
 const { t } = useI18n();
diff --git a/frontend/src/components/Layout/Artist/ArtistTab.vue b/frontend/src/components/Layout/Artist/ArtistTab.vue
index 0bd40030837..2346499c90d 100644
--- a/frontend/src/components/Layout/Artist/ArtistTab.vue
+++ b/frontend/src/components/Layout/Artist/ArtistTab.vue
@@ -12,8 +12,7 @@
             sm="1">
             <ItemCard
               :item="release"
-              overlay
-              link />
+              overlay />
           </VCol>
           <VCol class="py-2">
             <div class="text-subtitle-1 text--secondary font-weight-medium">
@@ -47,7 +46,7 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getItemDetailsLink } from '@/utils/items';
 
-defineProps<{
+const { releases } = defineProps<{
   releases: BaseItemDto[];
 }>();
 </script>
diff --git a/frontend/src/components/Layout/Carousel/Carousel.vue b/frontend/src/components/Layout/Carousel/Carousel.vue
index cc3c2ced1ac..791663f6eda 100644
--- a/frontend/src/components/Layout/Carousel/Carousel.vue
+++ b/frontend/src/components/Layout/Carousel/Carousel.vue
@@ -52,24 +52,15 @@ import { Swiper } from 'swiper/vue';
 import { ref, shallowRef } from 'vue';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
-withDefaults(
-  defineProps<{
-    slides: number;
-    /**
-     * In milliseconds
-     */
-    slideDuration?: number;
-    progressBar?: boolean;
-    topProgressBar?: boolean;
-    pageBackdrop?: boolean;
-  }>(),
-  {
-    slideDuration: 7000,
-    progressBar: false,
-    topProgressBar: false,
-    pageBackdrop: false
-  }
-);
+const { slideDuration = 7000, progressBar, topProgressBar } = defineProps<{
+  slides: number;
+  /**
+   * In milliseconds
+   */
+  slideDuration?: number;
+  progressBar?: boolean;
+  topProgressBar?: boolean;
+}>();
 
 const emit = defineEmits<{
   'on-slide-change': [currentIndex: number, swiper: SwiperType];
diff --git a/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue b/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
index bfd87636b5d..b136c1b4d71 100644
--- a/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
+++ b/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
@@ -17,19 +17,17 @@ import { computed } from 'vue';
 import { useDisplay } from 'vuetify';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
-const props = withDefaults(
-  defineProps<{
-    pages: number;
-    currentIndex: number;
-    /**
-     * In milliseconds
-     */
-    duration: number;
-    paused: boolean;
-    hoverable?: boolean;
-  }>(),
-  { hoverable: false }
-);
+const { pages, currentIndex, duration, paused, hoverable } = defineProps<{
+  pages: number;
+  currentIndex: number;
+  /**
+   * In milliseconds
+   */
+  duration: number;
+  paused: boolean;
+  hoverable?: boolean;
+}>();
+
 const emit = defineEmits<{
   animationEnd: [];
   progressClicked: [index: number];
@@ -43,23 +41,23 @@ const defaultBarClasses = Object.freeze([
   'align-center',
   'justify-center'
 ]);
-const expand = computed(() => props.hoverable && !display.mobile.value);
-const animDuration = computed(() => (props.duration / 1000).toString() + 's');
+const expand = computed(() => hoverable && !display.mobile.value);
+const animDuration = computed(() => (duration / 1000).toString() + 's');
 const barClasses = computed(() =>
-  Array.from({ length: props.pages }).map((_, i) => {
+  Array.from({ length: pages }).map((_, i) => {
     const classes = [...defaultBarClasses];
 
     if (expand.value) {
       classes.push('expand');
     }
 
-    if (i === props.currentIndex) {
+    if (i === currentIndex) {
       classes.push('active');
 
-      if (props.paused) {
+      if (paused) {
         classes.push('paused');
       }
-    } else if (i < props.currentIndex) {
+    } else if (i < currentIndex) {
       classes.push('passed');
     }
 
diff --git a/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue b/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
index bfebea93a5c..597d65ccb94 100644
--- a/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
+++ b/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
@@ -67,17 +67,14 @@ import { apiStore } from '@/store/api';
 import { getItemDetailsLink } from '@/utils/items';
 import { useItemBackdrop } from '@/composables/backdrop';
 
-const props = withDefaults(
-  defineProps<{
-    items: BaseItemDto[];
-    pageBackdrop?: boolean;
-  }>(),
-  { pageBackdrop: false }
-);
+const { items, pageBackdrop } = defineProps<{
+  items: BaseItemDto[];
+  pageBackdrop?: boolean;
+}>();
 
 const currentIndex = shallowRef(0);
 
-useItemBackdrop(() => props.pageBackdrop ? props.items[currentIndex.value] : undefined);
+useItemBackdrop(() => pageBackdrop ? items[currentIndex.value] : undefined);
 
 /**
  * Get the related item passed from the parent component
diff --git a/frontend/src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue b/frontend/src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue
index 4bc6f8e3423..3f79b5c11bc 100644
--- a/frontend/src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue
+++ b/frontend/src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue
@@ -41,43 +41,43 @@ import { type BaseItemDto, BaseItemKind } from '@jellyfin/sdk/lib/generated-clie
 import { getLogo } from '@/utils/images';
 import { getItemDetailsLink } from '@/utils/items';
 
-const props = defineProps<{ item: BaseItemDto }>();
+const { item } = defineProps<{ item: BaseItemDto }>();
 
-const logo = computed(() => getLogo(props.item));
-const itemLink = computed(() => getItemDetailsLink(props.item));
+const logo = computed(() => getLogo(item));
+const itemLink = computed(() => getItemDetailsLink(item));
 const titleString = computed(() => {
-  if (props.item.Type === BaseItemKind.MusicAlbum && props.item.AlbumArtist) {
-    return props.item.AlbumArtist;
+  if (item.Type === BaseItemKind.MusicAlbum && item.AlbumArtist) {
+    return item.AlbumArtist;
   } else if (
-    props.item.Type === BaseItemKind.Episode
-    && props.item.SeriesName
+    item.Type === BaseItemKind.Episode
+    && item.SeriesName
   ) {
-    return props.item.SeriesName;
+    return item.SeriesName;
   } else {
-    return props.item.Name;
+    return item.Name;
   }
 });
 
 const logoLink = computed(() => {
   if (
-    props.item.Type === BaseItemKind.MusicAlbum
-    && props.item.AlbumArtists?.length
+    item.Type === BaseItemKind.MusicAlbum
+    && item.AlbumArtists?.length
   ) {
     return getItemDetailsLink(
-      props.item.AlbumArtists[0],
+      item.AlbumArtists[0],
       BaseItemKind.MusicArtist
     );
-  } else if (props.item.Type === BaseItemKind.Episode && props.item.SeriesId) {
-    return getItemDetailsLink({ Id: props.item.SeriesId }, BaseItemKind.Series);
+  } else if (item.Type === BaseItemKind.Episode && item.SeriesId) {
+    return getItemDetailsLink({ Id: item.SeriesId }, BaseItemKind.Series);
   }
 });
 
 const subtitle = computed(() => {
   if (
-    props.item.Type === BaseItemKind.MusicAlbum
-    || props.item.Type === BaseItemKind.Episode
+    item.Type === BaseItemKind.MusicAlbum
+    || item.Type === BaseItemKind.Episode
   ) {
-    return props.item.Name;
+    return item.Name;
   }
 });
 </script>
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
index 184fe3ff947..acdadfc3982 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
@@ -12,26 +12,23 @@
 <script setup lang="ts">
 import { transfer } from 'comlink';
 import { shallowRef, watch, useTemplateRef } from 'vue';
+import { computedAsync } from '@vueuse/core';
 import { blurhashDecoder, canvasDrawer } from '@/plugins/workers';
 import { BLURHASH_DEFAULT_HEIGHT, BLURHASH_DEFAULT_WIDTH, BLURHASH_DEFAULT_PUNCH } from '@/store';
 
-const props = withDefaults(
-  defineProps<{
-    hash: string;
-    width?: number;
-    height?: number;
-    punch?: number;
-  }>(),
-  { width: BLURHASH_DEFAULT_WIDTH, height: BLURHASH_DEFAULT_HEIGHT, punch: BLURHASH_DEFAULT_PUNCH }
-);
+const { hash, width = BLURHASH_DEFAULT_WIDTH, height = BLURHASH_DEFAULT_HEIGHT, punch = BLURHASH_DEFAULT_PUNCH } = defineProps<{
+  hash: string;
+  width?: number;
+  height?: number;
+  punch?: number;
+}>();
 
 const error = shallowRef(false);
 const canvas = useTemplateRef<HTMLCanvasElement>('canvas');
+const pixels = computedAsync(async () => await blurhashDecoder.getPixels(hash, width, height, punch));
 let offscreen: OffscreenCanvas | undefined;
 
-watch([props, canvas], async () => {
-  const pixels = await blurhashDecoder.getPixels(props.hash, props.width, props.height, props.punch);
-
+watch([pixels, canvas], async () => {
   if (canvas.value) {
     if (!offscreen) {
       offscreen = canvas.value.transferControlToOffscreen();
@@ -41,9 +38,9 @@ watch([props, canvas], async () => {
       error.value = false;
       await canvasDrawer.drawBlurhash(transfer(
         { canvas: offscreen,
-          pixels,
-          width: props.width,
-          height: props.height
+          pixels: pixels.value,
+          width: width,
+          height: height
         }, [offscreen]));
     } catch {
       error.value = true;
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
index c8571a73eac..3e724a018f9 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
@@ -3,7 +3,7 @@
     <JImg
       class="absolute-cover"
       :src="imageUrl"
-      :alt="props.item.Name ?? $t('unknown')"
+      :alt="item.Name ?? $t('unknown')"
       v-bind="$attrs">
       <template #placeholder>
         <BlurhashCanvas
@@ -34,22 +34,19 @@ import {
 import { computed } from 'vue';
 import { getBlurhash, getImageInfo } from '@/utils/images';
 
-const props = withDefaults(
-  defineProps<{
-    item: BaseItemDto | BaseItemPerson;
-    width?: number;
-    height?: number;
-    punch?: number;
-    type?: ImageType;
-  }>(),
-  { type: ImageType.Primary }
-);
+const { item, width, height, punch, type = ImageType.Primary } = defineProps<{
+  item: BaseItemDto | BaseItemPerson;
+  width?: number;
+  height?: number;
+  punch?: number;
+  type?: ImageType;
+}>();
 
-const imageUrl = computed(() => getImageInfo(props.item, {
-  preferThumb: props.type === ImageType.Thumb,
-  preferBanner: props.type === ImageType.Banner,
-  preferLogo: props.type === ImageType.Logo,
-  preferBackdrop: props.type === ImageType.Backdrop
+const imageUrl = computed(() => getImageInfo(item, {
+  preferThumb: type === ImageType.Thumb,
+  preferBanner: type === ImageType.Banner,
+  preferLogo: type === ImageType.Logo,
+  preferBackdrop: type === ImageType.Backdrop
 }).url);
-const hash = computed(() => getBlurhash(props.item, props.type));
+const hash = computed(() => getBlurhash(item, type));
 </script>
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
index 0b065dd1427..fb05df04320 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
@@ -19,7 +19,7 @@ import type {
 } from '@jellyfin/sdk/lib/generated-client';
 import { getItemIcon } from '@/utils/items';
 
-defineProps<{ item: BaseItemDto | BaseItemPerson }>();
+const { item } = defineProps<{ item: BaseItemDto | BaseItemPerson }>();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Layout/Images/UserImage.vue b/frontend/src/components/Layout/Images/UserImage.vue
index ec8a9d017f3..700eeb0c146 100644
--- a/frontend/src/components/Layout/Images/UserImage.vue
+++ b/frontend/src/components/Layout/Images/UserImage.vue
@@ -24,21 +24,17 @@ import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
 import { remote } from '@/plugins/remote';
 
-const props = withDefaults(
-  defineProps<{
-    user: UserDto;
-    size?: number;
-    rounded?: boolean;
-  }>(),
-  { size: 64, rounded: false }
-);
+const { user, size = 64 } = defineProps<{
+  user: UserDto;
+  size?: number;
+}>();
 
 const url = computed(() => {
-  return props.user.Id && props.user.PrimaryImageTag && remote.sdk.api?.basePath
-    ? `${remote.sdk.api.basePath}/Users/${props.user.Id}/Images/Primary/?tag=${props.user.PrimaryImageTag}`
+  return user.Id && user.PrimaryImageTag && remote.sdk.api?.basePath
+    ? `${remote.sdk.api.basePath}/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}`
     : undefined;
 });
 const iconSize = computed(() => {
-  return props.size * 0.75;
+  return size * 0.75;
 });
 </script>
diff --git a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
index ec325742ddc..d031c44910d 100644
--- a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
+++ b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
@@ -50,7 +50,7 @@ export interface DrawerItem {
   to: keyof RouteNamedMap;
 }
 
-defineProps<{
+const { order, drawerItems } = defineProps<{
   order?: number;
   drawerItems: DrawerItem[];
 }>();
diff --git a/frontend/src/components/Layout/SwiperSection.vue b/frontend/src/components/Layout/SwiperSection.vue
index ace8c98127c..88b5e7f074a 100644
--- a/frontend/src/components/Layout/SwiperSection.vue
+++ b/frontend/src/components/Layout/SwiperSection.vue
@@ -71,7 +71,7 @@ import { computed } from 'vue';
 import { useDisplay, useTheme } from 'vuetify';
 import { CardShapes } from '@/utils/items';
 
-const props = defineProps<{
+const { title, items, shape } = defineProps<{
   title: string;
   items: BaseItemDto[];
   shape?: CardShapes;
@@ -90,19 +90,19 @@ const navigation = {
   prevEl: `.swiper-section-${uuid} .swiper-prev`,
   disabledClass: 'swiper-button-disabled v-btn--disabled'
 };
-const slides = computed(() => props.shape === CardShapes.Thumb ? 2 : 3);
+const slides = computed(() => shape === CardShapes.Thumb ? 2 : 3);
 const breakpoints = computed(() => ({
   600: {
-    slidesPerView: props.shape === CardShapes.Thumb ? 3 : 4,
-    slidesPerGroup: props.shape === CardShapes.Thumb ? 3 : 4
+    slidesPerView: shape === CardShapes.Thumb ? 3 : 4,
+    slidesPerGroup: shape === CardShapes.Thumb ? 3 : 4
   },
   960: {
-    slidesPerView: props.shape === CardShapes.Thumb ? 3 : 6,
-    slidesPerGroup: props.shape === CardShapes.Thumb ? 3 : 6
+    slidesPerView: shape === CardShapes.Thumb ? 3 : 6,
+    slidesPerGroup: shape === CardShapes.Thumb ? 3 : 6
   },
   1904: {
-    slidesPerView: props.shape === CardShapes.Thumb ? 4 : 8,
-    slidesPerGroup: props.shape === CardShapes.Thumb ? 4 : 8
+    slidesPerView: shape === CardShapes.Thumb ? 4 : 8,
+    slidesPerGroup: shape === CardShapes.Thumb ? 4 : 8
   }
 }));
 </script>
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index 3cd9013bf83..a658f811479 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/frontend/src/components/Playback/TrackList.vue
@@ -126,12 +126,12 @@ import { playbackManager } from '@/store/playback-manager';
 import { getItemDetailsLink } from '@/utils/items';
 import { formatTicks } from '@/utils/time';
 
-const props = defineProps<{
+const { item } = defineProps<{
   item: BaseItemDto;
 }>();
 
 const { data: tracks } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  parentId: props.item.Id,
+  parentId: item.Id,
   sortBy: ['SortName'],
   sortOrder: [SortOrder.Ascending]
 }));
@@ -149,13 +149,11 @@ function isPlaying(track: BaseItemDto): boolean {
  * Play all the tracks from an item
  */
 async function playTracks(track: BaseItemDto): Promise<void> {
-  if (tracks.value) {
-    await playbackManager.play({
-      item: props.item,
-      startFromIndex: tracks.value.indexOf(track),
-      initiator: props.item
-    });
-  }
+  await playbackManager.play({
+    item: item,
+    startFromIndex: tracks.value.indexOf(track),
+    initiator: item
+  });
 }
 </script>
 
diff --git a/frontend/src/components/Skeletons/SkeletonCard.vue b/frontend/src/components/Skeletons/SkeletonCard.vue
index d8ee30c5071..4b6e9dde6df 100644
--- a/frontend/src/components/Skeletons/SkeletonCard.vue
+++ b/frontend/src/components/Skeletons/SkeletonCard.vue
@@ -14,18 +14,11 @@
 <script setup lang="ts">
 import { CardShapes } from '@/utils/items';
 
-withDefaults(
-  defineProps<{
-    boilerplate?: boolean;
-    text?: boolean;
-    cardShape?: CardShapes;
-  }>(),
-  {
-    boilerplate: false,
-    text: false,
-    cardShape: CardShapes.Portrait
-  }
-);
+const { boilerplate, text, cardShape = CardShapes.Portrait } = defineProps<{
+  boilerplate?: boolean;
+  text?: boolean;
+  cardShape?: CardShapes;
+}>();
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/Skeletons/SkeletonItemGrid.vue b/frontend/src/components/Skeletons/SkeletonItemGrid.vue
index e85b9facbcd..68f80372576 100644
--- a/frontend/src/components/Skeletons/SkeletonItemGrid.vue
+++ b/frontend/src/components/Skeletons/SkeletonItemGrid.vue
@@ -13,17 +13,15 @@
 </template>
 
 <script setup lang="ts">
-import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
-import { CardShapes, getShapeFromItemType } from '@/utils/items';
+import { getShapeFromItemType } from '@/utils/items';
 
-const props = withDefaults(defineProps<{ viewType?: BaseItemKind }>(), {
-  viewType: 'Movie'
-});
+const { viewType = BaseItemKind.Movie } = defineProps<{ viewType?: BaseItemKind }>();
 
 const skeletonCardShape = computed(() => {
-  return getShapeFromItemType(props.viewType) || CardShapes.Portrait;
+  return getShapeFromItemType(viewType);
 });
 </script>
 
diff --git a/frontend/src/components/System/AddApiKey.vue b/frontend/src/components/System/AddApiKey.vue
index 3dc2ca997e7..443fdf9ceed 100644
--- a/frontend/src/components/System/AddApiKey.vue
+++ b/frontend/src/components/System/AddApiKey.vue
@@ -39,7 +39,7 @@ import { useDisplay } from 'vuetify';
 import { remote } from '@/plugins/remote';
 import { useSnackbar } from '@/composables/use-snackbar';
 
-defineProps<{ addingNewKey: boolean }>();
+const { addingNewKey } = defineProps<{ addingNewKey: boolean }>();
 
 const emit = defineEmits<{
   keyAdded: [];
diff --git a/frontend/src/components/System/LocaleSwitcher.vue b/frontend/src/components/System/LocaleSwitcher.vue
index 5c885d2a672..144f93b056c 100644
--- a/frontend/src/components/System/LocaleSwitcher.vue
+++ b/frontend/src/components/System/LocaleSwitcher.vue
@@ -32,10 +32,9 @@ import { useI18n } from 'vue-i18n';
 import { clientSettings } from '@/store/client-settings';
 import { getLocaleNativeName } from '@/utils/i18n';
 
-defineProps<{
+const { bottom, large, elevated } = defineProps<{
   bottom?: boolean;
   large?: boolean;
-  top?: boolean;
   elevated?: boolean;
 }>();
 
diff --git a/frontend/src/components/Users/UserCard.vue b/frontend/src/components/Users/UserCard.vue
index 13621948cf3..ddddf391571 100644
--- a/frontend/src/components/Users/UserCard.vue
+++ b/frontend/src/components/Users/UserCard.vue
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 
-defineProps<{ user: UserDto }>();
+const { user } = defineProps<{ user: UserDto }>();
 
 defineEmits<{
   connect: [user: UserDto];
diff --git a/frontend/src/components/lib/JImg.vue b/frontend/src/components/lib/JImg.vue
index 3920535baa7..39b17b700dd 100644
--- a/frontend/src/components/lib/JImg.vue
+++ b/frontend/src/components/lib/JImg.vue
@@ -8,8 +8,8 @@
       @load="onLoad"
       @error="onError">
     <JTransition
-      v-bind="isObj(props.transitionProps) ? props.transitionProps : undefined"
-      :disabled="!props.transitionProps">
+      v-bind="isObj(transitionProps) ? transitionProps : undefined"
+      :disabled="!transitionProps">
       <img
         v-if="shown"
         :src="src"
@@ -64,7 +64,7 @@ defineOptions({
   inheritAttrs: false
 });
 
-const props = withDefaults(defineProps<{
+const { src, alt, once, transitionProps = true } = defineProps<{
   src?: string;
   alt: string;
   /**
@@ -79,7 +79,7 @@ const props = withDefaults(defineProps<{
    * @default true
    */
   transitionProps?: JTransitionProps | boolean;
-}>(), { transitionProps: true });
+}>();
 
 const loading = shallowRef(true);
 const error = shallowRef(false);
@@ -89,7 +89,7 @@ const shown = computed(() => !loading.value && !error.value);
  * Event handler for the loadstart event
  */
 function onLoadStart(): void {
-  if (!props.once) {
+  if (!once) {
     loading.value = true;
   }
 }
@@ -110,7 +110,7 @@ function onError(): void {
   error.value = true;
 }
 
-watch(() => props.src, onLoadStart);
+watch(() => src, onLoadStart);
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/lib/JSafeHtml.vue b/frontend/src/components/lib/JSafeHtml.vue
index 1b5812f9335..75efa27d551 100644
--- a/frontend/src/components/lib/JSafeHtml.vue
+++ b/frontend/src/components/lib/JSafeHtml.vue
@@ -7,9 +7,9 @@ interface Props {
   markdown?: boolean;
 }
 
-const JSafeHtml = (props: Props) => h(
-  createVNode(Static, undefined, sanitizeHtml(props.html, Boolean(props.markdown))),
-  { key: `${props.markdown}-${props.html}` }
+const JSafeHtml = ({ html, markdown = false }: Props) => h(
+  createVNode(Static, undefined, sanitizeHtml(html, markdown)),
+  { key: `${html}_${markdown}` }
 );
 
 JSafeHtml.inheritAttrs = false;
diff --git a/frontend/src/components/lib/JTransition.vue b/frontend/src/components/lib/JTransition.vue
index d4715f25ea2..59bb3aacb1d 100644
--- a/frontend/src/components/lib/JTransition.vue
+++ b/frontend/src/components/lib/JTransition.vue
@@ -1,9 +1,9 @@
 <template>
   <component
-    :is="props.group ? TransitionGroup : Transition"
+    :is="group ? TransitionGroup : Transition"
     class="j-transition"
     v-bind="$attrs"
-    :name="prefersNoMotion || disabled || isSlow ? undefined : `j-transition-${props.name}`"
+    :name="prefersNoMotion || disabled || isSlow ? undefined : `j-transition-${name}`"
     @before-leave="leaving = true"
     @after-leave="onNoLeave"
     @leave-cancelled="onNoLeave">
@@ -30,7 +30,7 @@ interface Props {
 
 export type JTransitionProps = TransitionProps & Props;
 
-const props = withDefaults(defineProps<Props>(), { name: 'fade' });
+const { name = 'fade', group, disabled } = defineProps<Props>();
 const leaving = shallowRef(false);
 const onNoLeave = () => leaving.value = false;
 
diff --git a/frontend/src/components/lib/JView.vue b/frontend/src/components/lib/JView.vue
index a788f1eb2d5..4debe369361 100644
--- a/frontend/src/components/lib/JView.vue
+++ b/frontend/src/components/lib/JView.vue
@@ -14,7 +14,7 @@
  */
 import type { Component } from 'vue';
 
-defineProps<{
+const { comp } = defineProps<{
   comp: Component;
 }>();
 </script>
diff --git a/frontend/src/components/lib/JVirtual/JVirtual.vue b/frontend/src/components/lib/JVirtual/JVirtual.vue
index c151cfcf9f5..8c1838c4a4c 100644
--- a/frontend/src/components/lib/JVirtual/JVirtual.vue
+++ b/frontend/src/components/lib/JVirtual/JVirtual.vue
@@ -52,7 +52,7 @@ import {
 import type { IJVirtualWorker } from './j-virtual.worker';
 import JVirtualWorker from './j-virtual.worker?worker';
 import { vuetify } from '@/plugins/vuetify';
-import { isUndef } from '@/utils/validation';
+import { isNil, isUndef } from '@/utils/validation';
 
 /**
  * SHARED STATE ACROSS ALL THE COMPONENT INSTANCES
@@ -76,45 +76,38 @@ const displayHeight = refDebounced(display.height, 250);
  * - Type support for the data that must be passed to the virtualized component's instances
  * - Improved documentation and comments
  */
-const props = withDefaults(
-  defineProps<{
-    items: T[];
-    /**
-     * Element to use as a container for the virtualized elements
-     * @default 'div'
-     */
-    tag?: string;
-    /**
-     * Element to use for probing the rest of the elements
-     * @default 'div'
-     */
-    probeTag?: string;
-    /**
-     * Items to buffer in the view. By default, the same amount of items that fit on the screen
-     * are buffered above and below the visible area.
-     * @default 1
-     */
-    bufferMultiplier?: number;
-    /**
-     * Item index to scroll to. It just scrolls to the item, it doesn't lock screen to it.
-     */
-    scrollTo?: number;
-    /**
-     * Whether to use a grid layout
-     */
-    grid?: boolean;
-    /**
-     * Updates the content by using the index as key. This is useful in case the inner content
-     * doesn't react properly to changes in the data.
-     */
-    indexAsKey?: boolean;
-  }>(),
-  {
-    tag: 'div',
-    probeTag: 'div',
-    bufferMultiplier: 1.2
-  }
-);
+const { items, tag = 'div', probeTag = 'div', bufferMultiplier = 1.2, scrollTo, grid, indexAsKey } = defineProps<{
+  items: T[];
+  /**
+   * Element to use as a container for the virtualized elements
+   * @default 'div'
+   */
+  tag?: string;
+  /**
+   * Element to use for probing the rest of the elements
+   * @default 'div'
+   */
+  probeTag?: string;
+  /**
+   * Items to buffer in the view. By default, the same amount of items that fit on the screen
+   * are buffered above and below the visible area.
+   * @default 1
+   */
+  bufferMultiplier?: number;
+  /**
+   * Item index to scroll to. It just scrolls to the item, it doesn't lock screen to it.
+   */
+  scrollTo?: number;
+  /**
+   * Whether to use a grid layout
+   */
+  grid?: boolean;
+  /**
+   * Updates the content by using the index as key. This is useful in case the inner content
+   * doesn't react properly to changes in the data.
+   */
+  indexAsKey?: boolean;
+}>();
 
 /**
  * == TEMPLATE REFS ==
@@ -143,14 +136,14 @@ const cache = new Map<number, InternalItem[]>();
  * Vue to track for changes. If we don't do this, Vue will not track the dependencies
  * correctly.
  */
-const gridClass = computed(() => props.grid ? 'j-virtual-grid-area' : undefined);
-const itemsLength = computed(() => props.items.length);
+const gridClass = computed(() => grid ? 'j-virtual-grid-area' : undefined);
+const itemsLength = computed(() => items.length);
 const resizeMeasurement = computed(() => {
   return rootRef.value
     && itemRect.value
     && !isUndef(displayWidth.value)
     && !isUndef(displayHeight.value)
-    && !isUndef(props.items)
+    && !isUndef(items)
     ? getResizeMeasurement(rootRef.value, itemRect.value)
     : undefined;
 });
@@ -158,7 +151,7 @@ const contentSize = computed(() => {
   return resizeMeasurement.value
     && !isUndef(displayWidth.value)
     && !isUndef(displayHeight.value)
-    && !isUndef(props.items)
+    && !isUndef(items)
     ? getContentSize(resizeMeasurement.value, itemsLength.value)
     : undefined;
 });
@@ -175,9 +168,9 @@ const boundingClientRect = computed(() => {
   if (
     !isUndef(displayWidth.value)
     && !isUndef(displayHeight.value)
-    && !isUndef(rootRef.value)
+    && !isNil(rootRef.value)
     && !isUndef(scrollEvents.value)
-    && !isUndef(props.items)
+    && !isUndef(items)
   ) {
     return rootRef.value.getBoundingClientRect();
   }
@@ -192,7 +185,7 @@ const bufferMeta = computed(() => {
         top: topSpaceAroundWindow.value
       },
       resizeMeasurement.value,
-      props.bufferMultiplier
+      bufferMultiplier
     );
   }
 });
@@ -338,14 +331,14 @@ watch(
 /**
  * Tracks if the scroll must be pointed at an specific element
  */
-watch(() => props.scrollTo, () => {
+watch(() => scrollTo, () => {
   if (!isUndef(rootRef.value)
-    && !isUndef(props.scrollTo)
+    && !isUndef(scrollTo)
     && !isUndef(resizeMeasurement.value)
     && !isUndef(scrollParents.value)
-    && props.scrollTo > 0
-    && props.scrollTo < itemsLength.value) {
-    const { target, top, left } = getScrollToInfo(scrollParents.value, rootRef.value, resizeMeasurement.value, props.scrollTo);
+    && scrollTo > 0
+    && scrollTo < itemsLength.value) {
+    const { target, top, left } = getScrollToInfo(scrollParents.value, rootRef.value, resizeMeasurement.value, scrollTo);
 
     target.scrollTo({ top, left, behavior: 'smooth' });
   }