diff --git a/frontend/src/components/VBanner/VAnalyticsNotice.vue b/frontend/src/components/VBanner/VAnalyticsNotice.vue
index 64c1c24d61a..f806e67c3ed 100644
--- a/frontend/src/components/VBanner/VAnalyticsNotice.vue
+++ b/frontend/src/components/VBanner/VAnalyticsNotice.vue
@@ -1,28 +1,17 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useLocalePath } from "#imports"
 
-import { computed, defineComponent } from "vue"
-
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
-export default defineComponent({
-  name: "VAnalyticsNotice",
-  components: { VLink, VNotificationBanner },
-  emits: {
-    close: defineEvent(),
-  },
-  setup() {
-    const localePath = useLocalePath()
-    const privacyPath = computed(() => localePath("/privacy"))
+defineEmits<{
+  close: []
+}>()
 
-    return {
-      privacyPath,
-    }
-  },
-})
+const localePath = useLocalePath()
+const privacyPath = computed(() => localePath("/privacy"))
 </script>
 
 <template>
diff --git a/frontend/src/components/VBanner/VBanners.vue b/frontend/src/components/VBanner/VBanners.vue
index 41582ecdb84..7056d903c4a 100644
--- a/frontend/src/components/VBanner/VBanners.vue
+++ b/frontend/src/components/VBanner/VBanners.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, useNuxtApp } from "#imports"
+<script setup lang="ts">
+import { defineAsyncComponent, useNuxtApp } from "#imports"
 
 import { computed } from "vue"
 
@@ -10,58 +10,40 @@ import type { TranslationBannerId, BannerId } from "~/types/banners"
 
 import type { LocaleObject } from "@nuxtjs/i18n"
 
