From d1bcd64599e8a6877fb04db34f9cce54556ebd21 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 26 Aug 2024 17:55:24 +0300
Subject: [PATCH] Convert `VButton`, tabs and item group components to script
 setup (#4796)

* Convert VItem-related; brand; tabs components

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Remove border on focus-visible:hover

Signed-off-by: Olga Bulat <obulat@gmail.com>

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/LoadingIcon.vue       |  52 ----
 frontend/src/components/VBrand/VBrand.vue     |  13 +-
 frontend/src/components/VButton.vue           | 221 ++++++--------
 .../components/VContentLink/VContentLink.vue  | 112 +++----
 .../VContentSwitcher/VSearchTypeButton.vue    |  70 ++---
 .../VContentSwitcher/VSearchTypeItem.vue      | 101 +++----
 .../VContentSwitcher/VSearchTypePopover.vue   |   4 +-
 .../VContentSwitcher/VSearchTypes.vue         |  85 +++---
 .../meta/VSearchTypeButton.stories.js         |   2 +-
 .../VContentSettingsModalContent.vue          |   2 +-
 frontend/src/components/VHomepageContent.vue  |   2 +-
 frontend/src/components/VItemGroup/VItem.vue  | 166 +++++------
 .../src/components/VItemGroup/VItemGroup.vue  | 217 ++++++--------
 .../components/VLogoLoader/VLogoLoader.vue    |  28 +-
 frontend/src/components/VTabs/VTab.vue        | 276 ++++++++----------
 frontend/src/components/VTabs/VTabPanel.vue   |  90 ++----
 frontend/src/components/VTabs/VTabs.vue       | 148 ++++------
 .../src/composables/use-component-name.ts     |  10 -
 frontend/src/composables/use-search-type.ts   |  21 +-
 .../specs/components/loading-icon.spec.js     |  12 -
 20 files changed, 643 insertions(+), 989 deletions(-)
 delete mode 100644 frontend/src/components/LoadingIcon.vue
 delete mode 100644 frontend/src/composables/use-component-name.ts
 delete mode 100644 frontend/test/unit/specs/components/loading-icon.spec.js

diff --git a/frontend/src/components/LoadingIcon.vue b/frontend/src/components/LoadingIcon.vue
deleted file mode 100644
index 1b413aa7561..00000000000
--- a/frontend/src/components/LoadingIcon.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-export default {
-  name: "LoadingIcon",
-}
-</script>
-
-<template>
-  <div class="lds-ring" data-testid="lds-ring">
-    <div />
-    <div />
-    <div />
-    <div />
-  </div>
-</template>
-
-<style scoped>
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-}
-.lds-ring div {
-  display: block;
-  position: absolute;
-  width: 51px;
-  height: 51px;
-  margin: 6px;
-  border: 6px solid rgb(59, 59, 59);
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: rgb(59, 59, 59) transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/frontend/src/components/VBrand/VBrand.vue b/frontend/src/components/VBrand/VBrand.vue
index 2d56bfcad8f..b0ab7fe48a5 100644
--- a/frontend/src/components/VBrand/VBrand.vue
+++ b/frontend/src/components/VBrand/VBrand.vue
@@ -1,18 +1,9 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
-import VSvg from "~/components/VSvg/VSvg.vue"
-
+<script setup lang="ts">
 /**
  * A simple Openverse logo component, visually hidden from screen-reader users.
  * Implementations should wrap this icon with appropriate sr-only text or an aria-label.
  */
-export default defineComponent({
-  name: "VBrand",
-  components: {
-    VSvg,
-  },
-})
+import VSvg from "~/components/VSvg/VSvg.vue"
 </script>
 
 <template>
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index 93f4e6a8c81..0a96a288abb 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -1,26 +1,20 @@
-<script lang="ts">
-import { defineComponent, watch, computed, PropType } from "vue"
+<script setup lang="ts">
+import { watch, computed, useAttrs } from "vue"
 
 import { warn } from "~/utils/console"
 
-import type { ProperlyExtractPropTypes } from "~/types/prop-extraction"
-import {
+import type {
   ButtonConnections,
-  buttonForms,
+  ButtonForm,
   ButtonSize,
   ButtonType,
   ButtonVariant,
 } from "~/types/button"
-import type { ButtonForm } from "~/types/button"
 
 import { skipToContentTargetId } from "~/constants/window"
 
 import VLink from "~/components/VLink.vue"
 
-export type ButtonProps = ProperlyExtractPropTypes<
-  NonNullable<(typeof VButton)["props"]>
->
-
 /**
  * A button component that behaves just like a regular HTML `button` element
  * aside from pre-applied styles based on the passed in variant.
@@ -33,10 +27,8 @@ export type ButtonProps = ProperlyExtractPropTypes<
  * The accessibility helpers on this component are critical and are completely
  * adapted from Reakit's Button, Clickable, and Tabbable component implementations.
  */
-const VButton = defineComponent({
-  name: "VButton",
-  components: { VLink },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * Passed to `component :is` to allow the button to *appear* as a button but
      * work like another element (like an `anchor`). May only be either `button` or `VLink`.
@@ -52,11 +44,7 @@ const VButton = defineComponent({
      *
      * @default 'button'
      */
-    as: {
-      type: String as PropType<ButtonForm>,
-      default: "button",
-      validate: (val: ButtonForm) => buttonForms.includes(val),
-    },
+    as?: ButtonForm
     /**
      * The variant of the button.
      *
@@ -64,28 +52,19 @@ const VButton = defineComponent({
      * should set a border color, otherwise the browser default is used.
      * Plain--avoid removes _all_ styles including the focus ring.
      */
-    variant: {
-      type: String as PropType<ButtonVariant>,
-      required: true,
-    },
+    variant: ButtonVariant
     /**
      * Allows for programmatically setting the pressed state of a button,
      * i.e., in the case of a button opening a menu.
      */
-    pressed: {
-      type: Boolean,
-      default: undefined,
-    },
+    pressed?: boolean
     /**
      * The size of the button. `disabled` removes all internal padding allowing
      * the consumer of the component to determine the padding.
      *
      * @default 'medium'
      */
-    size: {
-      type: String as PropType<ButtonSize>,
-      required: true,
-    },
+    size: ButtonSize
     /**
      * Whether the button is disabled. Used alone this will only
      * visually effect the button but will not "truly" disable the
@@ -93,10 +72,7 @@ const VButton = defineComponent({
      *
      * @default false
      */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    disabled?: boolean
     /**
      * Whether the button is focusable when disabled. Should be `false`
      * in almost all cases except when a button needs to be focusable
@@ -105,145 +81,122 @@ const VButton = defineComponent({
      *
      * @default false
      */
-    focusableWhenDisabled: {
-      type: Boolean,
-      default: false,
-    },
+    focusableWhenDisabled?: boolean
     /**
      * The HTML `type` attribute for the button. Ignored if `as` is
      * passed as anything other than `"button"`.
      *
      * @default 'button'
      */
-    type: {
-      type: String as PropType<ButtonType>,
-      default: "button",
-    },
+    type?: ButtonType
     /**
      * Whether the button is connected to another control and needs to have no rounded
      * borders at that edge.
      *
      * @default []
      */
-    connections: {
-      type: Array as PropType<ButtonConnections[]>,
-      default: () => [] as ButtonConnections[],
-    },
+    connections?: ButtonConnections[]
     /**
      * Whether the button has an icon at the inline start of the button.
      *
      * @default false
      */
-    hasIconStart: {
-      type: Boolean,
-      default: false,
-    },
+    hasIconStart?: boolean
     /**
      * Whether the button has an icon at the inline end of the button.
      *
      * @default false
      */
-    hasIconEnd: {
-      type: Boolean,
-      default: false,
-    },
+    hasIconEnd?: boolean
     /**
      * If the button is only an icon, width is set to height, and padding is removed.
      */
-    iconOnly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { attrs }) {
-    const typeAttribute = computed<ButtonType | undefined>(() =>
-      ["VLink", "a"].includes(props.as) ? undefined : props.type
-    )
+    iconOnly?: boolean
+  }>(),
+  {
+    as: "button",
+    disabled: false,
+    focusableWhenDisabled: false,
+    type: "button",
+    connections: () => [],
+    hasIconStart: false,
+    hasIconEnd: false,
+    iconOnly: false,
+  }
+)
 
-    const connectionStyles = computed(() =>
-      props.connections
-        .map((connection) => `connection-${connection}`)
-        .join(" ")
-    )
+const comp = computed(() => (props.as === "VLink" ? VLink : props.as))
 
-    const isActive = computed(() => {
-      return props.pressed || attrs["aria-pressed"] || attrs["aria-expanded"]
-    })
-    const variantClass = computed(() => {
-      if (
-        isActive.value &&
-        ["bordered-white", "transparent-dark"].includes(props.variant)
-      ) {
-        return `${props.variant}-pressed`
-      }
-      return props.variant
-    })
+const attrs = useAttrs()
+const typeAttribute = computed<ButtonType | undefined>(() =>
+  ["VLink", "a"].includes(props.as) ? undefined : props.type
+)
 
-    const isPlainDangerous = computed(() => {
-      return props.variant === "plain--avoid"
-    })
-    const isFocusSlimFilled = computed(() => {
-      return props.variant.startsWith("filled-")
-    })
-    const isFocusSlimTx = computed(() => {
-      return (
-        props.variant.startsWith("bordered-") ||
-        props.variant.startsWith("transparent-") ||
-        props.variant === "plain"
-      )
-    })
+const connectionStyles = computed(() =>
+  props.connections.map((connection) => `connection-${connection}`).join(" ")
+)
 
-    const supportsDisabledAttribute = computed(() => props.as !== "VLink")
+const isActive = computed(() => {
+  return props.pressed || attrs["aria-pressed"] || attrs["aria-expanded"]
+})
+const variantClass = computed(() => {
+  if (
+    isActive.value &&
+    ["bordered-white", "transparent-dark"].includes(props.variant)
+  ) {
+    return `${props.variant}-pressed`
+  }
+  return props.variant
+})
 
-    const ariaDisabled = computed<true | undefined>(
-      () =>
-        // If disabled and focusable then use `aria-disabled` instead of the `disabled` attribute to allow
-        // the button to still be tabbed into by screen reader users
-        (props.disabled && props.focusableWhenDisabled) || undefined
-    )
+const isPlainDangerous = computed(() => {
+  return props.variant === "plain--avoid"
+})
+const isFocusSlimFilled = computed(() => {
+  return props.variant.startsWith("filled-")
+})
+const isFocusSlimTx = computed(() => {
+  return (
+    props.variant.startsWith("bordered-") ||
+    props.variant.startsWith("transparent-") ||
+    props.variant === "plain"
+  )
+})
 
-    const disabledAttribute = computed<true | undefined>(() => {
-      const trulyDisabled = props.disabled && !props.focusableWhenDisabled
+const supportsDisabledAttribute = computed(() => props.as !== "VLink")
 
-      return (trulyDisabled && supportsDisabledAttribute.value) || undefined
-    })
+const ariaDisabled = computed<true | undefined>(
+  () =>
+    // If disabled and focusable then use `aria-disabled` instead of the `disabled` attribute to allow
+    // the button to still be tabbed into by screen reader users
+    (props.disabled && props.focusableWhenDisabled) || undefined
+)
 
-    watch(
-      () => props.as,
-      (as) => {
-        if (
-          ["a", "NuxtLink"].includes(as) &&
-          attrs.href !== `#${skipToContentTargetId}`
-        ) {
-          warn(
-            `Please use \`VLink\` with an \`href\` prop instead of ${as} for the button component`
-          )
-        }
-      },
-      { immediate: true }
-    )
+const disabledAttribute = computed<true | undefined>(() => {
+  const trulyDisabled = props.disabled && !props.focusableWhenDisabled
 
-    return {
-      variantClass,
-      connectionStyles,
-      disabledAttribute,
-      ariaDisabled,
-      typeAttribute,
-      isActive,
+  return (trulyDisabled && supportsDisabledAttribute.value) || undefined
+})
 
-      isPlainDangerous,
-      isFocusSlimFilled,
-      isFocusSlimTx,
+watch(
+  () => props.as,
+  (as) => {
+    if (
+      ["a", "NuxtLink"].includes(as) &&
+      attrs.href !== `#${skipToContentTargetId}`
+    ) {
+      warn(
+        `Please use \`VLink\` with an \`href\` prop instead of ${as} for the button component`
+      )
     }
   },
-})
-
-export default VButton
+  { immediate: true }
+)
 </script>
 
 <template>
   <Component
-    :is="as"
+    :is="comp"
     :type="typeAttribute"
     class="group/button button flex appearance-none items-center justify-center rounded-sm no-underline"
     :class="[
@@ -307,7 +260,7 @@ a.button {
   @apply border-tx bg-default text-default hover:bg-secondary-hover hover:text-over-dark;
 }
 .bordered-white {
-  @apply border-bg-ring bg-default text-default hover:border-transparent-hover;
+  @apply border-bg-ring bg-default text-default hover:border-transparent-hover hover:focus-visible:border-tx;
 }
 .bordered-white-pressed {
   @apply border-tx bg-tertiary text-over-dark hover:border-gray-11 hover:bg-tertiary-hover hover:focus-visible:border-tx;
diff --git a/frontend/src/components/VContentLink/VContentLink.vue b/frontend/src/components/VContentLink/VContentLink.vue
index f708b52fcda..756c3088611 100644
--- a/frontend/src/components/VContentLink/VContentLink.vue
+++ b/frontend/src/components/VContentLink/VContentLink.vue
@@ -1,90 +1,56 @@
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { useAnalytics } from "~/composables/use-analytics"
-
-import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
-import type { SupportedMediaType } from "~/constants/media"
-
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import useSearchType from "~/composables/use-search-type"
-
 import { useHydrating } from "~/composables/use-hydrating"
+import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
+import type { SupportedMediaType } from "~/constants/media"
 
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VContentLink",
-  components: { VIcon, VButton },
-  props: {
-    /**
-     * One of the media types supported.
-     */
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-    /**
-     * Current search term for aria-label.
-     */
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-    /**
-     * The number of results that the search returned. The link
-     * will be disabled if this value is zero.
-     */
-    resultsCount: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * The route target of the link.
-     */
-    to: {
-      type: String,
-    },
-  },
-  emits: {
-    "shift-tab": defineEvent<[KeyboardEvent]>(),
-  },
-  setup(props) {
-    const { getI18nCount, getI18nContentLinkLabel } = useI18nResultsCount()
-    const resultsCountLabel = computed(() => getI18nCount(props.resultsCount))
+const props = defineProps<{
+  mediaType: SupportedMediaType
+  /**
+   * Current search term for aria-label.
+   */
+  searchTerm: string
+  /**
+   * The number of results that the search returned. The link
+   * will be disabled if this value is zero.
+   */
+  resultsCount: number
+  /**
+   * The route target of the link.
+   */
+  to?: string
+}>()
 
-    const resultsAriaLabel = computed(() =>
-      getI18nContentLinkLabel(
-        props.resultsCount,
-        props.searchTerm,
-        props.mediaType
-      )
-    )
+defineEmits<{
+  "shift-tab": [KeyboardEvent]
+}>()
 
-    const { activeType } = useSearchType()
-    const analytics = useAnalytics()
+const { getI18nCount, getI18nContentLinkLabel } = useI18nResultsCount()
+const resultsCountLabel = computed(() => getI18nCount(props.resultsCount))
 
-    const handleClick = () => {
-      analytics.sendCustomEvent("CHANGE_CONTENT_TYPE", {
-        previous: activeType.value,
-        next: props.mediaType,
-        component: "VContentLink",
-      })
-    }
+const resultsAriaLabel = computed(() =>
+  getI18nContentLinkLabel(props.resultsCount, props.searchTerm, props.mediaType)
+)
 
-    const { doneHydrating } = useHydrating()
+const { activeType } = useSearchType({ component: "VContentLink" })
+const { $sendCustomEvent } = useNuxtApp()
 
-    return {
-      resultsCountLabel,
-      resultsAriaLabel,
+const handleClick = () => {
+  $sendCustomEvent("CHANGE_CONTENT_TYPE", {
+    previous: activeType.value,
+    next: props.mediaType,
+    component: "VContentLink",
+  })
+}
 
-      handleClick,
-      doneHydrating,
-    }
-  },
-})
+const { doneHydrating } = useHydrating()
 </script>
 
 <template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
index 228ae4bf5d7..025ab3b68c8 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -1,60 +1,42 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+/**
+ * This is the search type switcher button that appears in the header or the homepage search bar.
+ */
+import { useAttrs } from "vue"
 
 import type { SearchType } from "~/constants/media"
 
 import { warn } from "~/utils/console"
 
-import { defineEvent } from "~/types/emits"
-
 import { useHydrating } from "~/composables/use-hydrating"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
 
-/**
- * This is the search type switcher button that appears in the header or the homepage search bar.
- */
-export default defineComponent({
-  name: "VSearchTypeButton",
-  components: { VButton, VIcon },
-  props: {
+withDefaults(
+  defineProps<{
     /**
      * Whether to show the text label and the chevron down.
      */
-    showLabel: {
-      type: Boolean,
-      default: false,
-    },
-    searchType: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup(_, { attrs }) {
-    if (!attrs["aria-haspopup"] || attrs["aria-expanded"] === undefined) {
-      warn(
-        "You should provide `aria-haspopup` and `aria-expanded` props to VSearchTypeButton."
-      )
-    }
-    const { doneHydrating } = useHydrating()
-
-    return {
-      doneHydrating,
-    }
-  },
-})
+    showLabel?: boolean
+    searchType: SearchType
+    icon: string
+    label: string
+  }>(),
+  {
+    showLabel: false,
+  }
+)
+
+defineEmits<{ click: [] }>()
+
+const attrs = useAttrs()
+if (!attrs["aria-haspopup"] || attrs["aria-expanded"] === undefined) {
+  warn(
+    "You should provide `aria-haspopup` and `aria-expanded` props to VSearchTypeButton."
+  )
+}
+const { doneHydrating } = useHydrating()
 </script>
 
 <template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
index ef2f6f1837a..cda0e096a49 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -1,92 +1,67 @@
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import { BETA, contentStatus, SearchType } from "~/constants/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import useSearchType from "~/composables/use-search-type"
 
-import { defineEvent } from "~/types/emits"
-
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VPill from "~/components/VPill.vue"
 
-export default defineComponent({
-  name: "VSearchTypeItem",
-  components: { VIcon, VItem, VPill },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * The search type to render.
      */
-    item: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
+    item: SearchType
     /**
      * Used for correctly handling keyboard navigation in VItem.
      */
-    isFirst: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Whether the item is selected.
-     */
-    selected: {
-      type: Boolean,
-      default: false,
-    },
+    isFirst?: boolean
+    selected?: boolean
     /**
      * The icon used for the search type.
      */
-    icon: {
-      type: String,
-      required: true,
-    },
+    icon: string
     /**
      * Whether to use a `/search/image/?<query>` link or a button.
      */
-    useLinks: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    click: defineEvent<[SearchType]>(),
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-    const { getSearchTypeProps } = useSearchType()
+    useLinks?: boolean
+  }>(),
+  {
+    isFirst: false,
+    selected: false,
+    useLinks: true,
+  }
+)
 
-    const itemLabelKey = computed(() => getSearchTypeProps(props.item).label)
+defineEmits<{ click: [SearchType] }>()
 
-    /**
-     * Currently, there are no Beta search types, so TS raises an error saying
-     * that this condition will always return false.
-     */
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const isBeta = computed(() => contentStatus[props.item] === BETA)
+const searchStore = useSearchStore()
+const { getSearchTypeProps } = useSearchType({ component: "VSearchTypeItem" })
 
-    const href = computed(() => {
-      if (!props.useLinks || !isSearchTypeSupported(props.item)) {
-        return undefined
-      }
-      return searchStore.getSearchPath({ type: props.item })
-    })
+const itemLabelKey = computed(() => getSearchTypeProps(props.item).label)
 
-    /**
-     * The query sets the filters that are applicable for the specific search type.
-     */
-    const component = computed(() => (props.useLinks ? "VLink" : undefined))
-    return {
-      component,
-      href,
-      isBeta,
-      itemLabelKey,
-    }
-  },
+/**
+ * Currently, there are no Beta search types, so TS raises an error saying
+ * that this condition will always return false.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+const isBeta = computed(() => contentStatus[props.item] === BETA)
+
+const href = computed(() => {
+  if (!props.useLinks || !isSearchTypeSupported(props.item)) {
+    return undefined
+  }
+  return searchStore.getSearchPath({ type: props.item })
 })
+
+/**
+ * The query sets the filters that are applicable for the specific search type.
+ */
+const component = computed(() => (props.useLinks ? "VLink" : undefined))
 </script>
 
 <template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index ed03e1cc7b6..565aeb6c64b 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -27,7 +27,9 @@ const emit = defineEmits<{
 
 const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-const { getSearchTypeProps } = useSearchType()
+const { getSearchTypeProps } = useSearchType({
+  component: "VSearchTypePopover",
+})
 
 const searchTypeProps = computed(() => getSearchTypeProps())
 
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
index 567b97d8b70..22059abecce 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -1,9 +1,8 @@
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import useSearchType from "~/composables/use-search-type"
 import type { SearchType } from "~/constants/media"
-import { defineEvent } from "~/types/emits"
 
 import VItemGroup from "~/components/VItemGroup/VItemGroup.vue"
 import VSearchTypeItem from "~/components/VContentSwitcher/VSearchTypeItem.vue"
@@ -13,67 +12,53 @@ type ContentTypeGroup = {
   items: SearchType[]
 }
 
-export default defineComponent({
-  name: "VSearchTypes",
-  components: { VItemGroup, VSearchTypeItem },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * 'Small' size is used in the popover,
      * 'medium' size is used in the mobile modal.
      */
-    size: {
-      type: String as PropType<"small" | "medium">,
-      default: "small",
-    },
+    size?: "small" | "medium"
     /**
      * Whether to use buttons for search type selection, or links to the specific search type search pages.
      */
-    useLinks: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    select: defineEvent<[SearchType]>(),
-  },
-  setup(props, { emit }) {
-    const content = useSearchType()
-    const bordered = computed(() => props.size === "medium")
+    useLinks?: boolean
+  }>(),
+  {
+    size: "small",
+    useLinks: true,
+  }
+)
 
-    const isActive = (item: SearchType) => item === content.activeType.value
+const emit = defineEmits<{ select: [SearchType] }>()
 
-    const contentTypeGroups = computed<ContentTypeGroup[]>(() => {
-      const base: ContentTypeGroup[] = [
-        {
-          heading: "heading",
-          items: content.types,
-        },
-      ]
+const content = useSearchType({ component: "VSearchTypes" })
+const bordered = computed(() => props.size === "medium")
 
-      if (content.additionalTypes.value.length) {
-        base.push({
-          heading: "additional",
-          items: [...content.additionalTypes.value],
-        })
-      }
+const isActive = (item: SearchType) => item === content.activeType.value
 
-      return base
-    })
+const contentTypeGroups = computed<ContentTypeGroup[]>(() => {
+  const base: ContentTypeGroup[] = [
+    {
+      heading: "heading",
+      items: content.types,
+    },
+  ]
 
-    const selectItem = (item: SearchType) => {
-      content.setActiveType(item)
-      emit("select", item)
-    }
+  if (content.additionalTypes.value.length) {
+    base.push({
+      heading: "additional",
+      items: [...content.additionalTypes.value],
+    })
+  }
 
-    return {
-      content,
-      contentTypeGroups,
-      isActive,
-      bordered,
-      selectItem,
-    }
-  },
+  return base
 })
+
+const selectItem = (item: SearchType) => {
+  content.setActiveType(item)
+  emit("select", item)
+}
 </script>
 
 <template>
diff --git a/frontend/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.js b/frontend/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.js
index 514f6e495b6..79200e17cc4 100644
--- a/frontend/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.js
+++ b/frontend/src/components/VContentSwitcher/meta/VSearchTypeButton.stories.js
@@ -10,7 +10,7 @@ const Template = (args) => ({
   setup() {
     const featureFlagStore = useFeatureFlagStore()
     featureFlagStore.toggleFeature("additional_search_types", "on")
-    const st = useSearchType()
+    const st = useSearchType({ component: "VSearchTypeButton" })
     st.setActiveType(args.searchType)
     args["aria-haspopup"] = "dialog"
     if (args.pressed) {
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
index df42d07dc0c..16a9607acc6 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -47,7 +47,7 @@ const props = withDefaults(
 defineEmits<{ select: [SearchType] }>()
 
 const searchStore = useSearchStore()
-const content = useSearchType()
+const content = useSearchType({ component: "VContentSettingsModalContent" })
 const selectedTab = ref<ContentSettingsTab>("content-settings")
 const changeSelectedTab = (tab: string) => {
   selectedTab.value = tab as ContentSettingsTab
diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue
index b0ea424d624..166b75edfec 100644
--- a/frontend/src/components/VHomepageContent.vue
+++ b/frontend/src/components/VHomepageContent.vue
@@ -38,7 +38,7 @@ const searchTypeButtonRef = ref<InstanceType<typeof VSearchTypeButton> | null>(
 const searchBarRef = ref<InstanceType<typeof VStandaloneSearchBar> | null>(null)
 const nodeRef = computed(() => searchBarRef.value?.$el ?? null)
 
-const { getSearchTypeProps } = useSearchType()
+const { getSearchTypeProps } = useSearchType({ component: "VHomepageContent" })
 const uiStore = useUiStore()
 
 const searchTypeProps = computed(() => getSearchTypeProps())
diff --git a/frontend/src/components/VItemGroup/VItem.vue b/frontend/src/components/VItemGroup/VItem.vue
index c2d88c361e8..905fd1736d9 100644
--- a/frontend/src/components/VItemGroup/VItem.vue
+++ b/frontend/src/components/VItemGroup/VItem.vue
@@ -1,9 +1,11 @@
-<script lang="ts">
-import { defineComponent, inject, ref, computed, watch, PropType } from "vue"
+<script setup lang="ts">
+import { inject, ref, computed, watch, useAttrs } from "vue"
 
 import { warn } from "~/utils/console"
 
 import {
+  type VIemGroupContext,
+  type VIemGroupFocusContext,
   VItemGroupContextKey,
   VItemGroupFocusContextKey,
 } from "~/types/item-group"
@@ -12,105 +14,89 @@ import { VPopoverContentContextKey } from "~/types/provides"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VItem",
-  components: { VButton, VIcon },
-  inheritAttrs: false,
-  props: {
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
     /**
      * Whether the item is selected/checked.
      */
-    selected: {
-      type: Boolean,
-      required: true,
-    },
+    selected: boolean
     /**
      * Whether the item is the first in the group.
      */
-    isFirst: {
-      type: Boolean,
-      required: true,
-    },
+    isFirst: boolean
     /**
      * To change the underlying component for the VButton,
      * pass `as` prop.
      * @variants 'button', 'VLink'
      */
-    as: {
-      type: String as PropType<"button" | "VLink">,
-      default: "button",
-      validator: (val: string) => ["button", "VLink"].includes(val),
-    },
-  },
-  emits: ["click"],
-  setup(props, { attrs }) {
-    const focusContext = inject(VItemGroupFocusContextKey)
-    const isFocused = ref(false)
-    const isInPopover = inject(VPopoverContentContextKey, false)
-    const contextProps = inject(VItemGroupContextKey)
-
-    if (!contextProps || !focusContext) {
-      throw new Error(
-        "Do not use `VItem` outside of a `VItemGroup`. Use `VButton` instead."
-      )
-    }
-
-    if (isInPopover && contextProps.bordered) {
-      warn("Bordered popover items are not supported")
-    }
-
-    if (attrs.size) {
-      warn(
-        "The `size` prop should be passed to the parent `VItemGroup` component."
-      )
-    }
-
-    watch(
-      () => props.selected,
-      (selected, previousSelected) =>
-        focusContext.setSelected(selected, previousSelected)
-    )
-
-    const tabIndex = computed(() => {
-      // If outside a radiogroup then everything can be tabbable in order
-      if (contextProps.type !== "radiogroup") {
-        return 0
-      }
-      // If no items are selected then all can be tabbable to ensure it is possible to enter into the group
-      if (
-        focusContext.selectedCount.value === 0 &&
-        props.isFirst &&
-        !focusContext.isGroupFocused.value
-      ) {
-        return 0
-      }
-      // If this one is focused then it should be the tabbable item
-      if (isFocused.value) {
-        return 0
-      }
-      // If the group is not focused but this is the selected item, then this should be the focusable item when focusing into the group
-      if (!focusContext.isGroupFocused.value && props.selected) {
-        return 0
-      }
-
-      // Otherwise, the item should not be tabbable. The logic above guarantees that at least one other item in the group will be tabbable.
-      return -1
-    })
-
-    const splitAttrs = computed(() => {
-      const { class: classAttrs, ...rest } = attrs
-      return { class: classAttrs, vButtonAttrs: rest }
-    })
-
-    return {
-      contextProps,
-      isInPopover,
-      isFocused,
-      tabIndex,
-      focusContext,
-      splitAttrs,
-    }
-  },
+    as?: "button" | "VLink"
+  }>(),
+  {
+    as: "button",
+  }
+)
+
+defineEmits<{ click: [] }>()
+
+const attrs = useAttrs()
+const injectedFocusContext = inject(VItemGroupFocusContextKey)
+const isFocused = ref(false)
+const isInPopover = inject(VPopoverContentContextKey, false)
+const injectedContextProps = inject(VItemGroupContextKey)
+
+if (!injectedContextProps || !injectedFocusContext) {
+  throw new Error(
+    "Do not use `VItem` outside of a `VItemGroup`. Use `VButton` instead."
+  )
+}
+const contextProps = injectedContextProps as VIemGroupContext
+const focusContext = injectedFocusContext as VIemGroupFocusContext
+
+if (isInPopover && contextProps.bordered) {
+  warn("Bordered popover items are not supported")
+}
+
+if (attrs.size) {
+  warn("The `size` prop should be passed to the parent `VItemGroup` component.")
+}
+
+watch(
+  () => props.selected,
+  (selected, previousSelected) =>
+    focusContext.setSelected(selected, previousSelected)
+)
+
+const tabIndex = computed(() => {
+  // If outside a radiogroup then everything can be tabbable in order
+  if (contextProps.type !== "radiogroup") {
+    return 0
+  }
+  // If no items are selected then all can be tabbable to ensure it is possible to enter into the group
+  if (
+    focusContext.selectedCount.value === 0 &&
+    props.isFirst &&
+    !focusContext.isGroupFocused.value
+  ) {
+    return 0
+  }
+  // If this one is focused then it should be the tabbable item
+  if (isFocused.value) {
+    return 0
+  }
+  // If the group is not focused but this is the selected item, then this should be the focusable item when focusing into the group
+  if (!focusContext.isGroupFocused.value && props.selected) {
+    return 0
+  }
+
+  // Otherwise, the item should not be tabbable. The logic above guarantees that at least one other item in the group will be tabbable.
+  return -1
+})
+
+const splitAttrs = computed(() => {
+  const { class: classAttrs, ...rest } = attrs
+  return { class: classAttrs, vButtonAttrs: rest }
 })
 </script>
 
diff --git a/frontend/src/components/VItemGroup/VItemGroup.vue b/frontend/src/components/VItemGroup/VItemGroup.vue
index f26656fa00d..027f4674a86 100644
--- a/frontend/src/components/VItemGroup/VItemGroup.vue
+++ b/frontend/src/components/VItemGroup/VItemGroup.vue
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
-import { defineComponent, provide, ref, readonly, PropType } from "vue"
+import { provide, ref, readonly } from "vue"
 
 import { keycodes } from "~/constants/key-codes"
 import { ensureFocus } from "~/utils/reakit-utils/focus"
@@ -11,9 +11,6 @@ import type {
   ItemGroupType,
 } from "~/types/item-group"
 import {
-  itemGroupDirections,
-  itemGroupSizes,
-  itemGroupTypes,
   VItemGroupContextKey,
   VItemGroupFocusContextKey,
 } from "~/types/item-group"
@@ -25,30 +22,21 @@ const arrows = [
   keycodes.ArrowRight,
 ]
 
-export default defineComponent({
-  name: "VItemGroup",
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * The direction to render the items in.
      *
      * @default 'vertical'
      */
-    direction: {
-      type: String as PropType<ItemGroupDirection>,
-      default: "vertical",
-      validate: (v: string) =>
-        (itemGroupDirections as unknown as string[]).includes(v),
-    },
+    direction?: ItemGroupDirection
     /**
      * Whether to render a bordered, separated list of items. When false each
      * item will have whitespace separating them instead of borders.
      *
      * @default true
      */
-    bordered: {
-      type: Boolean,
-      default: true,
-    },
+    bordered?: boolean
     /**
      * The type of item group and item to render. This directly affects the `role` attribute
      * of the container and the items themselves.
@@ -60,122 +48,107 @@ export default defineComponent({
      * `radiogroup` should be used when providing a menu of options where only one can be selected at a time.
      *
      * @see https://www.w3.org/TR/wai-aria-1.1/#radiogroup
-     *
-     * @default 'menu'
      */
-    type: {
-      type: String as PropType<ItemGroupType>,
-      default: "menu",
-      validate: (v: string) =>
-        (itemGroupTypes as unknown as string[]).includes(v),
-    },
+    type?: ItemGroupType
     /**
      * Size of the item group corresponds to the size of the component.
-     *
-     * @default 'small'
      */
-    size: {
-      type: String as PropType<ItemGroupSize>,
-      default: "small",
-      validate: (v: string) =>
-        (itemGroupSizes as unknown as string[]).includes(v),
-    },
+    size?: ItemGroupSize
     /**
      * Whether to show a checkmark when an item is selected.
-     *
-     * @default true
-     */
-    showCheck: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup(props) {
-    const nodeRef = ref<HTMLElement | null>(null)
-    const isFocused = ref(false)
-    provide(VItemGroupContextKey, props)
-
-    const i18n = useNuxtApp().$i18n
-
-    /**
-     * When the item group is horizontal, we need to "reverse" the behavior of the left and right arrow keys for RTL locales
-     * because the DOM order gets reversed to be opposite the visual order relative to left/right movement.
-     *
-     * For vertical locales it should remain the same.
-     * @param ltr
-     * @param rtl
      */
-    const resolveArrow = (ltr: string, rtl: string) => {
-      return i18n.localeProperties.value.dir === "rtl" &&
-        props.direction === "horizontal"
-        ? rtl
-        : ltr
-    }
-
-    const onItemKeyPress = (event: KeyboardEvent): undefined | number => {
-      if (!(arrows as string[]).includes(event.key) || !nodeRef.value) {
-        return
-      }
-
-      event.preventDefault()
-
-      const target = event.target
-
-      // While VItem ultimately renders a button at the moment, that could change in the future, so using a data attribute selector makes it more flexible for the future
-      const items = Array.from<HTMLElement>(
-        nodeRef.value?.querySelectorAll("[data-item-group-item]")
-      )
-
-      const targetIndex = items.findIndex((item) => item === target)
-
-      switch (event.key) {
-        case keycodes.ArrowUp:
-        case resolveArrow(keycodes.ArrowLeft, keycodes.ArrowRight): {
-          if (targetIndex === 0) {
-            return ensureFocus(items[items.length - 1])
-          }
-          return ensureFocus(items[targetIndex - 1])
-        }
-        case keycodes.ArrowDown:
-        case resolveArrow(keycodes.ArrowRight, keycodes.ArrowLeft): {
-          if (targetIndex === items.length - 1) {
-            return ensureFocus(items[0])
-          }
-          return ensureFocus(items[targetIndex + 1])
-        }
-        default: {
-          return
-        }
+    showCheck?: boolean
+  }>(),
+  {
+    direction: "vertical",
+    bordered: true,
+    type: "menu",
+    size: "small",
+    showCheck: true,
+  }
+)
+
+const nodeRef = ref<HTMLElement | null>(null)
+const isFocused = ref(false)
+provide(VItemGroupContextKey, props)
+
+const i18n = useNuxtApp().$i18n
+
+/**
+ * When the item group is horizontal, we need to "reverse" the behavior of the left and right arrow keys for RTL locales
+ * because the DOM order gets reversed to be opposite the visual order relative to left/right movement.
+ *
+ * For vertical locales it should remain the same.
+ * @param ltr
+ * @param rtl
+ */
+const resolveArrow = (ltr: string, rtl: string) => {
+  return i18n.localeProperties.value.dir === "rtl" &&
+    props.direction === "horizontal"
+    ? rtl
+    : ltr
+}
+
+const onItemKeyPress = (event: KeyboardEvent): undefined | number => {
+  if (!(arrows as string[]).includes(event.key) || !nodeRef.value) {
+    return
+  }
+
+  event.preventDefault()
+
+  const target = event.target
+
+  // While VItem ultimately renders a button at the moment, that could change in the future, so using a data attribute selector makes it more flexible for the future
+  const items = Array.from<HTMLElement>(
+    nodeRef.value?.querySelectorAll("[data-item-group-item]")
+  )
+
+  const targetIndex = items.findIndex((item) => item === target)
+
+  switch (event.key) {
+    case keycodes.ArrowUp:
+    case resolveArrow(keycodes.ArrowLeft, keycodes.ArrowRight): {
+      if (targetIndex === 0) {
+        return ensureFocus(items[items.length - 1])
       }
+      return ensureFocus(items[targetIndex - 1])
     }
-
-    const selectedCount = ref(0)
-
-    /**
-     * @param selected
-     * @param previousSelected
-     */
-    const setSelected = (selected: boolean, previousSelected: boolean) => {
-      if (previousSelected && !selected) {
-        selectedCount.value -= 1
-      }
-      if (!previousSelected && selected) {
-        selectedCount.value += 1
+    case keycodes.ArrowDown:
+    case resolveArrow(keycodes.ArrowRight, keycodes.ArrowLeft): {
+      if (targetIndex === items.length - 1) {
+        return ensureFocus(items[0])
       }
+      return ensureFocus(items[targetIndex + 1])
     }
-
-    const focusContext = {
-      isGroupFocused: readonly(isFocused),
-      onItemKeyPress,
-      selectedCount: readonly(selectedCount),
-      setSelected,
+    default: {
+      return
     }
-
-    provide(VItemGroupFocusContextKey, focusContext)
-
-    return { isFocused, nodeRef }
-  },
-})
+  }
+}
+
+const selectedCount = ref(0)
+
+/**
+ * @param selected
+ * @param previousSelected
+ */
+const setSelected = (selected: boolean, previousSelected: boolean) => {
+  if (previousSelected && !selected) {
+    selectedCount.value -= 1
+  }
+  if (!previousSelected && selected) {
+    selectedCount.value += 1
+  }
+}
+
+const focusContext = {
+  isGroupFocused: readonly(isFocused),
+  onItemKeyPress,
+  selectedCount: readonly(selectedCount),
+  setSelected,
+}
+
+provide(VItemGroupFocusContextKey, focusContext)
 </script>
 
 <template>
diff --git a/frontend/src/components/VLogoLoader/VLogoLoader.vue b/frontend/src/components/VLogoLoader/VLogoLoader.vue
index 088097ddb34..74bf106bcb0 100644
--- a/frontend/src/components/VLogoLoader/VLogoLoader.vue
+++ b/frontend/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,22 +1,16 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
+<script setup lang="ts">
 import { useReducedMotion } from "~/composables/use-reduced-motion"
 
-export default defineComponent({
-  name: "VLogoLoader",
-  props: {
-    status: {
-      type: String as PropType<"loading" | "idle">,
-      default: "idle",
-    },
-  },
-  setup() {
-    const prefersReducedMotion = useReducedMotion()
-
-    return { prefersReducedMotion }
-  },
-})
+withDefaults(
+  defineProps<{
+    status: "loading" | "idle"
+  }>(),
+  {
+    status: "idle",
+  }
+)
+
+const prefersReducedMotion = useReducedMotion()
 </script>
 
 <template>
diff --git a/frontend/src/components/VTabs/VTab.vue b/frontend/src/components/VTabs/VTab.vue
index 236bf89c216..9556519d75f 100644
--- a/frontend/src/components/VTabs/VTab.vue
+++ b/frontend/src/components/VTabs/VTab.vue
@@ -1,183 +1,153 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onMounted,
-  onUnmounted,
-  type PropType,
-  ref,
-} from "vue"
-
-import { tabsContextKey } from "~/types/tabs"
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref } from "vue"
+
+import { tabsContextKey, type TabsState } from "~/types/tabs"
 import { keycodes } from "~/constants/key-codes"
 import { getDomElement } from "~/utils/dom"
 import { Focus, focusIn } from "~/utils/focus-management"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VTab",
-  components: { VButton },
-  props: {
-    /**
-     * Whether the tab is disabled. TODO: do we really need disabled tabs?
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+const props = withDefaults(
+  defineProps<{
     /**
      * Tab id should be the same as the id of the tabpanel it controls.
      * The id of the HTML element will be `tab-${id}`
      */
-    id: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: String as PropType<"default" | "large" | "medium">,
-      default: "default",
-    },
-  },
-  setup(props) {
-    const tabContext = inject(tabsContextKey)
-    if (!tabContext) {
-      throw new Error(`Could not resolve tabContext in VTab`)
-    }
+    id: string
+    /**
+     * Whether the tab is disabled. TODO: do we really need disabled tabs?
+     */
+    disabled?: boolean
+    size?: "default" | "large" | "medium"
+  }>(),
+  {
+    disabled: false,
+    size: "default",
+  }
+)
+
+const injectedTabContext = inject(tabsContextKey)
+if (!injectedTabContext) {
+  throw new Error(`Could not resolve tabContext in VTab`)
+}
+const tabContext = injectedTabContext as TabsState
 
-    const internalTabRef = ref<HTMLElement | null>(null)
+const internalTabRef = ref<HTMLElement | null>(null)
 
-    onMounted(() => tabContext.registerTab(internalTabRef))
-    onUnmounted(() => tabContext.unregisterTab(internalTabRef))
+onMounted(() => tabContext.registerTab(internalTabRef))
+onUnmounted(() => tabContext.unregisterTab(internalTabRef))
 
-    const isSelected = computed(() => tabContext.selectedId.value === props.id)
+const isSelected = computed(() => tabContext.selectedId.value === props.id)
 
-    const handleFocus = () => {
-      if (props.disabled) {
-        return
-      }
-      if (tabContext.activation.value === "auto") {
-        tabContext.setSelectedId(props.id)
-      }
-      getDomElement(internalTabRef)?.focus()
-    }
+const handleFocus = () => {
+  if (props.disabled) {
+    return
+  }
+  if (tabContext.activation.value === "auto") {
+    tabContext.setSelectedId(props.id)
+  }
+  getDomElement(internalTabRef)?.focus()
+}
 
-    const handleSelection = () => {
-      if (props.disabled) {
-        return
-      }
-      getDomElement(internalTabRef)?.focus()
-      tabContext.setSelectedId(props.id)
-    }
+const handleSelection = () => {
+  if (props.disabled) {
+    return
+  }
+  getDomElement(internalTabRef)?.focus()
+  tabContext.setSelectedId(props.id)
+}
 
-    /**
+/**
      * On click, you get a `focus` and then a `click` event. We want to only focus
      * _after_ the click event is finished(mouseup), or when the tab gets focus.
 
      * @param event - we want to preventDefault for this mouse event
      */
-    const handleMouseDown = (event: MouseEvent) => {
-      event.preventDefault()
-    }
+const handleMouseDown = (event: MouseEvent) => {
+  event.preventDefault()
+}
 
-    /**
-     * Sets the direction where to move focus considering the document direction (ltr or rtl).
-     * The directions for LTR are the opposite of RTL directions.
-     * @param arrowKeyCode - the code of key pressed, right or left arrow
-     * @param documentDir - the dir attribute of the current document.
-     */
-    const getFocusDirection = (
-      arrowKeyCode: typeof keycodes.ArrowRight | typeof keycodes.ArrowLeft,
-      documentDir?: string
-    ) => {
-      let forward = arrowKeyCode === keycodes.ArrowRight
-      if (documentDir === "rtl") {
-        forward = !forward
-      }
-      return forward ? Focus.Next : Focus.Previous
+/**
+ * Sets the direction where to move focus considering the document direction (ltr or rtl).
+ * The directions for LTR are the opposite of RTL directions.
+ * @param arrowKeyCode - the code of key pressed, right or left arrow
+ * @param documentDir - the dir attribute of the current document.
+ */
+const getFocusDirection = (
+  arrowKeyCode: typeof keycodes.ArrowRight | typeof keycodes.ArrowLeft,
+  documentDir?: string
+) => {
+  let forward = arrowKeyCode === keycodes.ArrowRight
+  if (documentDir === "rtl") {
+    forward = !forward
+  }
+  return forward ? Focus.Next : Focus.Previous
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  let list = tabContext.tabs.value
+    .map((tab) => getDomElement(tab))
+    .filter(Boolean) as HTMLElement[]
+  const tabControlKeys = [
+    keycodes.Spacebar,
+    keycodes.Enter,
+    keycodes.Home,
+    keycodes.PageUp,
+    keycodes.End,
+    keycodes.PageDown,
+    keycodes.ArrowLeft,
+    keycodes.ArrowRight,
+  ] as string[]
+
+  if (!tabControlKeys.includes(event.key)) {
+    return
+  }
+  event.preventDefault()
+  event.stopPropagation()
+
+  switch (event.key) {
+    case keycodes.Spacebar:
+    case keycodes.Enter: {
+      tabContext.setSelectedId(props.id)
+      break
+    }
+    case keycodes.Home:
+    case keycodes.PageUp: {
+      focusIn(list, Focus.First)
+      break
     }
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      let list = tabContext.tabs.value
-        .map((tab) => getDomElement(tab))
-        .filter(Boolean) as HTMLElement[]
-      const tabControlKeys = [
-        keycodes.Spacebar,
-        keycodes.Enter,
-        keycodes.Home,
-        keycodes.PageUp,
-        keycodes.End,
-        keycodes.PageDown,
-        keycodes.ArrowLeft,
-        keycodes.ArrowRight,
-      ] as string[]
-
-      if (!tabControlKeys.includes(event.key)) {
-        return
-      }
-      event.preventDefault()
-      event.stopPropagation()
-
-      switch (event.key) {
-        case keycodes.Spacebar:
-        case keycodes.Enter: {
-          tabContext.setSelectedId(props.id)
-          break
-        }
-        case keycodes.Home:
-        case keycodes.PageUp: {
-          focusIn(list, Focus.First)
-          break
-        }
-
-        case keycodes.End:
-        case keycodes.PageDown: {
-          focusIn(list, Focus.Last)
-          break
-        }
-        case keycodes.ArrowLeft: {
-          focusIn(
-            list,
-            getFocusDirection(keycodes.ArrowLeft, document.dir) |
-              Focus.WrapAround
-          )
-          break
-        }
-
-        case keycodes.ArrowRight: {
-          focusIn(
-            list,
-            getFocusDirection(keycodes.ArrowRight, document.dir) |
-              Focus.WrapAround
-          )
-          break
-        }
-      }
+    case keycodes.End:
+    case keycodes.PageDown: {
+      focusIn(list, Focus.Last)
+      break
+    }
+    case keycodes.ArrowLeft: {
+      focusIn(
+        list,
+        getFocusDirection(keycodes.ArrowLeft, document.dir) | Focus.WrapAround
+      )
+      break
     }
 
-    const tabProps = computed(() => ({
-      "aria-controls": `panel-${props.id}`,
-      "aria-selected": isSelected.value,
-      disabled: props.disabled ? true : undefined,
-    }))
-
-    const isManual = computed(() => tabContext.activation.value === "manual")
-
-    return {
-      internalTabRef,
-      tabProps,
-      isSelected,
-      isManual,
-      variant: tabContext.variant,
-
-      handleKeyDown,
-      handleFocus,
-      handleMouseDown,
-      handleSelection,
+    case keycodes.ArrowRight: {
+      focusIn(
+        list,
+        getFocusDirection(keycodes.ArrowRight, document.dir) | Focus.WrapAround
+      )
+      break
     }
-  },
-})
+  }
+}
+
+const tabProps = computed(() => ({
+  "aria-controls": `panel-${props.id}`,
+  "aria-selected": isSelected.value,
+  disabled: props.disabled ? true : undefined,
+}))
+
+const variant = computed(() => tabContext.variant.value)
 </script>
 
 <template>
diff --git a/frontend/src/components/VTabs/VTabPanel.vue b/frontend/src/components/VTabs/VTabPanel.vue
index b9a8ba7930a..92a0d5b4002 100644
--- a/frontend/src/components/VTabs/VTabPanel.vue
+++ b/frontend/src/components/VTabs/VTabPanel.vue
@@ -1,65 +1,39 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onMounted,
-  onUnmounted,
-  ref,
-} from "vue"
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref } from "vue"
 
 import { tabsContextKey } from "~/types/tabs"
 
-export default defineComponent({
-  name: "VTabPanel",
-  props: {
-    /**
-     * Tabpanel id should be the same as the controlling tab id.
-     * The id of the HTML element will be `panel-${id}`
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const tabContext = inject(tabsContextKey)
-    if (!tabContext) {
-      throw new Error(`Could not resolve tabContext in VTabPanel`)
-    }
-    const internalPanelRef = ref(null)
-
-    onMounted(() => {
-      tabContext.registerPanel(internalPanelRef)
-    })
-    onUnmounted(() => tabContext.unregisterPanel(internalPanelRef))
-
-    const panelIndex = computed(() =>
-      tabContext.panels.value.indexOf(internalPanelRef)
-    )
-
-    /**
-     * On SSR, when internalPanelRef is null, we determine if the Panel is selected
-     * by its id. It is selected if it's equal the VTabs' selectedId.
-     * After VTabs had mounted, the panels and tabs are registered and `selected`
-     * status is managed by the `tabContext`.
-     */
-    const isSelected = computed(() => props.id === tabContext.selectedId.value)
-
-    const panelVariantStyle = computed(() =>
-      tabContext.variant.value === "bordered"
-        ? "border rounded-sm first:rounded-ss-none"
-        : "border-t"
-    )
-
-    return {
-      internalPanelRef,
-      isSelected,
-      panelVariantStyle,
-      panelIndex,
-    }
-  },
+const props = defineProps<{
+  /**
+   * Tabpanel id should be the same as the controlling tab id.
+   * The id of the HTML element will be `panel-${id}`
+   */
+  id: string
+}>()
+const tabContext = inject(tabsContextKey)
+if (!tabContext) {
+  throw new Error(`Could not resolve tabContext in VTabPanel`)
+}
+const internalPanelRef = ref(null)
+
+onMounted(() => {
+  tabContext.registerPanel(internalPanelRef)
 })
+onUnmounted(() => tabContext.unregisterPanel(internalPanelRef))
+
+/**
+ * On SSR, when internalPanelRef is null, we determine if the Panel is selected
+ * by its id. It is selected if it's equal the VTabs' selectedId.
+ * After VTabs had mounted, the panels and tabs are registered and `selected`
+ * status is managed by the `tabContext`.
+ */
+const isSelected = computed(() => props.id === tabContext.selectedId.value)
+
+const panelVariantStyle = computed(() =>
+  tabContext.variant.value === "bordered"
+    ? "border rounded-sm first:rounded-ss-none"
+    : "border-t"
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VTabs/VTabs.vue b/frontend/src/components/VTabs/VTabs.vue
index 43b70851174..82621c17a7d 100644
--- a/frontend/src/components/VTabs/VTabs.vue
+++ b/frontend/src/components/VTabs/VTabs.vue
@@ -1,9 +1,8 @@
-<script lang="ts">
-import { computed, defineComponent, PropType, provide, ref } from "vue"
+<script setup lang="ts">
+import { computed, provide, ref } from "vue"
 
 import { tabsContextKey } from "~/types/tabs"
 import type { TabsState, TabVariant } from "~/types/tabs"
-import { defineEvent } from "~/types/emits"
 
 /**
  * VTabs is an accessible implementation of tabs component that displays one panel at a time.
@@ -15,9 +14,8 @@ import { defineEvent } from "~/types/emits"
  *
  * To link the VTab to VTabPanel, make sure to pass the same `id` to both.
  */
-export default defineComponent({
-  name: "VTabs",
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * Accessible name label to use for the tablist.
      *
@@ -27,106 +25,86 @@ export default defineComponent({
      * If there are no existing elements that can be used as a label, pass a translated
      * string to be used as `aria-label`.
      */
-    label: {
-      type: String,
-      required: true,
-    },
+    label: string
     /**
      * By default, the tab panels are activated when the corresponding tabs are focused on.
      * If the tabs require expensive calculations or fetch data from the network, set manual
      * to true to only activate the tab panels after user clicks `Enter` or `Space` on the focused
      * tab.
      */
-    manual: {
-      type: Boolean,
-      default: false,
-    },
+    manual?: boolean
     /**
      * `bordered` tabs have a border around the tab panel, and around the selected tab.
      * `plain` tabs only have a line under the tabs, and a thicker line under the selected tab.
      */
-    variant: {
-      type: String as PropType<TabVariant>,
-      default: "bordered",
-    },
+    variant?: TabVariant
     /**
      * To ensure that a panel is visible on SSR, before we can run `onMounted` hook to register panel.
      */
-    selectedId: {
-      type: String,
-      required: true,
-    },
+    selectedId: string
     /**
      * The classes to pass to the div wrapping VTabs.
      */
-    tablistStyle: {
-      type: String,
-      default: "",
-    },
+    tablistStyle?: string
+  }>(),
+  {
+    manual: false,
+    variant: "bordered",
+    tabListStyle: "",
+  }
+)
+const emit = defineEmits<{
+  change: [string]
+  close: []
+}>()
+
+const selectedId = ref<TabsState["selectedId"]["value"]>(props.selectedId)
+const tabs = ref<TabsState["tabs"]["value"]>([])
+const panels = ref<TabsState["panels"]["value"]>([])
+
+const tabGroupContext: TabsState = {
+  selectedId,
+  activation: computed(() => (props.manual ? "manual" : "auto")),
+  variant: computed(() => props.variant),
+  tabs,
+  panels,
+  setSelectedId(id: string) {
+    if (selectedId.value === id) {
+      return
+    }
+    selectedId.value = id
+    emit("change", id)
   },
-  emits: {
-    change: defineEvent<[string]>(),
-    close: defineEvent(),
+  registerTab(tab: (typeof tabs)["value"][number]) {
+    if (!tabs.value.includes(tab)) {
+      tabs.value.push(tab)
+    }
   },
-  setup(props, { emit }) {
-    const selectedId = ref<TabsState["selectedId"]["value"]>(props.selectedId)
-    const tabs = ref<TabsState["tabs"]["value"]>([])
-    const panels = ref<TabsState["panels"]["value"]>([])
-    const closeButtonRef = ref<HTMLElement | null>(null)
-
-    const tabGroupContext: TabsState = {
-      selectedId,
-      activation: computed(() => (props.manual ? "manual" : "auto")),
-      variant: computed(() =>
-        props.variant === "bordered" ? "bordered" : "plain"
-      ),
-      tabs,
-      panels,
-      setSelectedId(id: string) {
-        if (selectedId.value === id) {
-          return
-        }
-        selectedId.value = id
-        emit("change", id)
-      },
-      registerTab(tab: (typeof tabs)["value"][number]) {
-        if (!tabs.value.includes(tab)) {
-          tabs.value.push(tab)
-        }
-      },
-      unregisterTab(tab: (typeof tabs)["value"][number]) {
-        let idx = tabs.value.indexOf(tab)
-        if (idx !== -1) {
-          tabs.value.splice(idx, 1)
-        }
-      },
-      registerPanel(panel: (typeof panels)["value"][number]) {
-        if (!panels.value.includes(panel)) {
-          panels.value.push(panel)
-        }
-      },
-      unregisterPanel(panel: (typeof panels)["value"][number]) {
-        let idx = panels.value.indexOf(panel)
-        if (idx !== -1) {
-          panels.value.splice(idx, 1)
-        }
-      },
+  unregisterTab(tab: (typeof tabs)["value"][number]) {
+    let idx = tabs.value.indexOf(tab)
+    if (idx !== -1) {
+      tabs.value.splice(idx, 1)
     }
-    provide(tabsContextKey, tabGroupContext)
-
-    const accessibleLabel = computed(() =>
-      props.label.startsWith("#")
-        ? { "aria-labelledby": props.label.slice(1) }
-        : { "aria-label": props.label }
-    )
-
-    return {
-      accessibleLabel,
-      selectedTabId: tabGroupContext.selectedId,
-      closeButtonRef,
+  },
+  registerPanel(panel: (typeof panels)["value"][number]) {
+    if (!panels.value.includes(panel)) {
+      panels.value.push(panel)
     }
   },
-})
+  unregisterPanel(panel: (typeof panels)["value"][number]) {
+    let idx = panels.value.indexOf(panel)
+    if (idx !== -1) {
+      panels.value.splice(idx, 1)
+    }
+  },
+}
+provide(tabsContextKey, tabGroupContext)
+
+const accessibleLabel = computed(() =>
+  props.label.startsWith("#")
+    ? { "aria-labelledby": props.label.slice(1) }
+    : { "aria-label": props.label }
+)
 </script>
 
 <template>
diff --git a/frontend/src/composables/use-component-name.ts b/frontend/src/composables/use-component-name.ts
deleted file mode 100644
index 0e2259fbaf5..00000000000
--- a/frontend/src/composables/use-component-name.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { getCurrentInstance } from "vue"
-
-/**
- * Retrieve the name of the component in which
- * the composable is being used.
- */
-export const useComponentName = () => {
-  const vm = getCurrentInstance()
-  return vm?.proxy?.$options.name ?? "Unknown"
-}
diff --git a/frontend/src/composables/use-search-type.ts b/frontend/src/composables/use-search-type.ts
index 00814ae1f80..bf18b556c10 100644
--- a/frontend/src/composables/use-search-type.ts
+++ b/frontend/src/composables/use-search-type.ts
@@ -10,16 +10,12 @@ import {
   VIDEO,
   additionalSearchTypes,
   supportedSearchTypes,
-  SearchType,
+  type SearchType,
 } from "~/constants/media"
 
 import { useSearchStore } from "~/stores/search"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
-import { useAnalytics } from "~/composables/use-analytics"
-
-import { useComponentName } from "./use-component-name"
-
 const icons = {
   [ALL_MEDIA]: "all",
   [AUDIO]: "audio",
@@ -36,10 +32,13 @@ const labels = {
   [MODEL_3D]: "searchType.model3d",
 } as const
 
-export default function useSearchType() {
-  const { t } = useNuxtApp().$i18n
-  const componentName = useComponentName()
-  const analytics = useAnalytics()
+export default function useSearchType({
+  component = "Unknown",
+}: { component?: string } = {}) {
+  const {
+    $i18n: { t },
+    $sendCustomEvent,
+  } = useNuxtApp()
 
   const activeType = computed<SearchType>(() => {
     return useSearchStore().searchType
@@ -61,10 +60,10 @@ export default function useSearchType() {
       return
     }
 
-    analytics.sendCustomEvent("CHANGE_CONTENT_TYPE", {
+    $sendCustomEvent("CHANGE_CONTENT_TYPE", {
       previous: previousSearchType.value,
       next: searchType,
-      component: componentName,
+      component,
     })
 
     // `setActiveType` is called after the search middleware
diff --git a/frontend/test/unit/specs/components/loading-icon.spec.js b/frontend/test/unit/specs/components/loading-icon.spec.js
deleted file mode 100644
index 002abb6258e..00000000000
--- a/frontend/test/unit/specs/components/loading-icon.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { screen } from "@testing-library/vue"
-
-import { render } from "~~/test/unit/test-utils/render"
-
-import LoadingIcon from "~/components/LoadingIcon.vue"
-
-describe("LoadingIcon", () => {
-  it("should render correct contents", async () => {
-    await render(LoadingIcon)
-    expect(screen.getByTestId("lds-ring")).toBeDefined()
-  })
-})