-export default defineComponent({
-  name: "VBanners",
-  components: {
-    VTranslationStatusBanner: defineAsyncComponent(
-      () => import("~/components/VBanner/VTranslationStatusBanner.vue")
-    ),
-    VAnalyticsNotice: defineAsyncComponent(
-      () => import("~/components/VBanner/VAnalyticsNotice.vue")
-    ),
-  },
-  setup() {
-    const uiStore = useUiStore()
-    const localeProperties = useNuxtApp().$i18n.localeProperties
+const VTranslationStatusBanner = defineAsyncComponent(
+  () => import("~/components/VBanner/VTranslationStatusBanner.vue")
+)
+const VAnalyticsNotice = defineAsyncComponent(
+  () => import("~/components/VBanner/VAnalyticsNotice.vue")
+)
+const uiStore = useUiStore()
+const localeProperties = useNuxtApp().$i18n.localeProperties
 
-    const shouldShowTranslationBanner = computed(() =>
-      uiStore.shouldShowTranslationBanner(
-        localeProperties.value as LocaleObject
-      )
-    )
-    const shouldShowAnalyticsBanner = computed(
-      () => uiStore.shouldShowAnalyticsBanner
-    )
+const shouldShowTranslationBanner = computed(() =>
+  uiStore.shouldShowTranslationBanner(localeProperties.value as LocaleObject)
+)
+const shouldShowAnalyticsBanner = computed(
+  () => uiStore.shouldShowAnalyticsBanner
+)
 
-    const translationBannerId = computed<TranslationBannerId>(
-      () => `translation-${localeProperties.value.code}`
-    )
+const translationBannerId = computed<TranslationBannerId>(
+  () => `translation-${localeProperties.value.code}`
+)
 
-    const { current: currentPage } = usePages()
-    const variant = computed(() =>
-      ["", "index"].includes(currentPage.value) ? "dark" : "regular"
-    )
+const { current: currentPage } = usePages()
+const variant = computed(() =>
+  ["", "index"].includes(currentPage.value) ? "dark" : "regular"
+)
 
-    const dismissBanner = (bannerKey: BannerId) => {
-      uiStore.dismissBanner(bannerKey)
-    }
+const dismissBanner = (bannerKey: BannerId) => {
+  uiStore.dismissBanner(bannerKey)
+}
 
-    const showBanners = computed(() =>
-      [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
-        (item) => item.value
-      )
-    )
-
-    return {
-      translationBannerId,
-      shouldShowTranslationBanner,
-      shouldShowAnalyticsBanner,
-      showBanners,
-      dismissBanner,
-      variant,
-    }
-  },
-})
+const showBanners = computed(() =>
+  [shouldShowTranslationBanner, shouldShowAnalyticsBanner].some(
+    (item) => item.value
+  )
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index 87315394b48..460851a74da 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -1,99 +1,77 @@
-<script lang="ts">
-import { defineComponent, PropType, computed } from "vue"
-
-import { defineEvent } from "~/types/emits"
+<script setup lang="ts">
+/**
+ * Display a banner that can indicate one of four semantics in one of two color
+ * variants.
+ */
+import { computed } from "vue"
 
 import type { BannerId } from "~/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-import type { TranslateResult } from "vue-i18n"
-
-/**
- * Display a banner that can indicate one of four semantics in one of two color
- * variants.
- */
-export default defineComponent({
-  name: "VNotificationBanner",
-  components: {
-    VIconButton,
-    VIcon,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * the semantic meaning of the banner; This can carry a positive, neutral
      * or negative connotation.
      */
-    nature: {
-      type: String as PropType<"info" | "warning" | "success" | "error">,
-      default: "info",
-    },
+    nature?: "info" | "warning" | "success" | "error"
     /**
      * the color variant of the banner; The dark variant is intended for use on
      * bg-complementary pages.
      */
-    variant: {
-      type: String as PropType<"regular" | "dark">,
-      default: "regular",
-    },
+    variant?: "regular" | "dark"
     /**
      * the unique ID of the banner
      */
-    id: {
-      type: String as PropType<BannerId>,
-      required: true,
-    },
+    id: BannerId
     /**
      * the label to apply to the close button
      */
-    closeButtonLabel: {
-      type: [String, Object] as PropType<string | TranslateResult>,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup(props) {
-    const classNames = computed(() =>
-      props.variant === "dark"
-        ? "bg-tertiary text-over-dark"
-        : {
-            info: "bg-info",
-            warning: "bg-warning",
-            success: "bg-success",
-            error: "bg-error",
-          }[props.nature]
-    )
-    const iconClassNames = computed(() =>
-      props.variant === "dark"
-        ? ""
-        : {
-            info: "text-info-8",
-            warning: "text-warning-8",
-            success: "text-success-8",
-            error: "text-error-8",
-          }[props.nature]
-    )
+    closeButtonLabel?: string
+  }>(),
+  {
+    nature: "info",
+    variant: "regular",
+  }
+)
+
+defineEmits<{
+  close: []
+}>()
 
-    const closeButtonClassNames = computed(() =>
-      props.variant === "dark"
-        ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
-        : {
-            info: "hover:!bg-info-3",
-            warning: "hover:!bg-warning-3",
-            success: "hover:!bg-success-3",
-            error: "hover:!bg-error-3",
-          }[props.nature]
-    )
+const classNames = computed(() =>
+  props.variant === "dark"
+    ? "bg-tertiary text-over-dark"
+    : {
+        info: "bg-info",
+        warning: "bg-warning",
+        success: "bg-success",
+        error: "bg-error",
+      }[props.nature]
+)
+const iconClassNames = computed(() =>
+  props.variant === "dark"
+    ? ""
+    : {
+        info: "text-info-8",
+        warning: "text-warning-8",
+        success: "text-success-8",
+        error: "text-error-8",
+      }[props.nature]
+)
 
-    return {
-      classNames,
-      iconClassNames,
-      closeButtonClassNames,
-    }
-  },
-})
+const closeButtonClassNames = computed(() =>
+  props.variant === "dark"
+    ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
+    : {
+        info: "hover:!bg-info-3",
+        warning: "hover:!bg-warning-3",
+        success: "hover:!bg-success-3",
+        error: "hover:!bg-error-3",
+      }[props.nature]
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VBanner/VTranslationStatusBanner.vue b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
index 93b5cc3c6c9..7bf58eb3713 100644
--- a/frontend/src/components/VBanner/VTranslationStatusBanner.vue
+++ b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
@@ -1,53 +1,37 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { BannerId } from "~/types/banners"
 
 import { createTranslationLink } from "~/utils/translation-banner"
 
-import { defineEvent } from "~/types/emits"
-
 import VLink from "~/components/VLink.vue"
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
 import type { LocaleObject } from "@nuxtjs/i18n"
 
-export default defineComponent({
-  name: "VTranslationStatusBanner",
-  components: {
-    VLink,
-    VNotificationBanner,
-  },
-  props: {
-    bannerKey: {
-      type: String as PropType<BannerId>,
-      required: true,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup() {
-    const i18n = useI18n({ useScope: "global" })
+defineProps<{
+  bannerKey: BannerId
+}>()
+
+defineEmits<{
+  close: []
+}>()
 
-    /**
-     * Returns the link to the GlotPress project for the current locale and the locale native name.
-     */
-    const currentLocale = computed(() => {
-      const localeObject = i18n.localeProperties.value as LocaleObject
+const i18n = useI18n({ useScope: "global" })
 
-      return {
-        link: createTranslationLink(localeObject),
-        name: localeObject.name,
-      }
-    })
+/**
+ * Returns the link to the GlotPress project for the current locale and the locale native name.
+ */
+const currentLocale = computed(() => {
+  const localeObject = i18n.localeProperties.value as LocaleObject
 
-    return {
-      currentLocale,
-    }
-  },
+  return {
+    link: createTranslationLink(localeObject),
+    name: localeObject.name,
+  }
 })
 </script>
 
diff --git a/frontend/src/components/VHeader/VFilterButton.vue b/frontend/src/components/VHeader/VFilterButton.vue
index 705588bd7fa..5b40174f269 100644
--- a/frontend/src/components/VHeader/VFilterButton.vue
+++ b/frontend/src/components/VHeader/VFilterButton.vue
@@ -1,52 +1,36 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 
 import { useSearchStore } from "~/stores/search"
-import { defineEvent } from "~/types/emits"
 
 import VButton from "~/components/VButton.vue"
 import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 
-export default defineComponent({
-  name: "VFilterButton",
-  components: {
-    VFilterIconOrCounter,
-    VButton,
-  },
-  props: {
-    pressed: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    toggle: defineEvent(),
-  },
-  setup() {
-    const { t } = useI18n({ useScope: "global" })
-    const searchStore = useSearchStore()
-    const filterCount = computed(() => searchStore.appliedFilterCount)
-    const filtersAreApplied = computed(() => filterCount.value > 0)
+withDefaults(
+  defineProps<{
+    pressed?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    pressed: false,
+    disabled: false,
+  }
+)
 
-    const textLabel = computed(() => t("header.filterButton.simple"))
-    const ariaLabel = computed(() =>
-      t("header.filterButton.withCount", { count: filterCount.value })
-    )
+defineEmits<{
+  toggle: []
+}>()
 
-    return {
-      ariaLabel,
-      textLabel,
-      filtersAreApplied,
-      filterCount,
-    }
-  },
-})
+const { t } = useI18n({ useScope: "global" })
+const searchStore = useSearchStore()
+const filterCount = computed(() => searchStore.appliedFilterCount)
+
+const textLabel = computed(() => t("header.filterButton.simple"))
+const ariaLabel = computed(() =>
+  t("header.filterButton.withCount", { count: filterCount.value })
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VFilterIconOrCounter.vue b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
index 459f14f527d..723a85d0cbf 100644
--- a/frontend/src/components/VHeader/VFilterIconOrCounter.vue
+++ b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
@@ -1,29 +1,20 @@
-<script lang="ts">
-import { computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VFilterIconOrCounter",
-  components: { VIcon },
-  props: {
-    appliedFilterCount: {
-      type: Number,
-      default: 0,
-    },
-    pressed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const showIcon = computed(() => props.appliedFilterCount === 0)
+const props = withDefaults(
+  defineProps<{
+    appliedFilterCount?: number
+    pressed?: boolean
+  }>(),
+  {
+    appliedFilterCount: 0,
+    pressed: false,
+  }
+)
 
-    return {
-      showIcon,
-    }
-  },
-})
+const showIcon = computed(() => props.appliedFilterCount === 0)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index 707e8b1d3f1..fb9481cbfd6 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -1,5 +1,7 @@
-<script lang="ts">
-import { computed, defineComponent, inject, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed, inject, ref } from "vue"
 
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
@@ -7,13 +9,11 @@ import { useUiStore } from "~/stores/ui"
 
 import { IsSidebarVisibleKey } from "~/types/provides"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useSearch } from "~/composables/use-search"
+import { useHydrating } from "~/composables/use-hydrating"
 
 import { ensureFocus } from "~/utils/reakit-utils/focus"
 
-import { useHydrating } from "~/composables/use-hydrating"
-
 import VFilterButton from "~/components/VHeader/VFilterButton.vue"
 import VSearchBar from "~/components/VHeader/VSearchBar/VSearchBar.vue"
 import VLogoButton from "~/components/VHeader/VLogoButton.vue"
@@ -25,80 +25,49 @@ import type { Ref } from "vue"
 /**
  * The desktop search header.
  */
-export default defineComponent({
-  name: "VHeaderDesktop",
-  components: {
-    VFilterButton,
-    VLogoButton,
-    VSearchBarButton,
-    VSearchTypePopover,
-    VSearchBar,
-  },
-  setup() {
-    const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
-    const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
-
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const uiStore = useUiStore()
-
-    const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
-
-    const isFetching = computed(() => mediaStore.fetchState.isFetching)
-
-    const { sendCustomEvent } = useAnalytics()
-
-    const { updateSearchState, searchTerm, searchStatus } =
-      useSearch(sendCustomEvent)
-
-    const clearSearchTerm = () => {
-      searchTerm.value = ""
-      ensureFocus(searchBarRef.value?.$el.querySelector("input") as HTMLElement)
-    }
-
-    const handleSearch = async () => {
-      window.scrollTo({ top: 0, left: 0, behavior: "auto" })
-      const activeElement = document.activeElement as HTMLElement
-      activeElement?.blur()
-      updateSearchState()
-    }
-
-    const areFiltersDisabled = computed(
-      () => !searchStore.searchTypeIsSupported
-    )
-
-    const toggleSidebar = () => {
-      const toState = isSidebarVisible?.value ? "closed" : "opened"
-      sendCustomEvent("TOGGLE_FILTER_SIDEBAR", {
-        searchType: searchStore.searchType,
-        toState,
-      })
-      uiStore.toggleFilters()
-    }
-
-    const isXl = computed(() => uiStore.isBreakpoint("xl"))
-
-    const { doneHydrating } = useHydrating()
-
-    return {
-      filterButtonRef,
-      searchBarRef,
-      isFetching,
-
-      isSidebarVisible,
-      areFiltersDisabled,
-      isXl,
-
-      handleSearch,
-      clearSearchTerm,
-      searchStatus,
-      searchTerm,
-      toggleSidebar,
-
-      doneHydrating,
-    }
-  },
-})
+
+const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
+const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
+
+const mediaStore = useMediaStore()
+const searchStore = useSearchStore()
+const uiStore = useUiStore()
+
+const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
+
+const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+const { $sendCustomEvent } = useNuxtApp()
+
+const { updateSearchState, searchTerm, searchStatus } =
+  useSearch($sendCustomEvent)
+
+const clearSearchTerm = () => {
+  searchTerm.value = ""
+  ensureFocus(searchBarRef.value?.$el.querySelector("input") as HTMLElement)
+}
+
+const handleSearch = async () => {
+  window.scrollTo({ top: 0, left: 0, behavior: "auto" })
+  const activeElement = document.activeElement as HTMLElement
+  activeElement?.blur()
+  updateSearchState()
+}
+
+const areFiltersDisabled = computed(() => !searchStore.searchTypeIsSupported)
+
+const toggleSidebar = () => {
+  const toState = isSidebarVisible?.value ? "closed" : "opened"
+  $sendCustomEvent("TOGGLE_FILTER_SIDEBAR", {
+    searchType: searchStore.searchType,
+    toState,
+  })
+  uiStore.toggleFilters()
+}
+
+const isXl = computed(() => uiStore.isBreakpoint("xl"))
+
+const { doneHydrating } = useHydrating()
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
index 99b6271afb9..27c672bdbd6 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
@@ -1,22 +1,16 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
+<script setup lang="ts">
 import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
 
-export default defineComponent({
-  name: "VContentSettingsButton",
-  components: { VSearchBarButton },
-  props: {
-    isPressed: {
-      type: Boolean,
-      default: false,
-    },
-    appliedFilterCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-})
+withDefaults(
+  defineProps<{
+    isPressed?: boolean
+    appliedFilterCount?: number
+  }>(),
+  {
+    isPressed: false,
+    appliedFilterCount: 0,
+  }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
index 25ea8e2d053..33512b2a9ac 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -1,17 +1,18 @@
-<script lang="ts">
+<script setup lang="ts">
 import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 import VTab from "~/components/VTabs/VTab.vue"
 
-export default {
-  name: "VFilterTab",
-  components: { VFilterIconOrCounter, VTab },
-  props: {
-    appliedFilterCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-}
+withDefaults(
+  defineProps<{
+    /**
+     * The number of filters that are currently applied.
+     */
+    appliedFilterCount?: number
+  }>(),
+  {
+    appliedFilterCount: 0,
+  }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index 5fa5a4c0d09..b2c456b40b0 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -1,53 +1,41 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-
-import type { TranslateResult } from "vue-i18n"
-
+<script setup lang="ts">
 /**
  * The buttons placed inside the mobile search bar in the header.
  * They are based on the VButton, look like they have a smallish focus area
  * (32x32px), but actually have a larger tappable area of 48x48px to comply with
  * accessibility requirements.
  */
-export default defineComponent({
-  name: "VSearchBarButton",
-  components: { VIcon, VButton },
-  props: {
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+
+withDefaults(
+  defineProps<{
     /**
      * The name of the icon.
      */
-    icon: {
-      type: String,
-      required: true,
-    },
+    icon: string
     /**
      * Whether the icon should be flipped when the page is in RTL mode.
      */
-    rtlFlip: {
-      type: Boolean,
-      default: false,
-    },
+    rtlFlip?: boolean
     /**
      * The label to use as accessible name for the button (aria-label).
      */
-    label: {
-      type: [String, Object] as PropType<string | TranslateResult>,
-      required: true,
-    },
+    label: string
     /**
      * The style of the inner area, matches the variants of VButton component.
      */
-    variant: {
-      type: String as PropType<
-        "transparent-dark" | "transparent-gray" | "filled-white" | "filled-gray"
-      >,
-      default: "transparent-dark",
-    },
-  },
-})
+    variant?:
+      | "transparent-dark"
+      | "transparent-gray"
+      | "filled-white"
+      | "filled-gray"
+  }>(),
+  {
+    rtlFlip: false,
+    variant: "transparent-dark",
+  }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
index 66d9863a330..69344d09333 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
@@ -1,44 +1,33 @@
-<script lang="ts">
-import { computed, defineComponent } from "vue"
-
-import { defineEvent } from "~/types/emits"
-
-import VButton from "~/components/VButton.vue"
-
+<script setup lang="ts">
 /**
  * This button dismisses the open modal for changing content types or applying
  * filters and takes the user back to the results.
  */
-export default defineComponent({
-  name: "VShowResultsButton",
-  components: { VButton },
-  props: {
+import { computed } from "vue"
+
+import VButton from "~/components/VButton.vue"
+
+withDefaults(
+  defineProps<{
     /**
      * whether the results are being updated behind the open modal
      */
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    const diameter = 8 // px
-    const spacing = 8 // px
+    isFetching?: boolean
+  }>(),
+  {
+    isFetching: false,
+  }
+)
+
+defineEmits<{
+  click: []
+}>()
 
-    const radius = computed(() => diameter / 2)
-    const width = computed(() => diameter * 3 + spacing * 2)
+const diameter = 8 // px
+const spacing = 8 // px
 
-    return {
-      diameter,
-      spacing,
-      radius,
-      width,
-    }
-  },
-})
+const radius = computed(() => diameter / 2)
+const width = computed(() => diameter * 3 + spacing * 2)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VHomeLink.vue b/frontend/src/components/VHeader/VHomeLink.vue
index 3c689a6f8cf..9abcc1dbeef 100644
--- a/frontend/src/components/VHeader/VHomeLink.vue
+++ b/frontend/src/components/VHeader/VHomeLink.vue
@@ -1,32 +1,24 @@
-<script lang="ts">
-import { type PropType, defineComponent } from "vue"
-
-import VButton from "~/components/VButton.vue"
-import VSvg from "~/components/VSvg/VSvg.vue"
-
+<script setup lang="ts">
 /**
  * The home link for the internal header. Shows the Openverse logo and wordmark,
  * and does not have a loading state.
  */
-export default defineComponent({
-  name: "VHomeLink",
-  components: {
-    VButton,
-    VSvg,
-  },
-  props: {
+
+import VButton from "~/components/VButton.vue"
+import VSvg from "~/components/VSvg/VSvg.vue"
+
+withDefaults(
+  defineProps<{
     /**
      * In `light` mode, the links are white and the background is dark charcoal.
      * In `dark` mode, the links are dark charcoal and the background is transparent.
      *
      * @default 'light'
      */
-    variant: {
-      type: String as PropType<"light" | "dark">,
-      default: "light",
-    },
-  },
-})
+    variant: "light" | "dark"
+  }>(),
+  { variant: "light" }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VLogoButton.vue b/frontend/src/components/VHeader/VLogoButton.vue
index 328f757fa15..14d290e437e 100644
--- a/frontend/src/components/VHeader/VLogoButton.vue
+++ b/frontend/src/components/VHeader/VLogoButton.vue
@@ -1,22 +1,13 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
-import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
-import VButton from "~/components/VButton.vue"
-
+<script setup lang="ts">
 /**
  * The home link for the search header. Shows the Openverse logo and the loading state.
  * When the results are being fetched, the logo is animated.
  */
-export default defineComponent({
-  name: "VLogoButton",
-  components: { VLogoLoader, VButton },
-  props: {
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
+import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
+import VButton from "~/components/VButton.vue"
+
+withDefaults(defineProps<{ isFetching?: boolean }>(), {
+  isFetching: false,
 })
 </script>
 
diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
index ac10618bce1..2b8462e37c8 100644
--- a/frontend/src/components/VHeader/VPageLinks.vue
+++ b/frontend/src/components/VHeader/VPageLinks.vue
@@ -1,77 +1,48 @@
-<script lang="ts">
-import { type PropType, defineComponent, computed } from "vue"
+<script setup lang="ts">
+import { computed } from "vue"
 
 import usePages from "~/composables/use-pages"
 
-import { defineEvent } from "~/types/emits"
-
 import VItemGroup from "~/components/VItemGroup/VItemGroup.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VPageLinks",
-  components: {
-    VIcon,
-    VItem,
-    VItemGroup,
-    VLink,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * In `dark` mode (in the modal), the links are white and the background is dark charcoal.
      * In `light` mode, the links are dark charcoal and the background is transparent.
-     *
-     * @default 'light'
      */
-    mode: {
-      type: String as PropType<"light" | "dark">,
-      default: "light",
-    },
+    mode?: "light" | "dark"
     /**
      * Pass the tailwind classes to style the nav links.
-     *
-     * @default ''
      */
-    navLinkClasses: {
-      type: String,
-      default: "",
-    },
-    variant: {
-      type: String as PropType<"links" | "itemgroup">,
-      default: "links",
-    },
-    isInModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    close: defineEvent(),
-  },
-  setup(props, { emit }) {
-    const { all: allPages, current: currentPage } = usePages()
-
-    // The modal isn't closed if we click on the current page link,
-    // so we need to close it manually.
-    const onClick = () => emit("close")
+    navLinkClasses?: string
+    variant?: "links" | "itemgroup"
+    isInModal?: boolean
+  }>(),
+  {
+    mode: "light",
+    navLinkClasses: "",
+    variant: "links",
+    isInModal: false,
+  }
+)
+const emit = defineEmits<{
+  close: []
+}>()
 
-    const isLinkExternal = (item: (typeof allPages)[number]) =>
-      !item.link.startsWith("/")
+const { all: allPages, current: currentPage } = usePages()
 
-    const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
+// The modal isn't closed if we click on the current page link,
+// so we need to close it manually.
+const onClick = () => emit("close")
 
-    return {
-      allPages,
-      currentPage,
-      onClick,
-      isLinkExternal,
+const isLinkExternal = (item: (typeof allPages)[number]) =>
+  !item.link.startsWith("/")
 
-      externalIconSize,
-    }
-  },
-})
+const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
index f39a04bacb9..1ca00cb11c7 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -1,10 +1,15 @@
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue"
+<script setup lang="ts">
+/**
+ * The search bar displayed on the search page.
+ *
+ * Displays a text field for a search query and is attached to an action button
+ * that fires a search request. The loading state and number of hits are also
+ * displayed in the bar itself.
+ */
+import { computed, ref, useAttrs, watch } from "vue"
 
 import { onClickOutside } from "@vueuse/core"
 
-import { defineEvent } from "~/types/emits"
-
 import { useRecentSearches } from "~/composables/use-recent-searches"
 
 import VInputField, {
@@ -13,118 +18,92 @@ import VInputField, {
 import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
 import VRecentSearches from "~/components/VRecentSearches/VRecentSearches.vue"
 
-/**
- * The search bar displayed on the search page.
- *
- * Displays a text field for a search query and is attached to an action button
- * that fires a search request. The loading state and number of hits are also
- * displayed in the bar itself.
- */
-export default defineComponent({
-  name: "VSearchBar",
-  components: { VRecentSearches, VInputField, VSearchButton },
-  inheritAttrs: false,
-  props: {
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
     /**
      * the search query given as input to the field
      */
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    size: {
-      type: String as PropType<keyof typeof FIELD_SIZES>,
-      default: "medium",
-    },
-    placeholder: {
-      type: String,
-      required: false,
-    },
+    modelValue?: string
+    size?: keyof typeof FIELD_SIZES
+    placeholder?: string
+  }>(),
+  {
+    modelValue: "",
+    size: "medium",
+  }
+)
+
+const emit = defineEmits<{
+  "update:modelValue": [string]
+  submit: []
+  "recent-hidden": []
+}>()
+const attrs = useAttrs()
+const searchBarEl = ref<HTMLElement | null>(null)
+const inputFieldRef = ref<InstanceType<typeof VInputField> | null>(null)
+
+const modelMedium = computed<string>({
+  get: () => props.modelValue ?? "",
+  set: (value: string) => {
+    emit("update:modelValue", value)
   },
-  emits: {
-    "update:modelValue": defineEvent<[string]>(),
-    submit: defineEvent(),
-    "recent-hidden": defineEvent(),
-  },
-  setup(props, { attrs, emit }) {
-    const searchBarEl = ref<HTMLElement | null>(null)
-    const inputFieldRef = ref<InstanceType<typeof VInputField> | null>(null)
-
-    const modelMedium = computed<string>({
-      get: () => props.modelValue ?? "",
-      set: (value: string) => {
-        emit("update:modelValue", value)
-      },
-    })
-
-    const handleSearch = () => {
-      emit("submit")
-    }
-
-    /* Recent searches */
-    const recentClasses = computed(() => {
-      // Calculated by adding 8px to all heights defined in `VInputField.vue`.
-      const FIELD_OFFSETS = {
-        medium: "top-14",
-      } as const
-      return FIELD_OFFSETS[props.size]
-    })
-    const focusInput = () => {
-      inputFieldRef.value?.focusInput()
-    }
-
-    /**
-     * Hide recent searches on blur and click outside.
-     */
-    const handleSearchBlur = () => {
-      if (!recent.entries.value.length) {
-        recent.hide()
-      }
-    }
-
-    const { handleKeydown, handleSelect, handleClear, recent } =
-      useRecentSearches({
-        focusInput,
-        term: modelMedium,
-        isMobile: false,
-      })
-    onClickOutside(searchBarEl, recent.hide)
-
-    watch(recent.isVisible, (isVisible) => {
-      if (!isVisible) {
-        emit("recent-hidden")
-      }
-    })
-
-    const nonClassAttrs = computed(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { class: _, ...rest } = attrs
-      return rest
-    })
-
-    return {
-      searchBarEl,
-      inputFieldRef,
-
-      nonClassAttrs,
+})
 
-      handleSearch,
-      modelMedium,
+const handleSearch = () => {
+  emit("submit")
+}
+
+/* Recent searches */
+const recentClasses = computed(() => {
+  // Calculated by adding 8px to all heights defined in `VInputField.vue`.
+  const FIELD_OFFSETS = {
+    medium: "top-14",
+  } as const
+  return FIELD_OFFSETS[props.size]
+})
+const focusInput = () => {
+  inputFieldRef.value?.focusInput()
+}
 
-      showRecentSearches: recent.show,
-      hideRecentSearches: recent.hide,
-      handleSearchBlur,
+/**
+ * Hide recent searches on blur and click outside.
+ */
+const handleSearchBlur = () => {
+  if (!entries.value.length) {
+    hideRecentSearches()
+  }
+}
+
+const {
+  handleKeydown,
+  handleSelect,
+  handleClear,
+  recent: {
+    show: showRecentSearches,
+    hide: hideRecentSearches,
+    isVisible: isRecentVisible,
+    selectedIdx,
+    entries,
+  },
+} = useRecentSearches({
+  focusInput,
+  term: modelMedium,
+  isMobile: false,
+})
+onClickOutside(searchBarEl, hideRecentSearches)
 
-      recentClasses,
-      isRecentVisible: recent.isVisible,
-      selectedIdx: recent.selectedIdx,
-      entries: recent.entries,
+watch(isRecentVisible, (isVisible) => {
+  if (!isVisible) {
+    emit("recent-hidden")
+  }
+})
 
-      handleKeydown,
-      handleSelect,
-      handleClear,
-    }
-  },
+const nonClassAttrs = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { class: _, ...rest } = attrs
+  return rest
 })
 </script>
 
diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue b/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
index 9295433f8b2..ed53870bdda 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -1,6 +1,4 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
+<script setup lang="ts">
 import { useHydrating } from "~/composables/use-hydrating"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -8,26 +6,14 @@ import VButton from "~/components/VButton.vue"
 /**
  * The search button used in the search bar on the home, 404 and search pages.
  */
-export default defineComponent({
-  name: "VSearchButton",
-  components: { VIcon, VButton },
-  props: {
-    /**
-     * The current route determines the size and the style of the button.
-     */
-    route: {
-      type: String as PropType<"home" | "404" | "search">,
-      required: true,
-    },
-  },
-  setup() {
-    const { doneHydrating } = useHydrating()
+defineProps<{
+  /**
+   * The current route determines the size and the style of the button.
+   */
+  route: "home" | "404" | "search"
+}>()
 
-    return {
-      doneHydrating,
-    }
-  },
-})
+const { doneHydrating } = useHydrating()
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
index 652a47e341b..1abc2369bca 100644
--- a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -1,10 +1,4 @@
-<script lang="ts">
-import { defineComponent, PropType, ref } from "vue"
-
-import { defineEvent } from "~/types/emits"
-
-import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
-
+<script setup lang="ts">
 /**
  * Displays a search input for a search query and is attached to an action button
  * that fires a search request. Can contain other elements like the search type
@@ -12,49 +6,43 @@ import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
  * hydrating the server-rendered code, so the value entered before full hydration
  * is not removed.
  */
-export default defineComponent({
-  name: "VStandaloneSearchBar",
-  components: { VSearchButton },
-  props: {
-    route: {
-      type: String as PropType<"home" | "404">,
-      default: "home",
-    },
+import { ref } from "vue"
+
+import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
+
+withDefaults(
+  defineProps<{
+    route?: "home" | "404"
     /**
      * Search bar should not have a focus box when a popover is open.
      */
-    hasPopover: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    submit: defineEvent<[string]>(),
-  },
-  setup(_, { emit, expose }) {
-    const inputRef = ref<HTMLInputElement | null>(null)
+    hasPopover: boolean
+  }>(),
+  {
+    route: "home",
+    hasPopover: false,
+  }
+)
+
+const emit = defineEmits<{
+  submit: [string]
+}>()
 
-    // Only emit `submit` if the input value is not blank
-    const handleSearch = () => {
-      const searchTerm = inputRef.value?.value.trim()
-      if (searchTerm) {
-        emit("submit", searchTerm)
-      }
-    }
+const inputRef = ref<HTMLInputElement | null>(null)
 
-    const focusInput = () => {
-      inputRef.value?.focus()
-    }
+// Only emit `submit` if the input value is not blank
+const handleSearch = () => {
+  const searchTerm = inputRef.value?.value.trim()
+  if (searchTerm) {
+    emit("submit", searchTerm)
+  }
+}
 
-    expose({ focusInput })
+const focusInput = () => {
+  inputRef.value?.focus()
+}
 
-    return {
-      inputRef,
-      handleSearch,
-      focusInput,
-    }
-  },
-})
+defineExpose({ focusInput })
 </script>
 
 <template>
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index 0a4febd1184..36eabe0070e 100644
--- a/frontend/src/components/VHeader/VWordPressLink.vue
+++ b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -1,19 +1,13 @@
-<script lang="ts">
+<script setup lang="ts">
 import VLink from "~/components/VLink.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
 
-import type { PropType } from "vue"
-
-export default {
-  name: "VWordPressLink",
-  components: { VLink, VSvg },
-  props: {
-    mode: {
-      type: String as PropType<"dark" | "light">,
-      default: "light",
-    },
-  },
-}
+withDefaults(
+  defineProps<{
+    mode: "dark" | "light"
+  }>(),
+  { mode: "light" }
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index a7d2495150e..03e640a98bd 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,66 +1,51 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import { defineEvent } from "~/types/emits"
-
-import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
+<script setup lang="ts">
 /**
  * List the recent searches of the user allowing them to go back to a previous
  * search. These searches are saved locally and never shared with the server.
  */
-export default defineComponent({
-  name: "VRecentSearches",
-  components: { VIconButton, VIcon, VButton },
-  props: {
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+const props = withDefaults(
+  defineProps<{
     /**
      * the list of saved past searches
      */
-    entries: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
+    entries?: string[]
     /**
      * the index of the currently selected entry
      */
-    selectedIdx: {
-      type: Number,
-    },
+    selectedIdx?: number
     /**
      * the desktop popover is bordered, and the mobile element is not
      */
-    bordered: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    select: defineEvent<[number]>(),
-    clear: defineEvent<[string?]>(),
-    "last-tab": defineEvent(),
-  },
-  setup(props, { emit }) {
-    const handleClick = (idx: number) => {
-      emit("select", idx)
-    }
-    const handleClear = (entry?: string) => {
-      emit("clear", entry)
-    }
-    const handleTab = (idx: number) => {
-      if (idx === props.entries.length - 1) {
-        emit("last-tab")
-      }
-    }
+    bordered?: boolean
+  }>(),
+  {
+    entries: () => [],
+    selectedIdx: undefined,
+    bordered: true,
+  }
+)
+
+const emit = defineEmits<{
+  select: [number]
+  clear: [string?]
+  "last-tab": []
+}>()
 
-    return {
-      handleClick,
-      handleClear,
-      handleTab,
-    }
-  },
-})
+const handleClick = (idx: number) => {
+  emit("select", idx)
+}
+const handleClear = (entry?: string) => {
+  emit("clear", entry)
+}
+const handleTab = (idx: number) => {
+  if (idx === props.entries.length - 1) {
+    emit("last-tab")
+  }
+}
 </script>
 
 <template>
diff --git a/frontend/test/playwright/visual-regression/pages/errors.spec.ts b/frontend/test/playwright/visual-regression/pages/errors.spec.ts
index 61d88493ff6..a9e563c6755 100644
--- a/frontend/test/playwright/visual-regression/pages/errors.spec.ts
+++ b/frontend/test/playwright/visual-regression/pages/errors.spec.ts
@@ -132,9 +132,12 @@ for (const searchType of supportedSearchTypes) {
 
         await page.mouse.move(0, 82)
 
+        // The CC logos in the attribution are loaded from the CC website, and can be flaky.
         await expectSnapshot(
           `search-result-timeout-${dir}`,
-          page.locator("#main-page")
+          page.locator("#main-page"),
+          {},
+          { maxDiffPixelRatio: 0.01 }
         )
       })
     }
diff --git a/frontend/test/tapes/search/images/q=galah&license_type=modification_keep-alive.json5 b/frontend/test/tapes/search/images/q=galah&license_type=modification_keep-alive.json5
index 4600c486d44..1970e8cfef4 100644
--- a/frontend/test/tapes/search/images/q=galah&license_type=modification_keep-alive.json5
+++ b/frontend/test/tapes/search/images/q=galah&license_type=modification_keep-alive.json5
@@ -92,8 +92,8 @@
             ],
         },
         body: {
-            result_count: 2686,
-            page_count: 135,
+            result_count: 240,
+            page_count: 12,
             page_size: 20,
             page: 1,
             results: [
diff --git a/frontend/test/tapes/search/images/q=galah_close.json5 b/frontend/test/tapes/search/images/q=galah_close.json5
index bdf20512d7a..d309cd4f877 100644
--- a/frontend/test/tapes/search/images/q=galah_close.json5
+++ b/frontend/test/tapes/search/images/q=galah_close.json5
@@ -75,8 +75,8 @@
             ],
         },
         body: {
-            result_count: 3275,
-            page_count: 164,
+            result_count: 240,
+            page_count: 12,
             page_size: 20,
             page: 1,
             results: [
diff --git a/frontend/test/tapes/search/images/q=galah_keep-alive.json5 b/frontend/test/tapes/search/images/q=galah_keep-alive.json5
index 7628fe21831..f3384e3ee0e 100644
--- a/frontend/test/tapes/search/images/q=galah_keep-alive.json5
+++ b/frontend/test/tapes/search/images/q=galah_keep-alive.json5
@@ -92,8 +92,8 @@
             ],
         },
         body: {
-            result_count: 3275,
-            page_count: 164,
+            result_count: 240,
+            page_count: 12,
             page_size: 20,
             page: 1,
             results: [