diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index d4b1b349fb4..cf8b37a1cb3 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -129,6 +129,12 @@ export default defineNuxtConfig({
    * Disable debug mode to prevent excessive timing logs.
    */
   debug: false,
+  experimental: {
+    /**
+     * Improve router performance, see https://nuxt.com/blog/v3-10#%EF%B8%8F-build-time-route-metadata
+     */
+    scanPageMeta: true,
+  },
   modules: [
     "@pinia/nuxt",
     "@nuxtjs/i18n",
diff --git a/frontend/package.json b/frontend/package.json
index efb0be2678f..9165a18e679 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -85,7 +85,7 @@
   },
   "devDependencies": {
     "@nuxt/test-utils": "^3.9.0",
-    "@nuxtjs/i18n": "8.0.1",
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge@8.0.1-28448146.2145ce5",
     "@playwright/test": "1.40.1",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.0.1",
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index 23be95d9abd..c8c503b7eb6 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -1,27 +1,16 @@
 <template>
-  <div>
-    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir" />
-    <Body>
-      <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
-        <VSkipToContentButton />
-        <NuxtLayout>
-          <NuxtPage />
-        </NuxtLayout>
-        <VGlobalAudioSection />
-      </div>
-      <div id="modal"></div>
-    </Body>
+  <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
+    <VSkipToContentButton />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <VGlobalAudioSection />
   </div>
+  <div id="modal"></div>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  onMounted,
-  useRoute,
-  useCookie,
-  useLocaleHead,
-} from "#imports"
+import { computed, onMounted, useRoute, useCookie } from "#imports"
 
 import { useUiStore } from "~/stores/ui"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
@@ -31,11 +20,6 @@ import type { OpenverseCookieState } from "~/types/cookies"
 
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
 
-const head = useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: "id",
-})
-
 /**
  * Lifecycle hooks in async setup should be called before the first await.
  */
diff --git a/frontend/src/components/VAudioDetails/VRelatedAudio.vue b/frontend/src/components/VAudioDetails/VRelatedAudio.vue
index b1439d050c5..79ffd1c68e2 100644
--- a/frontend/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/frontend/src/components/VAudioDetails/VRelatedAudio.vue
@@ -1,18 +1,20 @@
 <template>
   <section v-if="showRelated">
     <h2 class="heading-6 lg:heading-6 mb-6">
-      {{ $t("audioDetails.relatedAudios") }}
+      {{ t("audioDetails.relatedAudios") }}
     </h2>
     <VAudioCollection
       :results="media"
       kind="related"
-      :collection-label="$t('audioDetails.relatedAudios')"
+      :collection-label="t('audioDetails.relatedAudios')"
       class="mb-12"
     />
   </section>
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed, toRef, watch } from "vue"
 
 import { useRelatedMediaStore } from "~/stores/media/related-media"
@@ -24,6 +26,9 @@ import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.v
 const props = defineProps<{
   mediaId: string
 }>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
 const relatedMediaStore = useRelatedMediaStore()
 
diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
index 2bb6777e462..a05ecad1db1 100644
--- a/frontend/src/components/VAudioTrack/VAudioControl.vue
+++ b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -5,7 +5,7 @@
     :size="buttonSize"
     :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
-    :label="$t(label)"
+    :label="t(label)"
     :connections="connections"
     :disabled="!doneHydrating"
     @click.stop.prevent="handleClick"
@@ -31,8 +31,10 @@
   </VIconButton>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import {
   AudioLayout,
@@ -41,11 +43,12 @@ import {
   audioStatuses,
   statusVerbMap,
 } from "~/constants/audio"
-import { defineEvent } from "~/types/emits"
 import type { ButtonConnections } from "~/types/button"
 
 import { useHydrating } from "~/composables/use-hydrating"
 
+import { warn } from "~/utils/console"
+
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 const statusIconMap = {
@@ -77,105 +80,105 @@ const sizes = {
  * Displays the control for switching between the playing and paused states of
  * a media file.
  */
-export default defineComponent({
-  name: "VAudioControl",
-  components: { VIconButton },
-  model: {
-    prop: "status",
-    event: "toggle",
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * the current play status of the audio
      */
-    status: {
-      type: String as PropType<AudioStatus>,
-      required: true,
-      validator: (val: string) =>
-        (audioStatuses as readonly string[]).includes(val),
-    },
+    status: AudioStatus
     /**
      * The size of the button. The size affects both the size of the button
      * itself and the icon inside it.
      */
-    size: {
-      type: String as PropType<"small" | "medium" | "large">,
-      required: true,
-      validator: (val: string) => ["small", "medium", "large"].includes(val),
-    },
+    size: "small" | "medium" | "large"
     /**
      * The parent audio layout currently in use. The connections are determined
      * by the layout and the size of the button.
      */
-    layout: {
-      type: String as PropType<AudioLayout>,
-      default: "full",
-      validator: (val: string) =>
-        (audioLayouts as readonly string[]).includes(val),
-    },
+    layout?: AudioLayout
     /**
      * Whether the audio control button can be focused by using the `Tab` key
      */
-    isTabbable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    toggle: defineEvent<["paused" | "playing"]>(),
-  },
-  setup(props, { emit }) {
-    const isPlaying = computed(() => props.status === "playing")
-    const isLoading = computed(() => props.status === "loading")
-    /**
-     * Get the button label based on the current status of the player.
-     */
-    const label = computed(() => `playPause.${statusVerbMap[props.status]}`)
-    /**
-     * Get the button icon based on the current status of the player.
-     */
-    const icon = computed(() => statusIconMap[props.status])
+    isTabbable?: boolean
+  }>(),
+  {
+    layout: "full",
+    isTabbable: true,
+  }
+)
 
-    /**
-     * Set the connections (none-rounded corners) for the button based on the layout.
-     */
-    const connections = computed(() => {
-      return props.layout === "row" && props.size === "small"
-        ? []
-        : [...layoutConnectionsMap[props.layout]]
-    })
-
-    /** Convert the `audio-control` sizes to `VIconButton` sizes */
-    const buttonSize = computed(() => sizes[props.size].button)
-
-    const iSize = computed(() => sizes[props.size].icon)
-
-    const handleMouseDown = (event: MouseEvent) => {
-      if (!props.isTabbable) {
-        // to prevent focus
-        event.preventDefault()
-      }
-    }
-    const handleClick = () => {
-      emit("toggle", isPlaying.value || isLoading.value ? "paused" : "playing")
-    }
-
-    const { doneHydrating } = useHydrating()
-
-    return {
-      label,
-      icon,
-      connections,
-      buttonSize,
-      iSize,
-      isLoading,
-
-      handleClick,
-      handleMouseDown,
-      doneHydrating,
-    }
-  },
+const validateStatus = (val: string) => {
+  return (audioStatuses as readonly string[]).includes(val)
+}
+if (!validateStatus(props.status)) {
+  warn(
+    `VAudioControl: The prop 'status' must be one of ${audioStatuses.join(
+      ", "
+    )}.`
+  )
+}
+const validateSize = (val: string) => {
+  return ["small", "medium", "large"].includes(val)
+}
+if (!validateSize(props.size)) {
+  warn(
+    `VAudioControl: The prop 'size' must be one of 'small', 'medium' or 'large'.`
+  )
+}
+const validateLayout = (val: string) => {
+  return (audioLayouts as readonly string[]).includes(val)
+}
+if (!validateLayout(props.layout)) {
+  warn(
+    `VAudioControl: The prop 'layout' must be one of ${audioLayouts.join(
+      ", "
+    )}.`
+  )
+}
+const emit = defineEmits<{
+  toggle: ["paused" | "playing"]
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const isPlaying = computed(() => props.status === "playing")
+const isLoading = computed(() => props.status === "loading")
+/**
+ * Get the button label based on the current status of the player.
+ */
+const label = computed(() => `playPause.${statusVerbMap[props.status]}`)
+/**
+ * Get the button icon based on the current status of the player.
+ */
+const icon = computed(() => statusIconMap[props.status])
+
+/**
+ * Set the connections (none-rounded corners) for the button based on the layout.
+ */
+const connections = computed(() => {
+  return props.layout === "row" && props.size === "small"
+    ? []
+    : [...layoutConnectionsMap[props.layout]]
 })
+
+/** Convert the `audio-control` sizes to `VIconButton` sizes */
+const buttonSize = computed(() => sizes[props.size].button)
+
+const iSize = computed(() => sizes[props.size].icon)
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (!props.isTabbable) {
+    // to prevent focus
+    event.preventDefault()
+  }
+}
+const handleClick = () => {
+  emit("toggle", isPlaying.value || isLoading.value ? "paused" : "playing")
+}
+
+const { doneHydrating } = useHydrating()
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index 1067080c790..88e705c2fa9 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -6,7 +6,7 @@
     class="audio-track group block overflow-hidden rounded-sm ring-pink hover:no-underline"
     :aria-label="ariaLabel"
     :role="isComposite ? 'application' : undefined"
-    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
+    @keydown.shift.tab.exact="emit('shift-tab', $event)"
     @keydown="handleKeydown"
     @blur="handleBlur"
     @mousedown="handleMousedown"
@@ -49,17 +49,10 @@
   </Component>
 </template>
 
-<script lang="ts">
-import { useI18n, useRoute } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp, useRoute } from "#imports"
 
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  ref,
-  watch,
-} from "vue"
+import { computed, onUnmounted, ref, watch } from "vue"
 
 import { useActiveAudio } from "~/composables/use-active-audio"
 import { defaultRef } from "~/composables/default-ref"
@@ -85,553 +78,493 @@ import {
 import type { AudioInteraction, AudioInteractionData } from "~/types/analytics"
 import type { AudioDetail } from "~/types/media"
 
-import { defineEvent } from "~/types/emits"
-
 import type { AudioTrackClickEvent } from "~/types/events"
 
 import { keycodes } from "~/constants/key-codes"
 
 import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
-import VFullLayout from "~/components/VAudioTrack/layouts/VFullLayout.vue"
-import VRowLayout from "~/components/VAudioTrack/layouts/VRowLayout.vue"
-import VBoxLayout from "~/components/VAudioTrack/layouts/VBoxLayout.vue"
-import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
-import VLink from "~/components/VLink.vue"
 
 /**
  * Displays the waveform and basic information about the track, along with
  * controls to play, pause or seek to a point on the track.
  */
-export default defineComponent({
-  name: "VAudioTrack",
-  components: {
-    VAudioControl,
-    VWaveform,
-    VLink,
-
-    // Layouts
-    VFullLayout,
-    VRowLayout,
-    VBoxLayout,
-    VGlobalLayout,
-  },
-  props: {
-    /**
-     * the information about the track, typically from a track's detail endpoint
-     */
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-    /**
-     * the arrangement of the contents on the canvas; This determines the
-     * overall L&F of the audio component.
-     */
-    layout: {
-      type: String as PropType<AudioLayout>,
-      required: true,
-    },
-    /**
-     * the size of the component; Both 'box' and 'row' layouts offer multiple
-     * sizes to choose from.
-     */
-    size: {
-      type: String as PropType<AudioSize>,
-    },
-    /**
-     * the search term that was used to find this track; This is used
-     * in the link to the track's detail page.
-     */
-    searchTerm: {
-      type: String,
-    },
-  },
-  emits: {
-    "shift-tab": defineEvent<[KeyboardEvent]>(),
-    interacted: defineEvent<[Omit<AudioInteractionData, "component">]>(),
-    mousedown: defineEvent<[AudioTrackClickEvent]>(),
-    keydown: defineEvent<[KeyboardEvent]>(),
-    focus: defineEvent<[FocusEvent]>(),
-  },
-  setup(props, { emit }) {
-    const i18n = useI18n({ useScope: "global" })
-
-    const activeMediaStore = useActiveMediaStore()
-    const route = useRoute()
-
-    const activeAudio = useActiveAudio()
-
-    const status = ref<AudioStatus>("paused")
-    const currentTime = ref(0)
-
-    const initLocalAudio = () => {
-      // Preserve existing local audio if we plucked it from the global active audio
-      if (!localAudio) {
-        if (
-          activeAudio.obj.value?.src !== props.audio.url &&
-          !activeAudio.obj.value?.paused
-        ) {
-          activeAudio.obj.value?.pause()
-          activeMediaStore.pauseActiveMediaItem()
-        }
-        localAudio = new Audio(props.audio.url)
-      }
-
-      Object.entries(eventMap).forEach(([name, fn]) =>
-        /**
-         * This cast is safe, it just filters `undefined` that is still present on the
-         * `localAudio`'s type despite the check above to create it if it doesn't exist.
-         */
-        (localAudio as HTMLAudioElement).addEventListener(name, fn)
-      )
-
-      /**
-       * Similar to the behavior in the global audio track,
-       * if the local audio was set to an already existing and
-       * matching active global track, then we'll need to initialize
-       * the status based on the `paused` and `ended` booleans
-       * on the audio object.
-       *
-       * For newly initialized audio objects, this is harmless,
-       * but it is essential for making sure page transitions
-       * preserve the existing, already manipulated audio
-       * object's state.
-       *
-       * Unlike the global audio track, however, this will not
-       * always result in a status of `playing` in practice,
-       * as the state of the active global track could be any
-       * of the three statuses we track when the page transition
-       * happens. For example, the audio track on the result page
-       * could have been played through (and thus `ended`), or it
-       * could be paused mid-way (and thus `paused`), or neither
-       * and thus would be playing.
-       */
-      if (localAudio.paused) {
-        if (localAudio.ended) {
-          setPlayed()
-        } else {
-          setPaused()
-        }
-      } else {
-        setPlaying()
-      }
-
-      currentTime.value = localAudio.currentTime
+const props = defineProps<{
+  /**
+   * the information about the track, typically from a track's detail endpoint
+   */
+  audio: AudioDetail
+  /**
+   * the arrangement of the contents on the canvas; This determines the
+   * overall L&F of the audio component.
+   */
+  layout: AudioLayout
+  /**
+   * the size of the component; Both 'box' and 'row' layouts offer multiple
+   * sizes to choose from.
+   */
+  size?: AudioSize
+  /**
+   * the search term that was used to find this track; This is used
+   * in the link to the track's detail page.
+   */
+  searchTerm?: string
+}>()
+
+const emit = defineEmits<{
+  "shift-tab": [KeyboardEvent]
+  interacted: [Omit<AudioInteractionData, "component">]
+  mousedown: [AudioTrackClickEvent]
+  keydown: [KeyboardEvent]
+  focus: [FocusEvent]
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const activeMediaStore = useActiveMediaStore()
+const route = useRoute()
+
+const activeAudio = useActiveAudio()
+
+const status = ref<AudioStatus>("paused")
+const currentTime = ref(0)
+
+const initLocalAudio = () => {
+  // Preserve existing local audio if we plucked it from the global active audio
+  if (!localAudio) {
+    if (
+      activeAudio.obj.value?.src !== props.audio.url &&
+      !activeAudio.obj.value?.paused
+    ) {
+      activeAudio.obj.value?.pause()
+      activeMediaStore.pauseActiveMediaItem()
     }
+    localAudio = new Audio(props.audio.url)
+  }
 
+  Object.entries(eventMap).forEach(([name, fn]) =>
     /**
-     * We can only create the local audio object on the client,
-     * so the initialization of this variable is hidden inside
-     * the `initLocalAudio` function which is only called when
-     * playback is first requested or when the track is first seeked.
-     *
-     * However, when navigating to an audio result page, if
-     * the globally active audio already matches the result
-     * that was clicked on, hijack that object instead and
-     * treat it as the local audio for this instance.
+     * This cast is safe, it just filters `undefined` that is still present on the
+     * `localAudio`'s type despite the check above to create it if it doesn't exist.
      */
-    let localAudio =
-      activeAudio.obj.value?.src === props.audio.url
-        ? activeAudio.obj.value
-        : undefined
-
-    const updateTimeLoop = () => {
-      if (localAudio) {
-        if (activeAudioStatus.includes(status.value)) {
-          currentTime.value = localAudio.currentTime
-          window.requestAnimationFrame(updateTimeLoop)
-        } else {
-          currentTime.value = localAudio.currentTime
-        }
-      }
+    (localAudio as HTMLAudioElement).addEventListener(name, fn)
+  )
+
+  /**
+   * Similar to the behavior in the global audio track,
+   * if the local audio was set to an already existing and
+   * matching active global track, then we'll need to initialize
+   * the status based on the `paused` and `ended` booleans
+   * on the audio object.
+   *
+   * For newly initialized audio objects, this is harmless,
+   * but it is essential for making sure page transitions
+   * preserve the existing, already manipulated audio
+   * object's state.
+   *
+   * Unlike the global audio track, however, this will not
+   * always result in a status of `playing` in practice,
+   * as the state of the active global track could be any
+   * of the three statuses we track when the page transition
+   * happens. For example, the audio track on the result page
+   * could have been played through (and thus `ended`), or it
+   * could be paused mid-way (and thus `paused`), or neither
+   * and thus would be playing.
+   */
+  if (localAudio.paused) {
+    if (localAudio.ended) {
+      setPlayed()
+    } else {
+      setPaused()
     }
+  } else {
+    setPlaying()
+  }
 
-    const mediaStore = useMediaStore()
-    const setLoaded = () => {
-      mediaStore.setMediaProperties("audio", props.audio.id, {
-        hasLoaded: true,
-      })
-      status.value = "playing"
-    }
-    const setWaiting = () => {
-      status.value = "loading"
-    }
-    const setPlaying = () => {
-      if (props.audio.hasLoaded) {
-        status.value = "playing"
-      } else {
-        status.value = "loading"
-      }
-      activeAudio.obj.value = localAudio
-      activeMediaStore.setActiveMediaItem({
-        type: "audio",
-        id: props.audio.id,
-        detail: props.audio,
-      })
-      activeMediaStore.setMessage({ message: null })
-      updateTimeLoop()
+  currentTime.value = localAudio.currentTime
+}
+
+/**
+ * We can only create the local audio object on the client,
+ * so the initialization of this variable is hidden inside
+ * the `initLocalAudio` function which is only called when
+ * playback is first requested or when the track is first seeked.
+ *
+ * However, when navigating to an audio result page, if
+ * the globally active audio already matches the result
+ * that was clicked on, hijack that object instead and
+ * treat it as the local audio for this instance.
+ */
+let localAudio =
+  activeAudio.obj.value?.src === props.audio.url
+    ? activeAudio.obj.value
+    : undefined
+
+const updateTimeLoop = () => {
+  if (localAudio) {
+    if (activeAudioStatus.includes(status.value)) {
+      currentTime.value = localAudio.currentTime
+      window.requestAnimationFrame(updateTimeLoop)
+    } else {
+      currentTime.value = localAudio.currentTime
     }
-    const setPaused = () => {
+  }
+}
+
+const mediaStore = useMediaStore()
+const setLoaded = () => {
+  mediaStore.setMediaProperties("audio", props.audio.id, {
+    hasLoaded: true,
+  })
+  status.value = "playing"
+}
+const setWaiting = () => {
+  status.value = "loading"
+}
+const setPlaying = () => {
+  if (props.audio.hasLoaded) {
+    status.value = "playing"
+  } else {
+    status.value = "loading"
+  }
+  activeAudio.obj.value = localAudio
+  activeMediaStore.setActiveMediaItem({
+    type: "audio",
+    id: props.audio.id,
+    detail: props.audio,
+  })
+  activeMediaStore.setMessage({ message: null })
+  updateTimeLoop()
+}
+const setPaused = () => {
+  status.value = "paused"
+  activeMediaStore.pauseActiveMediaItem()
+}
+const setPlayed = () => (status.value = "played")
+const setTimeWhenPaused = () => {
+  if (status.value !== "playing" && localAudio) {
+    currentTime.value = localAudio.currentTime
+    if (status.value === "played") {
+      // Set to pause to remove replay icon
       status.value = "paused"
-      activeMediaStore.pauseActiveMediaItem()
-    }
-    const setPlayed = () => (status.value = "played")
-    const setTimeWhenPaused = () => {
-      if (status.value !== "playing" && localAudio) {
-        currentTime.value = localAudio.currentTime
-        if (status.value === "played") {
-          // Set to pause to remove replay icon
-          status.value = "paused"
-        }
-      }
     }
-    const duration = defaultRef(() => {
-      if (localAudio) {
-        return localAudio.duration
-      }
-      if (typeof props.audio?.duration === "number") {
-        return props.audio.duration / 1e3
-      }
-      return 0
-    })
-    const setDuration = () => {
-      if (localAudio) {
-        duration.value = localAudio.duration
-      }
-    }
-
-    const eventMap = {
-      play: setPlaying,
-      pause: setPaused,
-      ended: setPlayed,
-      timeupdate: setTimeWhenPaused,
-      durationchange: setDuration,
-      waiting: setWaiting,
-      playing: setLoaded,
-    } as const
+  }
+}
+const duration = defaultRef(() => {
+  if (localAudio) {
+    return localAudio.duration
+  }
+  if (typeof props.audio?.duration === "number") {
+    return props.audio.duration / 1e3
+  }
+  return 0
+})
+const setDuration = () => {
+  if (localAudio) {
+    duration.value = localAudio.duration
+  }
+}
+
+const eventMap = {
+  play: setPlaying,
+  pause: setPaused,
+  ended: setPlayed,
+  timeupdate: setTimeWhenPaused,
+  durationchange: setDuration,
+  waiting: setWaiting,
+  playing: setLoaded,
+} as const
 
+/**
+ * If we're transforming the globally active audio
+ * into our local audio, then we need to initialize
+ * the local state syncing from the audio object
+ * to our local refs.
+ *
+ * This lives here instead of closer to where `localAudio`
+ * is defined because `initLocalAudio` and several of
+ * the functions it depends on also all depend on the
+ * `localAudio` variable. This is the earliest in
+ * `setup` that this can be called.
+ */
+if (localAudio) {
+  initLocalAudio()
+}
+
+onUnmounted(() => {
+  if (!localAudio) {
+    return
+  }
+
+  Object.entries(eventMap).forEach(([name, fn]) =>
+    localAudio?.removeEventListener(name, fn)
+  )
+
+  const { matches: isSearchRoute } = useMatchSearchRoutes()
+  const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
+
+  if (
+    (isSingleResultRoute.value && route.params.id === props.audio.id) ||
+    (isSearchRoute.value && mediaStore.getItemById(AUDIO, props.audio.id))
+  ) {
     /**
-     * If we're transforming the globally active audio
-     * into our local audio, then we need to initialize
-     * the local state syncing from the audio object
-     * to our local refs.
+     * If switching to any route other than the single result
+     * route for this track, pause it. Otherwise, let it keep
+     * playing to introduce a "seamless" feeling between the
+     * search results page and the single result page.
      *
-     * This lives here instead of closer to where `localAudio`
-     * is defined because `initLocalAudio` and several of
-     * the functions it depends on also all depend on the
-     * `localAudio` variable. This is the earliest in
-     * `setup` that this can be called.
+     * This handles going from the search page to the single
+     * result page for a different track than is currently playing.
+     * It also handles the same interaction for related audio.
+     * Also for related audio, it will handle pausing any related
+     * audio when navigating back from the single result page
+     * to the search results page.
+     *
+     * Also, if the currently playing audio is present in the
+     * existing list of search results, then also let it keep
+     * playing.
      */
-    if (localAudio) {
-      initLocalAudio()
-    }
-
-    onUnmounted(() => {
-      if (!localAudio) {
-        return
-      }
-
-      Object.entries(eventMap).forEach(([name, fn]) =>
-        localAudio?.removeEventListener(name, fn)
-      )
-
-      const { matches: isSearchRoute } = useMatchSearchRoutes()
-      const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
-
-      if (
-        (isSingleResultRoute.value && route.params.id === props.audio.id) ||
-        (isSearchRoute.value && mediaStore.getItemById(AUDIO, props.audio.id))
-      ) {
-        /**
-         * If switching to any route other than the single result
-         * route for this track, pause it. Otherwise, let it keep
-         * playing to introduce a "seamless" feeling between the
-         * search results page and the single result page.
-         *
-         * This handles going from the search page to the single
-         * result page for a different track than is currently playing.
-         * It also handles the same interaction for related audio.
-         * Also for related audio, it will handle pausing any related
-         * audio when navigating back from the single result page
-         * to the search results page.
-         *
-         * Also, if the currently playing audio is present in the
-         * existing list of search results, then also let it keep
-         * playing.
-         */
-        return
-      }
-
-      localAudio.pause()
-    })
-
-    const play = () => {
-      // Delay initializing the local audio element until playback is requested
-      if (!localAudio) {
-        initLocalAudio()
-      }
-
-      const playPromise = localAudio?.play()
-      // Check if the audio can be played successfully
-      if (playPromise !== undefined) {
-        playPromise.catch((err) => {
-          let message: string
-          switch (err.name) {
-            case "NotAllowedError": {
-              message = "err_unallowed"
-              break
-            }
-            case "NotSupportedError": {
-              message = "err_unsupported"
-              break
-            }
-            case "AbortError": {
-              message = "err_aborted"
-              break
-            }
-            default: {
-              message = "err_unknown"
-              console.warn(err)
-            }
-          }
-          activeMediaStore.setMessage({ message })
-          localAudio?.pause()
-        })
-      }
-    }
-    const pause = () => localAudio?.pause()
-
-    watch(
-      activeAudio.obj,
-      (audio) => {
-        if (
-          audio !== localAudio &&
-          (status.value === "playing" || status.value === "loading")
-        ) {
-          localAudio?.pause()
-        }
-      },
-      { immediate: true }
-    )
-
-    /* Timekeeping */
+    return
+  }
 
-    const message = computed(() =>
-      activeMediaStore.message
-        ? i18n.t(`audioTrack.messages.${activeMediaStore.message}`)
-        : ""
-    )
-
-    /* Interface with VAudioControl */
+  localAudio.pause()
+})
 
-    /**
-     * This function can safely ignore the `loading` status because
-     * that status is never toggled _to_.
-     */
-    const handleToggle = (state?: Exclude<AudioStatus, "loading">) => {
-      let event: AudioInteraction | undefined = undefined
-      if (!state) {
-        switch (status.value) {
-          case "playing": {
-            state = "paused"
-            break
-          }
-          case "paused":
-          case "played": {
-            state = "playing"
-            break
-          }
+const play = () => {
+  // Delay initializing the local audio element until playback is requested
+  if (!localAudio) {
+    initLocalAudio()
+  }
+
+  const playPromise = localAudio?.play()
+  // Check if the audio can be played successfully
+  if (playPromise !== undefined) {
+    playPromise.catch((err) => {
+      let message: string
+      switch (err.name) {
+        case "NotAllowedError": {
+          message = "err_unallowed"
+          break
         }
-      }
-
-      switch (state) {
-        case "playing": {
-          play()
-          event = "play"
+        case "NotSupportedError": {
+          message = "err_unsupported"
           break
         }
-        case "paused": {
-          pause()
-          event = "pause"
+        case "AbortError": {
+          message = "err_aborted"
           break
         }
+        default: {
+          message = "err_unknown"
+          console.warn(err)
+        }
       }
-      emitInteracted(event)
-    }
-
-    const emitInteracted = (event?: AudioInteraction) => {
-      if (!event) {
-        return
-      }
-      snackbar.dismiss()
-      emit("interacted", {
-        event,
-        id: props.audio.id,
-        provider: props.audio.provider,
-      })
+      activeMediaStore.setMessage({ message })
+      localAudio?.pause()
+    })
+  }
+}
+const pause = () => localAudio?.pause()
+
+watch(
+  activeAudio.obj,
+  (audio) => {
+    if (
+      audio !== localAudio &&
+      (status.value === "playing" || status.value === "loading")
+    ) {
+      localAudio?.pause()
     }
+  },
+  { immediate: true }
+)
 
-    /* Interface with VWaveform */
+/* Timekeeping */
 
-    const handleSeeked = (frac: number) => {
-      if (!localAudio) {
-        initLocalAudio()
-      }
-      /**
-       * Calling initLocalAudio will guarantee localAudio
-       * to be an HTMLAudioElement, but we can't prove that
-       * to TypeScript without jumping through some tricky
-       * hoops (using `assert`) or adding unnecessary
-       * runtime checks.
-       */
-      if (localAudio) {
-        localAudio.currentTime = frac * duration.value
-      }
-      emitInteracted("seek")
-    }
+const message = computed(() =>
+  activeMediaStore.message
+    ? t(`audioTrack.messages.${activeMediaStore.message}`)
+    : ""
+)
 
-    /* Layout */
-    const layoutComponent = computed(() => layoutMappings[props.layout])
+/* Interface with VAudioControl */
 
-    /**
-     * Sets default size if not provided.
-     */
-    const layoutSize = computed(() => {
-      if (props.layout === "box" && !props.size) {
-        return undefined
+/**
+ * This function can safely ignore the `loading` status because
+ * that status is never toggled _to_.
+ */
+const handleToggle = (state?: Exclude<AudioStatus, "loading">) => {
+  let event: AudioInteraction | undefined = undefined
+  if (!state) {
+    switch (status.value) {
+      case "playing": {
+        state = "paused"
+        break
       }
-      return props.size ?? "m"
-    })
-
-    /**
-     * A ref used on the play/pause button,
-     * so we can capture clicks and skip
-     * sending an event to the boxed layout.
-     */
-    const audioControlRef = ref<{ $el: HTMLElement } | null>(null)
-
-    /**
-     * A ref used on the waveform, so we can capture mousedown on the
-     * audio track outside it as it will open a detail page.
-     */
-    const waveformRef = ref<{ $el: HTMLElement } | null>(null)
-
-    const handleMousedown = (event: MouseEvent) => {
-      const inWaveform =
-        waveformRef.value?.$el.contains(event.target as Node) ?? false
-      snackbar.handleMouseDown()
-      emit("mousedown", { event, inWaveform })
-    }
-
-    /**
-     * These layout-conditional props and listeners allow us
-     * to set properties on the parent element depending on
-     * the layout in use.
-     */
-    const isComposite = computed(() => ["box", "row"].includes(props.layout))
-    const layoutBasedProps = computed(() =>
-      isComposite.value
-        ? {
-            href: `/audio/${props.audio.id}/${
-              props.searchTerm ? "?q=" + props.searchTerm : ""
-            }`,
-            class: [
-              "cursor-pointer",
-              {
-                "focus-bold-filled": props.layout === "box",
-                "focus-slim-tx": props.layout === "row",
-              },
-            ],
-          }
-        : {}
-    )
-    const ariaLabel = computed(() =>
-      isComposite.value
-        ? i18n.t("audioTrack.ariaLabelInteractiveSeekable", {
-            title: props.audio.title,
-          })
-        : i18n.t("audioTrack.ariaLabel", { title: props.audio.title })
-    )
-
-    const togglePlayback = () => {
-      status.value = activeAudioStatus.includes(status.value)
-        ? "paused"
-        : "playing"
-      handleToggle(status.value)
-    }
-
-    const { isSeeking, ...seekable } = useSeekable({
-      duration,
-      currentTime,
-      isReady: ref(true),
-      isSeekable: computed(() => props.layout !== "box"),
-      onSeek: handleSeeked,
-      onTogglePlayback: togglePlayback,
-    })
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === keycodes.Enter) {
-        emit("keydown", event)
+      case "paused":
+      case "played": {
+        state = "playing"
+        break
       }
-      seekable.listeners.keydown(event)
     }
+  }
 
-    const containerAttributes = computed(() => ({
-      // ARIA slider attributes are only added when interactive
-      ...(isComposite.value ? seekable.attributes.value : {}),
-      ...layoutBasedProps.value,
-    }))
-
-    const snackbar = useAudioSnackbar()
-
-    const handleFocus = (event: FocusEvent) => {
-      snackbar.show()
-      emit("focus", event)
-    }
-
-    const handleBlur = () => {
-      snackbar.hide()
-      seekable.listeners.blur()
-    }
-
-    const handleWaveformFocus = (event: FocusEvent) => {
-      if (!isComposite.value) {
-        handleFocus(event)
-      }
+  switch (state) {
+    case "playing": {
+      play()
+      event = "play"
+      break
     }
-    const handleWaveformBlur = () => {
-      if (!isComposite.value) {
-        handleBlur()
-      }
+    case "paused": {
+      pause()
+      event = "pause"
+      break
     }
+  }
+  emitInteracted(event)
+}
+
+const emitInteracted = (event?: AudioInteraction) => {
+  if (!event) {
+    return
+  }
+  snackbar.dismiss()
+  emit("interacted", {
+    event,
+    id: props.audio.id,
+    provider: props.audio.provider,
+  })
+}
+
+/* Interface with VWaveform */
+
+const handleSeeked = (frac: number) => {
+  if (!localAudio) {
+    initLocalAudio()
+  }
+  /**
+   * Calling initLocalAudio will guarantee localAudio
+   * to be an HTMLAudioElement, but we can't prove that
+   * to TypeScript without jumping through some tricky
+   * hoops (using `assert`) or adding unnecessary
+   * runtime checks.
+   */
+  if (localAudio) {
+    localAudio.currentTime = frac * duration.value
+  }
+  emitInteracted("seek")
+}
+
+/* Layout */
+const layoutComponent = computed(() => layoutMappings[props.layout])
 
-    return {
-      status,
-      message,
-      ariaLabel,
-      handleToggle,
-      handleSeeked,
-      handleKeydown,
-      handleBlur,
-      handleMousedown,
-      handleFocus,
-      handleWaveformBlur,
-      handleWaveformFocus,
-
-      isSeeking,
+/**
+ * Sets default size if not provided.
+ */
+const layoutSize = computed(() => {
+  if (props.layout === "box" && !props.size) {
+    return undefined
+  }
+  return props.size ?? "m"
+})
 
-      currentTime,
-      duration,
+/**
+ * A ref used on the play/pause button,
+ * so we can capture clicks and skip
+ * sending an event to the boxed layout.
+ */
+const audioControlRef = ref<{ $el: HTMLElement } | null>(null)
 
-      layoutComponent,
-      layoutSize,
+/**
+ * A ref used on the waveform, so we can capture mousedown on the
+ * audio track outside it as it will open a detail page.
+ */
+const waveformRef = ref<{ $el: HTMLElement } | null>(null)
 
-      isComposite,
-      containerAttributes,
+const handleMousedown = (event: MouseEvent) => {
+  const inWaveform =
+    waveformRef.value?.$el.contains(event.target as Node) ?? false
+  snackbar.handleMouseDown()
+  emit("mousedown", { event, inWaveform })
+}
 
-      audioControlRef,
-      waveformRef,
-    }
-  },
+/**
+ * These layout-conditional props and listeners allow us
+ * to set properties on the parent element depending on
+ * the layout in use.
+ */
+const isComposite = computed(() => ["box", "row"].includes(props.layout))
+const layoutBasedProps = computed(() =>
+  isComposite.value
+    ? {
+        href: `/audio/${props.audio.id}/${
+          props.searchTerm ? "?q=" + props.searchTerm : ""
+        }`,
+        class: [
+          "cursor-pointer",
+          {
+            "focus-bold-filled": props.layout === "box",
+            "focus-slim-tx": props.layout === "row",
+          },
+        ],
+      }
+    : {}
+)
+const ariaLabel = computed(() =>
+  isComposite.value
+    ? t("audioTrack.ariaLabelInteractiveSeekable", {
+        title: props.audio.title,
+      })
+    : t("audioTrack.ariaLabel", { title: props.audio.title })
+)
+
+const togglePlayback = () => {
+  status.value = activeAudioStatus.includes(status.value) ? "paused" : "playing"
+  handleToggle(status.value)
+}
+
+const { isSeeking, ...seekable } = useSeekable({
+  duration,
+  currentTime,
+  isReady: ref(true),
+  isSeekable: computed(() => props.layout !== "box"),
+  onSeek: handleSeeked,
+  onTogglePlayback: togglePlayback,
 })
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === keycodes.Enter) {
+    emit("keydown", event)
+  }
+  seekable.listeners.keydown(event)
+}
+
+const containerAttributes = computed(() => ({
+  // ARIA slider attributes are only added when interactive
+  ...(isComposite.value ? seekable.attributes.value : {}),
+  ...layoutBasedProps.value,
+}))
+
+const snackbar = useAudioSnackbar()
+
+const handleFocus = (event: FocusEvent) => {
+  snackbar.show()
+  emit("focus", event)
+}
+
+const handleBlur = () => {
+  snackbar.hide()
+  seekable.listeners.blur()
+}
+
+const handleWaveformFocus = (event: FocusEvent) => {
+  if (!isComposite.value) {
+    handleFocus(event)
+  }
+}
+const handleWaveformBlur = () => {
+  if (!isComposite.value) {
+    handleBlur()
+  }
+}
 </script>
diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
index 8d672d4f55e..1351773b5d0 100644
--- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -18,10 +18,9 @@
         />
       </template>
 
-      <template #audio-control="{ size, layout }">
+      <template #audio-control="audioControlProps">
         <VAudioControl
-          :size="size"
-          :layout="layout"
+          v-bind="audioControlProps"
           :status="status"
           @toggle="handleToggle"
         />
@@ -30,10 +29,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 
 import { useAnalytics } from "~/composables/use-analytics"
 import { useActiveAudio } from "~/composables/use-active-audio"
@@ -54,217 +53,196 @@ import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
  * Displays the waveform and basic information about the track, along with
  * controls to play, pause or seek to a point on the track.
  */
-export default defineComponent({
-  name: "VGlobalAudioTrack",
-  components: {
-    VAudioControl,
-    VWaveform,
-    VGlobalLayout,
-  },
-  props: {
-    /**
-     * the information about the track, typically from a track's detail endpoint
-     */
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
-    const activeMediaStore = useActiveMediaStore()
-    const activeAudio = useActiveAudio()
-    const { sendCustomEvent } = useAnalytics()
-
-    const ariaLabel = computed(() =>
-      i18n.t("audioTrack.ariaLabel", { title: props.audio.title })
-    )
 
-    const status = ref<AudioStatus>("paused")
-    const currentTime = ref(0)
-    const duration = defaultRef(() => {
-      if (typeof props.audio?.duration === "number") {
-        return props.audio.duration / 1e3
-      }
-      return 0
-    })
-
-    const setPlaying = () => {
-      if (props.audio.hasLoaded) {
-        status.value = "playing"
-      } else {
-        status.value = "loading"
-      }
-      updateTimeLoop()
-    }
-    const setPaused = () => (status.value = "paused")
-    const setPlayed = () => (status.value = "played")
-
-    const setTimeWhenPaused = (event: Event) => {
-      if (status.value !== "playing" && event.target) {
-        currentTime.value = (event.target as HTMLAudioElement).currentTime ?? 0
-        if (status.value === "played") {
-          // Set to pause to remove replay icon
-          status.value = "paused"
-        }
-      }
-    }
-    const setDuration = () => {
-      if (activeAudio.obj.value) {
-        duration.value = activeAudio.obj.value.duration
-      }
-    }
-
-    const updateTimeLoop = () => {
-      if (
-        activeAudio.obj.value &&
-        (status.value === "playing" || status.value === "loading")
-      ) {
-        currentTime.value = activeAudio.obj.value.currentTime
-        window.requestAnimationFrame(updateTimeLoop)
-      }
-    }
+const props = defineProps<{
+  /**
+   * the information about the track, typically from a track's detail endpoint
+   */
+  audio: AudioDetail
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const activeMediaStore = useActiveMediaStore()
+const activeAudio = useActiveAudio()
+const { sendCustomEvent } = useAnalytics()
+
+const ariaLabel = computed(() =>
+  t("audioTrack.ariaLabel", { title: props.audio.title })
+)
+
+const status = ref<AudioStatus>("paused")
+const currentTime = ref(0)
+const duration = defaultRef(() => {
+  if (typeof props.audio?.duration === "number") {
+    return props.audio.duration / 1e3
+  }
+  return 0
+})
 
-    const mediaStore = useMediaStore()
-    const setLoaded = () => {
-      mediaStore.setMediaProperties("audio", props.audio.id, {
-        hasLoaded: true,
-      })
-      status.value = "playing"
+const setPlaying = () => {
+  if (props.audio.hasLoaded) {
+    status.value = "playing"
+  } else {
+    status.value = "loading"
+  }
+  updateTimeLoop()
+}
+const setPaused = () => (status.value = "paused")
+const setPlayed = () => (status.value = "played")
+
+const setTimeWhenPaused = (event: Event) => {
+  if (status.value !== "playing" && event.target) {
+    currentTime.value = (event.target as HTMLAudioElement).currentTime ?? 0
+    if (status.value === "played") {
+      // Set to pause to remove replay icon
+      status.value = "paused"
     }
-    const setWaiting = () => {
-      status.value = "loading"
+  }
+}
+const setDuration = () => {
+  if (activeAudio.obj.value) {
+    duration.value = activeAudio.obj.value.duration
+  }
+}
+
+const updateTimeLoop = () => {
+  if (
+    activeAudio.obj.value &&
+    (status.value === "playing" || status.value === "loading")
+  ) {
+    currentTime.value = activeAudio.obj.value.currentTime
+    window.requestAnimationFrame(updateTimeLoop)
+  }
+}
+
+const mediaStore = useMediaStore()
+const setLoaded = () => {
+  mediaStore.setMediaProperties("audio", props.audio.id, {
+    hasLoaded: true,
+  })
+  status.value = "playing"
+}
+const setWaiting = () => {
+  status.value = "loading"
+}
+
+const eventMap = {
+  play: setPlaying,
+  pause: setPaused,
+  ended: setPlayed,
+  timeupdate: setTimeWhenPaused,
+  durationchange: setDuration,
+  waiting: setWaiting,
+  playing: setLoaded,
+} as const
+
+watch(
+  activeAudio.obj,
+  (audio, _, onInvalidate) => {
+    if (!audio) {
+      return
     }
 
-    const eventMap = {
-      play: setPlaying,
-      pause: setPaused,
-      ended: setPlayed,
-      timeupdate: setTimeWhenPaused,
-      durationchange: setDuration,
-      waiting: setWaiting,
-      playing: setLoaded,
-    } as const
-
-    watch(
-      activeAudio.obj,
-      (audio, _, onInvalidate) => {
-        if (!audio) {
-          return
-        }
-
-        Object.entries(eventMap).forEach(([name, fn]) =>
-          audio.addEventListener(name, fn)
-        )
-
-        currentTime.value = audio.currentTime
-        if (audio.duration && !isNaN(audio.duration)) {
-          duration.value = audio.duration
-        }
-
-        /**
-         * By the time the `activeAudio` is updated and a rerender
-         * happens (triggering this watch function), all the events
-         * we've registered above will already have fired, so we
-         * need to derive the current status of the audio from the
-         * `paused` and `ended` booleans on the audio object.
-         *
-         * In practice this will always result in the status being
-         * set to `playing` as the active audio is only updated when
-         * a new track is set to play. But for good measure we might
-         * as well do this robustly and make sure that the status is
-         * always synced any time the active audio hangs.
-         */
-        if (audio.paused) {
-          if (audio.ended) {
-            setPlayed()
-          } else {
-            setPaused()
-          }
-        } else {
-          setPlaying()
-        }
-
-        onInvalidate(() => {
-          Object.entries(eventMap).forEach(([name, fn]) =>
-            audio.removeEventListener(name, fn)
-          )
-        })
-      },
-      { immediate: true }
-    )
-
-    const play = () => activeAudio.obj.value?.play()
-    const pause = () => activeAudio.obj.value?.pause()
-
-    /* Timekeeping */
-    const message = computed<string | undefined>(
-      () => activeMediaStore.message ?? undefined
+    Object.entries(eventMap).forEach(([name, fn]) =>
+      audio.addEventListener(name, fn)
     )
 
-    /* Interface with VAudioControl */
-
-    const sendAudioInteractionEvent = (event: AudioInteraction) => {
-      sendCustomEvent("AUDIO_INTERACTION", {
-        id: props.audio.id,
-        provider: props.audio.provider,
-        event,
-        component: "VGlobalAudioTrack",
-      })
+    currentTime.value = audio.currentTime
+    if (audio.duration && !isNaN(audio.duration)) {
+      duration.value = audio.duration
     }
-    const handleToggle = (
-      state?: Exclude<AudioStatus, "loading" | "played">
-    ) => {
-      if (!state) {
-        switch (status.value) {
-          case "playing": {
-            state = "paused"
-            break
-          }
-          case "paused":
-          case "played": {
-            state = "playing"
-            break
-          }
-        }
-      }
-      let event: AudioInteraction | undefined = undefined
-      switch (state) {
-        case "playing": {
-          play()
-          event = "play"
-          break
-        }
-        case "paused": {
-          pause()
-          event = "pause"
-          break
-        }
-      }
-      if (event) {
-        sendAudioInteractionEvent(event)
+
+    /**
+     * By the time the `activeAudio` is updated and a rerender
+     * happens (triggering this watch function), all the events
+     * we've registered above will already have fired, so we
+     * need to derive the current status of the audio from the
+     * `paused` and `ended` booleans on the audio object.
+     *
+     * In practice this will always result in the status being
+     * set to `playing` as the active audio is only updated when
+     * a new track is set to play. But for good measure we might
+     * as well do this robustly and make sure that the status is
+     * always synced any time the active audio hangs.
+     */
+    if (audio.paused) {
+      if (audio.ended) {
+        setPlayed()
+      } else {
+        setPaused()
       }
+    } else {
+      setPlaying()
     }
 
-    /* Interface with VWaveform */
-
-    const handleSeeked = (frac: number) => {
-      if (activeAudio.obj.value) {
-        activeAudio.obj.value.currentTime = frac * duration.value
-        sendAudioInteractionEvent("seek")
+    onInvalidate(() => {
+      Object.entries(eventMap).forEach(([name, fn]) =>
+        audio.removeEventListener(name, fn)
+      )
+    })
+  },
+  { immediate: true }
+)
+
+const play = () => activeAudio.obj.value?.play()
+const pause = () => activeAudio.obj.value?.pause()
+
+/* Timekeeping */
+const message = computed<string | undefined>(
+  () => activeMediaStore.message ?? undefined
+)
+
+/* Interface with VAudioControl */
+
+const sendAudioInteractionEvent = (event: AudioInteraction) => {
+  sendCustomEvent("AUDIO_INTERACTION", {
+    id: props.audio.id,
+    provider: props.audio.provider,
+    event,
+    component: "VGlobalAudioTrack",
+  })
+}
+const handleToggle = (state?: Exclude<AudioStatus, "loading" | "played">) => {
+  if (!state) {
+    switch (status.value) {
+      case "playing": {
+        state = "paused"
+        break
+      }
+      case "paused":
+      case "played": {
+        state = "playing"
+        break
       }
     }
-
-    return {
-      status,
-      message,
-      handleToggle,
-      handleSeeked,
-
-      currentTime,
-      duration,
-      ariaLabel,
+  }
+  let event: AudioInteraction | undefined = undefined
+  switch (state) {
+    case "playing": {
+      play()
+      event = "play"
+      break
     }
-  },
-})
+    case "paused": {
+      pause()
+      event = "pause"
+      break
+    }
+  }
+  if (event) {
+    sendAudioInteractionEvent(event)
+  }
+}
+
+/* Interface with VWaveform */
+
+const handleSeeked = (frac: number) => {
+  if (activeAudio.obj.value) {
+    activeAudio.obj.value.currentTime = frac * duration.value
+    sendAudioInteractionEvent("seek")
+  }
+}
 </script>
diff --git a/frontend/src/components/VAudioTrack/VWaveform.vue b/frontend/src/components/VAudioTrack/VWaveform.vue
index 36078bb697b..9b577a0dc78 100644
--- a/frontend/src/components/VAudioTrack/VWaveform.vue
+++ b/frontend/src/components/VAudioTrack/VWaveform.vue
@@ -6,7 +6,7 @@
     :style="heightProperties"
     :tabIndex="isTabbable && isInteractive ? 0 : -1"
     :aria-disabled="!isInteractive"
-    :aria-label="$t('waveform.label')"
+    :aria-label="t('waveform.label')"
     v-on="eventHandlers"
   >
     <!-- Focus ring -->
@@ -144,8 +144,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed, ref, toRef } from "vue"
 
 import { downsampleArray, upsampleArray } from "~/utils/resampling"
 import { timeFmt } from "~/utils/time-fmt"
@@ -157,410 +159,351 @@ import useResizeObserver from "~/composables/use-resize-observer"
 
 import { hash, rand as prng } from "~/utils/prng"
 
-import { defineEvent } from "~/types/emits"
-
 /**
  * If the duration is above this threshold, the progress timestamp will show ms.
  */
-const MAX_SECONDS_FOR_MS = 1
+// const MAX_SECONDS_FOR_MS = 1
 
 /**
  * Renders an SVG representation of the waveform given a list of heights for the
  * bars.
  */
-export default defineComponent({
-  name: "VWaveform",
-  props: {
+
+const props = withDefaults(
+  defineProps<{
     /**
      * an array of heights of the bars; The waveform will be generated with
      * bars of random length if the prop is not provided.
      */
-    peaks: {
-      type: Array as PropType<number[]>,
-      required: false,
-      validator: (val: unknown[]) =>
-        val.every((item) => typeof item === "number"),
-    },
+    peaks?: number[]
     /**
      * the message to display instead of the waveform; This is useful when
      * displaying a loading or error state.
      */
-    message: {
-      type: String,
-    },
+    message?: string
     /**
      * the current play time of the audio track
      */
-    currentTime: {
-      type: Number,
-      default: 0,
-    },
+    currentTime?: number
     /**
      * the total play time of the audio track
      */
-    duration: {
-      type: Number as PropType<number>,
-      default: 0,
-    },
+    duration?: number
     /**
      * the fraction of the waveform height to use for the bars and timestamp;
      * The remaining space can be used to place other elements.
      */
-    usableFrac: {
-      type: Number,
-      default: 1,
-    },
+    usableFrac?: number
     /**
      * selectively enable features in the waveform; Available features are
      * `'timestamps'`, `'duration'`, `'seek'`.
      */
-    features: {
-      type: Array as PropType<AudioFeature[]>,
-      default: () => ["timestamps", "seek"],
-    },
+    features?: AudioFeature[]
     /**
      * An object of notices to display when a feature is disabled.
      * `'timestamps'`, `'duration'`, `'seek'`.
      */
-    featureNotices: {
-      type: Object as PropType<Record<AudioFeature, boolean>>,
-      default: () => ({}),
-    },
+    featureNotices?: Record<AudioFeature, boolean>
     /**
      * Audio id to make the randomly-created peaks deterministic.
      */
-    audioId: {
-      type: String,
-      required: true,
-    },
+    audioId: string
     /**
      * whether the waveform can be focused by using the `Tab` key
      */
-    isTabbable: {
-      type: Boolean,
-      default: true,
-    },
+    isTabbable?: boolean
     /**
      * whether the waveform should render as seeking when it is controlled by
      * the parent audio track
      */
-    isParentSeeking: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    /**
-     * Emitted when the waveform receives mouse events for seeking,
-     * either single clicks on a specific part of the waveform,
-     * or a click and drag.
-     *
-     * Also emitted when the waveform receives arrow key or home/end
-     * keyboard events that also correspond to seeking.
-     */
-    seeked: defineEvent<[number]>(),
-    "toggle-playback": defineEvent<[]>(),
-    focus: defineEvent<[FocusEvent]>(),
-    blur: defineEvent<[FocusEvent]>(),
-  },
-  setup(props, { emit }) {
-    /* Utils */
-
-    /**
-     * Get the x-coordinate of the event with respect to the bounding box of the
-     * waveform.
-     * @param event - the event from which to get the position
-     * @returns the x-position of the event inside the waveform
-     */
-    const getPosition = (event: MouseEvent): number => {
-      return el.value
-        ? event.clientX - el.value.getBoundingClientRect().x
-        : event.clientX
-    }
-    /**
-     * Get the x-position of the event with respect to the bounding box of the
-     * waveform, as a fraction of the waveform width.
-     * @param event - the event from which to get the position
-     * @returns the x-position of the event as a fraction
-     */
-    const getPositionFrac = (event: MouseEvent): number => {
-      const xPos = getPosition(event)
-      return xPos / waveformDimens.value.width
-    }
-    /**
-     * Get the number of peaks that will fit within the given width.
-     * @param width - the number of pixels inside which to count peaks
-     * @returns the number of peaks that can be accommodated
-     */
-    const getPeaksInWidth = (width: number): number => {
-      return Math.floor((width - barGap) / (barWidth + barGap))
-    }
+    isParentSeeking?: boolean
+  }>(),
+  {
+    peaks: () => [] as number[],
+    message: "",
+    currentTime: 0,
+    duration: 0,
+    usableFrac: 1,
+    features: () => ["timestamps", "seek"] as AudioFeature[],
+    featureNotices: () => ({} as Record<AudioFeature, boolean>),
+    isTabbable: true,
+    isParentSeeking: false,
+  }
+)
+
+const validatePeaks = (val: unknown[]) =>
+  val.every((item) => typeof item === "number")
+if (props.peaks?.length) {
+  if (!validatePeaks(props.peaks)) {
+    console.warn("The peaks prop must be an array of numbers.")
+  }
+}
 
-    /* Element dimensions */
+const emit = defineEmits<{
+  /**
+   * Emitted when the waveform receives mouse events for seeking,
+   * either single clicks on a specific part of the waveform,
+   * or a click and drag.
+   *
+   * Also emitted when the waveform receives arrow key or home/end
+   * keyboard events that also correspond to seeking.
+   */
+  seeked: [number]
+  "toggle-playback": []
+  focus: [FocusEvent]
+  blur: [FocusEvent]
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+/* Utils */
 
-    const el = ref<HTMLElement | null>(null) // template ref
-    const { dimens: waveformDimens } = useResizeObserver(el)
+/**
+ * Get the x-coordinate of the event with respect to the bounding box of the
+ * waveform.
+ * @param event - the event from which to get the position
+ * @returns the x-position of the event inside the waveform
+ */
+const getPosition = (event: MouseEvent): number => {
+  return el.value
+    ? event.clientX - el.value.getBoundingClientRect().x
+    : event.clientX
+}
+/**
+ * Get the x-position of the event with respect to the bounding box of the
+ * waveform, as a fraction of the waveform width.
+ * @param event - the event from which to get the position
+ * @returns the x-position of the event as a fraction
+ */
+const getPositionFrac = (event: MouseEvent): number => {
+  const xPos = getPosition(event)
+  return xPos / waveformDimens.value.width
+}
+/**
+ * Get the number of peaks that will fit within the given width.
+ * @param width - the number of pixels inside which to count peaks
+ * @returns the number of peaks that can be accommodated
+ */
+const getPeaksInWidth = (width: number): number => {
+  return Math.floor((width - barGap) / (barWidth + barGap))
+}
 
-    /* Features */
+/* Element dimensions */
 
-    const showDuration = computed(() => props.features.includes("duration"))
-    const showTimestamps = computed(() => props.features.includes("timestamps"))
-    const isSeekable = computed(() => props.features.includes("seek"))
+const el = ref<HTMLElement | null>(null) // template ref
+const { dimens: waveformDimens } = useResizeObserver(el)
 
-    /* State */
+/* Features */
 
-    const isReady = computed(() => !props.message)
-    const isInteractive = computed(() => isSeekable.value && isReady.value)
-    const isSeeking = computed(
-      () => (!props.isTabbable && props.isParentSeeking) || isSelfSeeking.value
-    )
+const showDuration = computed(() => props.features.includes("duration"))
+const showTimestamps = computed(() => props.features.includes("timestamps"))
+const isSeekable = computed(() => props.features.includes("seek"))
 
-    /* Resampling */
+/* State */
 
-    const barWidth = 2
-    const barGap = 2
-    const peakCount = computed(() =>
-      getPeaksInWidth(waveformDimens.value.width)
-    )
+const isReady = computed(() => !props.message)
+const isInteractive = computed(() => isSeekable.value && isReady.value)
+const isSeeking = computed(
+  () => (!props.isTabbable && props.isParentSeeking) || isSelfSeeking.value
+)
 
-    const createRandomPeaks = (audioId: string) => {
-      const rand = prng(hash(audioId))
-      return Array.from({ length: 100 }, () => rand())
-    }
-    const peaks = computed(() =>
-      props.peaks?.length ? props.peaks : createRandomPeaks(props.audioId)
-    )
-    const normalizedPeaks = computed(() => {
-      let samples = peaks.value
-
-      const givenLength = samples.length
-      const required = peakCount.value
-      if (givenLength < required) {
-        samples = upsampleArray(samples, required)
-      } else if (givenLength > required) {
-        samples = downsampleArray(samples, required)
-      }
-
-      return samples.map(
-        (peak) => Math.max(peak, 0) * waveformDimens.value.height
-      )
-    })
-
-    /* SVG drawing */
-
-    const viewBox = computed(() =>
-      [0, 0, waveformDimens.value.width, waveformDimens.value.height].join(" ")
-    )
-    const spaceBefore = (index: number) => index * barWidth + index * barGap
-    const spaceAbove = (index: number) =>
-      waveformDimens.value.height - normalizedPeaks.value[index]
-
-    /* Progress bar */
-    const progressBarWidth = computed(() => {
-      const frac = isDragging.value ? seekFrac.value ?? 0 : currentFrac.value
-      return waveformDimens.value.width * frac
-    })
-
-    /* Progress timestamp */
-
-    const progressTimestampEl = ref<HTMLElement>()
-    const progressTimestamp = computed(() =>
-      isDragging.value ? seekTimestamp.value : props.currentTime
-    )
-    const isProgressTimestampCutoff = computed(() => {
-      if (!progressTimestampEl.value) {
-        return false
-      }
-      const barWidth = progressBarWidth.value
-      const timestampWidth = progressTimestampEl.value.offsetWidth
-      return barWidth < timestampWidth + 2
-    })
+/* Resampling */
 
-    /**
-     * Whether to show the ms part in the timestamps. True when the duration
-     * is below MAX_SECONDS_FOR_MS seconds.
-     */
-    const showMsInTimestamp = computed(
-      () =>
-        Number.isFinite(props.duration) && props.duration < MAX_SECONDS_FOR_MS
-    )
-
-    /* Seek bar */
-
-    const seekFrac = ref<number | null>(null)
-    const seekBarWidth = computed(() => {
-      const frac = seekFrac.value ?? currentFrac.value
-      return waveformDimens.value.width * frac
-    })
-    const seekIndex = computed(() => getPeaksInWidth(seekBarWidth.value))
-
-    /* Seek timestamp */
-
-    const seekTimestampEl = ref<HTMLElement | null>(null)
-    const seekTimestamp = computed(() =>
-      seekFrac.value ? seekFrac.value * props.duration : props.duration
-    )
-    const isSeekTimestampCutoff = computed(() => {
-      if (!seekTimestampEl.value) {
-        return false
-      }
-      const barWidth = seekBarWidth.value
-      const timestampWidth = seekTimestampEl.value.offsetWidth
-      return barWidth < timestampWidth + 2
-    })
-
-    const { isSeeking: isSelfSeeking, ...seekable } = useSeekable({
-      duration: toRef(props, "duration"),
-      currentTime: toRef(props, "currentTime"),
-      isSeekable,
-      isReady,
-      onSeek: (frac) => {
-        clearSeekProgress()
-        emit("seeked", frac)
-      },
-      onTogglePlayback: () => emit("toggle-playback"),
-    })
-    const waveformAttributes = computed(() => ({
-      // ARIA slider attributes are only added when interactive
-      ...(isInteractive.value ? seekable.attributes.value : {}),
-    }))
-
-    /* Seeking */
+const barWidth = 2
+const barGap = 2
+const peakCount = computed(() => getPeaksInWidth(waveformDimens.value.width))
 
-    /**
-     * the seek jump length as a % of the track
-     */
-    const { currentFrac } = seekable.meta
-    const setSeekProgress = (event: MouseEvent) => {
-      seekFrac.value = getPositionFrac(event)
-    }
-    const clearSeekProgress = () => {
-      seekFrac.value = null
-    }
-    const seek = (event: MouseEvent) => {
-      emit("seeked", getPositionFrac(event))
-    }
+const createRandomPeaks = (audioId: string) => {
+  const rand = prng(hash(audioId))
+  return Array.from({ length: 100 }, () => rand())
+}
+const peaks = computed(() =>
+  props.peaks?.length ? props.peaks : createRandomPeaks(props.audioId)
+)
+const normalizedPeaks = computed(() => {
+  let samples = peaks.value
+
+  const givenLength = samples.length
+  const required = peakCount.value
+  if (givenLength < required) {
+    samples = upsampleArray(samples, required)
+  } else if (givenLength > required) {
+    samples = downsampleArray(samples, required)
+  }
+
+  return samples.map((peak) => Math.max(peak, 0) * waveformDimens.value.height)
+})
 
-    /* Dragging */
-
-    const dragThreshold = 2 // px
-    let startPos: null | number = null
-    const isDragging = ref(false)
-    const handleMouseDown = (event: MouseEvent) => {
-      if (!props.isTabbable) {
-        // to prevent focus
-        event.preventDefault()
-      }
-      isDragging.value = false
-      startPos = getPosition(event)
-      setSeekProgress(event)
-    }
-    const handleMouseMove = (event: MouseEvent) => {
-      if (startPos) {
-        const clickPos = getPosition(event)
-        if (Math.abs(clickPos - startPos) > dragThreshold) {
-          isDragging.value = true
-        }
-      }
-      setSeekProgress(event)
-    }
-    const handleMouseUp = (event: MouseEvent) => {
-      isDragging.value = false
-      startPos = null
-      seek(event)
-    }
-    const handleMouseLeave = () => {
-      clearSeekProgress()
-    }
-    const handleClick = (event: MouseEvent) => {
-      // Prevent event from bubbling to the parent anchor tag.
-      event.stopPropagation()
-      event.preventDefault()
-    }
-    const handleFocus = (event: FocusEvent) => {
-      emit("focus", event)
-    }
-    const handleBlur = (event: FocusEvent) => {
-      seekable.listeners.blur()
-      emit("blur", event)
-    }
+/* SVG drawing */
 
-    /* v-on */
-
-    const eventHandlers = computed(() => {
-      if (isInteractive.value) {
-        return {
-          mousedown: handleMouseDown,
-          mousemove: handleMouseMove,
-          mouseup: handleMouseUp,
-          mouseleave: handleMouseLeave,
-          click: handleClick,
-          blur: handleBlur,
-          focus: handleFocus,
-          keydown: seekable.listeners.keydown,
-        }
-      } else {
-        return {}
-      }
-    })
-
-    const heightProperties = computed(() => ({
-      "--usable-height": `${Math.floor(props.usableFrac * 100)}%`,
-      "--unusable-height": `${Math.floor((1 - props.usableFrac) * 100)}%`,
-    }))
-
-    const progressTimeLeft = computed(() => ({
-      "--progress-time-left": `${progressBarWidth.value}px`,
-    }))
-
-    const seekTimeLeft = computed(() => ({
-      "--seek-time-left": `${seekBarWidth.value}px`,
-    }))
+const viewBox = computed(() =>
+  [0, 0, waveformDimens.value.width, waveformDimens.value.height].join(" ")
+)
+const spaceBefore = (index: number) => index * barWidth + index * barGap
+const spaceAbove = (index: number) =>
+  waveformDimens.value.height - normalizedPeaks.value[index]
 
-    return {
-      timeFmt,
+/* Progress bar */
+const progressBarWidth = computed(() => {
+  const frac = isDragging.value ? seekFrac.value ?? 0 : currentFrac.value
+  return waveformDimens.value.width * frac
+})
 
-      el, // template ref
+/* Progress timestamp */
+
+const progressTimestampEl = ref<HTMLElement>()
+const progressTimestamp = computed(() =>
+  isDragging.value ? seekTimestamp.value : props.currentTime
+)
+const isProgressTimestampCutoff = computed(() => {
+  if (!progressTimestampEl.value) {
+    return false
+  }
+  const barWidth = progressBarWidth.value
+  const timestampWidth = progressTimestampEl.value.offsetWidth
+  return barWidth < timestampWidth + 2
+})
 
-      showDuration,
-      showTimestamps,
-      isSeekable,
+/**
+ * Whether to show the ms part in the timestamps. True when the duration
+ * is below MAX_SECONDS_FOR_MS seconds.
+ */
+// const showMsInTimestamp = computed(
+//   () => Number.isFinite(props.duration) && props.duration < MAX_SECONDS_FOR_MS
+// )
 
-      isReady,
-      isInteractive,
-      isSeeking,
+/* Seek bar */
 
-      barWidth,
-      normalizedPeaks,
+const seekFrac = ref<number | null>(null)
+const seekBarWidth = computed(() => {
+  const frac = seekFrac.value ?? currentFrac.value
+  return waveformDimens.value.width * frac
+})
+const seekIndex = computed(() => getPeaksInWidth(seekBarWidth.value))
+
+/* Seek timestamp */
+
+const seekTimestampEl = ref<HTMLElement | null>(null)
+const seekTimestamp = computed(() =>
+  seekFrac.value ? seekFrac.value * props.duration : props.duration
+)
+const isSeekTimestampCutoff = computed(() => {
+  if (!seekTimestampEl.value) {
+    return false
+  }
+  const barWidth = seekBarWidth.value
+  const timestampWidth = seekTimestampEl.value.offsetWidth
+  return barWidth < timestampWidth + 2
+})
 
-      waveformDimens,
-      viewBox,
-      spaceBefore,
-      spaceAbove,
+const { isSeeking: isSelfSeeking, ...seekable } = useSeekable({
+  duration: toRef(props, "duration"),
+  currentTime: toRef(props, "currentTime"),
+  isSeekable,
+  isReady,
+  onSeek: (frac) => {
+    clearSeekProgress()
+    emit("seeked", frac)
+  },
+  onTogglePlayback: () => emit("toggle-playback"),
+})
+const waveformAttributes = computed(() => ({
+  // ARIA slider attributes are only added when interactive
+  ...(isInteractive.value ? seekable.attributes.value : {}),
+}))
 
-      progressBarWidth,
-      progressTimestamp,
-      progressTimestampEl,
-      isProgressTimestampCutoff,
-      showMsInTimestamp,
+/* Seeking */
 
-      seekFrac,
-      seekBarWidth,
-      seekIndex,
+/**
+ * the seek jump length as a % of the track
+ */
+const { currentFrac } = seekable.meta
+const setSeekProgress = (event: MouseEvent) => {
+  seekFrac.value = getPositionFrac(event)
+}
+const clearSeekProgress = () => {
+  seekFrac.value = null
+}
+const seek = (event: MouseEvent) => {
+  emit("seeked", getPositionFrac(event))
+}
 
-      seekTimestamp,
-      seekTimestampEl,
-      isSeekTimestampCutoff,
-      waveformAttributes,
+/* Dragging */
+
+const dragThreshold = 2 // px
+let startPos: null | number = null
+const isDragging = ref(false)
+const handleMouseDown = (event: MouseEvent) => {
+  if (!props.isTabbable) {
+    // to prevent focus
+    event.preventDefault()
+  }
+  isDragging.value = false
+  startPos = getPosition(event)
+  setSeekProgress(event)
+}
+const handleMouseMove = (event: MouseEvent) => {
+  if (startPos) {
+    const clickPos = getPosition(event)
+    if (Math.abs(clickPos - startPos) > dragThreshold) {
+      isDragging.value = true
+    }
+  }
+  setSeekProgress(event)
+}
+const handleMouseUp = (event: MouseEvent) => {
+  isDragging.value = false
+  startPos = null
+  seek(event)
+}
+const handleMouseLeave = () => {
+  clearSeekProgress()
+}
+const handleClick = (event: MouseEvent) => {
+  // Prevent event from bubbling to the parent anchor tag.
+  event.stopPropagation()
+  event.preventDefault()
+}
+const handleFocus = (event: FocusEvent) => {
+  emit("focus", event)
+}
+const handleBlur = (event: FocusEvent) => {
+  seekable.listeners.blur()
+  emit("blur", event)
+}
 
-      eventHandlers,
+/* v-on */
 
-      heightProperties,
-      progressTimeLeft,
-      seekTimeLeft,
+const eventHandlers = computed(() => {
+  if (isInteractive.value) {
+    return {
+      mousedown: handleMouseDown,
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp,
+      mouseleave: handleMouseLeave,
+      click: handleClick,
+      blur: handleBlur,
+      focus: handleFocus,
+      keydown: seekable.listeners.keydown,
     }
-  },
+  } else {
+    return {}
+  }
 })
+
+const heightProperties = computed(() => ({
+  "--usable-height": `${Math.floor(props.usableFrac * 100)}%`,
+  "--unusable-height": `${Math.floor((1 - props.usableFrac) * 100)}%`,
+}))
+
+const progressTimeLeft = computed(() => ({
+  "--progress-time-left": `${progressBarWidth.value}px`,
+}))
+
+const seekTimeLeft = computed(() => ({
+  "--seek-time-left": `${seekBarWidth.value}px`,
+}))
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
index a4906f03a7e..8ecd63219f8 100644
--- a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
@@ -8,7 +8,7 @@
           class="label-bold line-clamp-3"
           :class="{ 'blur-text': shouldBlur }"
         >
-          {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+          {{ shouldBlur ? t("sensitiveContent.title.audio") : audio.title }}
         </h2>
         <div class="info">
           <VLicense
@@ -45,10 +45,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 import type { AudioSize } from "~/constants/audio"
@@ -56,39 +56,21 @@ import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 
 import VLicense from "~/components/VLicense/VLicense.vue"
 
-export default defineComponent({
-  name: "VBoxLayout",
-  components: {
-    VLicense,
-  },
-  props: {
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-    size: {
-      type: String as PropType<Extract<AudioSize, "s" | "l">>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
+const props = defineProps<{
+  audio: AudioDetail
+  size: Extract<AudioSize, "s" | "l">
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const isSmall = computed(() => props.size === "s")
+const isSmall = computed(() => props.size === "s")
 
-    const categoryLabel = computed(() =>
-      i18n.t(`filters.audioCategories.${props.audio.category}`)
-    )
+const categoryLabel = computed(() =>
+  t(`filters.audioCategories.${props.audio.category}`)
+)
 
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
-    return {
-      isSmall,
-      shouldBlur,
-
-      categoryLabel,
-    }
-  },
-})
+const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index ffe2879c83a..8712004c2c2 100644
--- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -12,16 +12,22 @@
         class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-dark-charcoal"
         :class="{ 'blur-text': shouldBlur }"
       >
-        {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+        {{ shouldBlur ? t("sensitiveContent.title.audio") : audio.title }}
       </VLink>
     </div>
-    <slot name="audio-control" size="medium" layout="global" />
+    <slot
+      name="audio-control"
+      :size="'medium' as const"
+      :layout="'global' as const"
+    />
     <slot name="controller" :usable-frac="1" />
   </div>
 </template>
 
-<script lang="ts">
-import { toRefs, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { toRefs } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 
@@ -30,27 +36,15 @@ import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VGlobalLayout",
-  components: {
-    VAudioThumbnail,
-    VLink,
-  },
-  props: {
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { audio } = toRefs(props)
-    const { isHidden: shouldBlur } = useSensitiveMedia(audio)
+const props = defineProps<{
+  audio: AudioDetail
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    return {
-      shouldBlur,
-    }
-  },
-})
+const { audio } = toRefs(props)
+const { isHidden: shouldBlur } = useSensitiveMedia(audio)
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
index 76ad08aa441..39a3d752b48 100644
--- a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -30,7 +30,7 @@
           isSmall ? 'label-bold' : 'description-bold',
         ]"
       >
-        {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+        {{ shouldBlur ? t("sensitiveContent.title.audio") : audio.title }}
       </h2>
 
       <div
@@ -48,7 +48,7 @@
           :class="{ 'blur-text': shouldBlur }"
         >
           <template #creator>{{
-            shouldBlur ? $t("sensitiveContent.creator") : audio.creator
+            shouldBlur ? t("sensitiveContent.creator") : audio.creator
           }}</template>
         </i18n-t>
         <!-- Small layout only -->
@@ -56,7 +56,7 @@
           <div class="flex flex-row">
             <span class="flex">{{ timeFmt(audio.duration || 0, true) }}</span
             ><span v-if="audio.category" class="dot-before">{{
-              $t(`filters.audioCategories.${audio.category}`)
+              t(`filters.audioCategories.${audio.category}`)
             }}</span>
           </div>
           <VLicense :hide-name="true" :license="audio.license" />
@@ -64,7 +64,7 @@
         <!-- Medium and large layouts -->
         <div v-else class="flex flex-shrink-0 flex-row">
           <span v-if="audio.category" :class="{ 'dot-before': isMedium }">{{
-            $t(`filters.audioCategories.${audio.category}`)
+            t(`filters.audioCategories.${audio.category}`)
           }}</span>
           <VLicense
             :hide-name="!isMd"
@@ -96,8 +96,10 @@
   </article>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import { timeFmt } from "~/utils/time-fmt"
 import type { AudioDetail } from "~/types/media"
@@ -110,53 +112,29 @@ import { useUiStore } from "~/stores/ui"
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
 import VLicense from "~/components/VLicense/VLicense.vue"
 
-export default defineComponent({
-  name: "VRowLayout",
-  components: {
-    VAudioThumbnail,
-    VLicense,
-  },
-  props: {
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-    size: {
-      type: String as PropType<AudioSize>,
-      required: false,
-    },
-  },
-  setup(props) {
-    const featureNotices: {
-      timestamps?: string
-      duration?: string
-      seek?: string
-    } = {}
-
-    const isSmall = computed(() => props.size === "s")
-    const isMedium = computed(() => props.size === "m")
-    const isLarge = computed(() => props.size === "l")
-
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
-
-    const uiStore = useUiStore()
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
-
-    return {
-      timeFmt,
-
-      audioFeatures,
-      featureNotices,
-
-      isSmall,
-      isMedium,
-      isLarge,
-      isMd,
-
-      shouldBlur,
-    }
-  },
-})
+const props = defineProps<{
+  audio: AudioDetail
+  size?: AudioSize
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const featureNotices: {
+  timestamps?: string
+  duration?: string
+  seek?: string
+} = {}
+
+const isSmall = computed(() => props.size === "s")
+const isMedium = computed(() => props.size === "m")
+const isLarge = computed(() => props.size === "l")
+
+const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
+
+const uiStore = useUiStore()
+const isMd = computed(() => uiStore.isBreakpoint("md"))
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VBackToSearchResultsLink.vue b/frontend/src/components/VBackToSearchResultsLink.vue
index 45286809c80..03ce0126c39 100644
--- a/frontend/src/components/VBackToSearchResultsLink.vue
+++ b/frontend/src/components/VBackToSearchResultsLink.vue
@@ -11,12 +11,12 @@
     @mousedown="handleClick"
   >
     <VIcon name="chevron-back" :rtl-flip="true" />
-    {{ $t("singleResult.back") }}
+    {{ t("singleResult.back") }}
   </VButton>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { useAnalytics } from "~/composables/use-analytics"
 import { useSearchStore } from "~/stores/search"
@@ -28,38 +28,26 @@ import VButton from "~/components/VButton.vue"
  * This link takes the user from a single result back to the list of all
  * results. It only appears if the user navigated from the search results.
  */
-export default defineComponent({
-  components: {
-    VIcon,
-    VButton,
-  },
-  props: {
-    /**
-     * The unique ID of the media
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    href: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
-    const searchStore = useSearchStore()
 
-    const handleClick = () => {
-      sendCustomEvent("BACK_TO_SEARCH", {
-        id: props.id,
-        searchType: searchStore.searchType,
-      })
-    }
+const props = defineProps<{
+  /**
+   * The unique ID of the media
+   */
+  id: string
+  href: string
+}>()
 
-    return {
-      handleClick,
-    }
-  },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const { sendCustomEvent } = useAnalytics()
+const searchStore = useSearchStore()
+
+const handleClick = () => {
+  sendCustomEvent("BACK_TO_SEARCH", {
+    id: props.id,
+    searchType: searchStore.searchType,
+  })
+}
 </script>
diff --git a/frontend/src/components/VBanner/VAnalyticsNotice.vue b/frontend/src/components/VBanner/VAnalyticsNotice.vue
index b3d06669c64..a1268eeabd8 100644
--- a/frontend/src/components/VBanner/VAnalyticsNotice.vue
+++ b/frontend/src/components/VBanner/VAnalyticsNotice.vue
@@ -1,45 +1,32 @@
 <template>
   <VNotificationBanner
-    v-bind="$attrs"
     id="analytics"
     nature="info"
-    :close-button-label="$t('notification.analytics.close')"
+    :close-button-label="t('notification.analytics.close')"
     @close="$emit('close')"
   >
     <i18n-t scope="global" tag="span" keypath="notification.analytics.text">
       <template #link>
         <VLink :href="privacyPath" class="text-curr underline">{{
-          $t("notification.analytics.link")
+          t("notification.analytics.link")
         }}</VLink>
       </template>
     </i18n-t>
   </VNotificationBanner>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useNuxtApp } 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 },
-  inheritAttrs: false,
-  emits: {
-    close: defineEvent(),
-  },
-  setup() {
-    const localePath = useNuxtApp().$localePath
-    const privacyPath = computed(() => localePath("/privacy"))
-
-    return {
-      privacyPath,
-    }
-  },
-})
+defineEmits(["close"])
+const {
+  $i18n: { t },
+  $localePath,
+} = useNuxtApp()
+const privacyPath = computed(() => $localePath("/privacy"))
 </script>
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index a503837ab45..bd003f1ccd0 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -17,7 +17,7 @@
         :variant="variant === 'dark' ? 'transparent-tx' : 'transparent-gray'"
         :icon-props="{ name: 'close-small' }"
         size="small"
-        :label="closeButtonLabel || $t('modal.closeBanner')"
+        :label="closeButtonLabel || t('modal.closeBanner')"
         :class="{
           'focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10':
             variant === 'dark',
@@ -28,88 +28,70 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { defineEvent } from "~/types/emits"
+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
      * yellow 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-dark-charcoal text-white"
-        : {
-            info: "bg-info-soft",
-            warning: "bg-warning-soft",
-            success: "bg-success-soft",
-            error: "bg-error-soft",
-          }[props.nature]
-    )
-    const iconClassNames = computed(() =>
-      props.variant === "dark"
-        ? ""
-        : {
-            info: "text-info",
-            warning: "text-warning",
-            success: "text-success",
-            error: "text-error",
-          }[props.nature]
-    )
+    closeButtonLabel?: string
+  }>(),
+  {
+    nature: "info",
+    variant: "regular",
+  }
+)
+
+defineEmits(["close"])
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    return {
-      classNames,
-      iconClassNames,
-    }
-  },
-})
+const classNames = computed(() =>
+  props.variant === "dark"
+    ? "bg-dark-charcoal text-white"
+    : {
+        info: "bg-info-soft",
+        warning: "bg-warning-soft",
+        success: "bg-success-soft",
+        error: "bg-error-soft",
+      }[props.nature]
+)
+const iconClassNames = computed(() =>
+  props.variant === "dark"
+    ? ""
+    : {
+        info: "text-info",
+        warning: "text-warning",
+        success: "text-success",
+        error: "text-error",
+      }[props.nature]
+)
 </script>
diff --git a/frontend/src/components/VBanner/VTranslationStatusBanner.vue b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
index 33969d357d7..f2e10239261 100644
--- a/frontend/src/components/VBanner/VTranslationStatusBanner.vue
+++ b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
@@ -3,13 +3,13 @@
     :id="bannerKey"
     nature="warning"
     data-testid="banner-translation"
-    :close-button-label="$t('notification.translation.close')"
+    :close-button-label="t('notification.translation.close')"
     @close="$emit('close')"
   >
     <i18n-t scope="global" keypath="notification.translation.text" tag="span">
       <template #link>
         <VLink :href="currentLocale.link" class="text-curr underline">{{
-          $t("notification.translation.link")
+          t("notification.translation.link")
         }}</VLink>
       </template>
       <template #locale>
@@ -19,54 +19,37 @@
   </VNotificationBanner>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } 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() {
-    /**
-     * Returns the link to the GlotPress project for the current locale and the locale native name.
-     */
-    const currentLocale = computed(() => {
-      const localeObject = useI18n({ useScope: "global" }).localeProperties
-        .value as LocaleObject
+defineProps<{
+  bannerKey: BannerId
+}>()
+defineEmits(["close"])
+
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
 
-      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/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
index 8ae307d215b..6263539074f 100644
--- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
+++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -22,7 +22,7 @@
       :external-icon-size="6"
       :href="url"
       @click="sendAnalyticsEvent"
-      >{{ $t(`collection.link.${collection}`) }}</VButton
+      >{{ t(`collection.link.${collection}`) }}</VButton
     >
     <p
       class="results caption-regular md:label-regular mt-2 text-dark-charcoal-70 md:mt-0"
@@ -32,8 +32,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import { useUiStore } from "~/stores/ui"
 import type { CollectionParams } from "~/types/search"
@@ -58,112 +60,92 @@ const icons = {
 /**
  * Renders the header of a tag/creator/source collection page.
  */
-export default defineComponent({
-  name: "VCollectionHeader",
-  components: { VIcon, VButton },
-  props: {
-    collectionParams: {
-      type: Object as PropType<CollectionParams>,
-      required: true,
-    },
-    creatorUrl: {
-      type: String,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const mediaStore = useMediaStore()
-    const providerStore = useProviderStore()
-    const uiStore = useUiStore()
-
-    const iconName = computed(() => icons[props.collectionParams.collection])
-    const collection = computed(() => props.collectionParams.collection)
-
-    const sourceName = computed(() => {
-      if (props.collectionParams.collection === "tag") {
-        return ""
-      }
-      return providerStore.getProviderName(
-        props.collectionParams.source,
-        props.mediaType
-      )
-    })
-
-    const title = computed(() => {
-      if (props.collectionParams.collection === "tag") {
-        return props.collectionParams.tag
-      } else if (props.collectionParams.collection === "creator") {
-        return props.collectionParams.creator
-      }
-      return sourceName.value
-    })
-
-    const url = computed(() => {
-      if (props.collectionParams.collection === "tag") {
-        return undefined
-      } else if (props.collectionParams.collection === "creator") {
-        return props.creatorUrl
-      }
-      return providerStore.getSourceUrl(
-        props.collectionParams.source,
-        props.mediaType
-      )
-    })
-    const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
-
-    const resultsLabel = computed(() => {
-      if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
-        return ""
-      }
-      const resultsCount = mediaStore.results[props.mediaType].count
-      if (props.collectionParams.collection === "creator") {
-        return getI18nCollectionResultCountLabel(
-          resultsCount,
-          props.mediaType,
-          "creator",
-          { source: sourceName.value }
-        )
-      }
-      return getI18nCollectionResultCountLabel(
-        resultsCount,
-        props.mediaType,
-        props.collectionParams.collection
-      )
-    })
-
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
-
-    const { sendCustomEvent } = useAnalytics()
-
-    const sendAnalyticsEvent = () => {
-      if (props.collectionParams.collection === "tag") {
-        return
-      }
-
-      const eventName =
-        props.collectionParams.collection === "creator"
-          ? "VISIT_CREATOR_LINK"
-          : "VISIT_SOURCE_LINK"
-      sendCustomEvent(eventName, {
-        url: url.value,
-        source: props.collectionParams.source,
-      })
-    }
-
-    return {
-      collection,
-      title,
-      resultsLabel,
-      url,
-      iconName,
-      isMd,
-      sendAnalyticsEvent,
-    }
-  },
+const props = defineProps<{
+  collectionParams: CollectionParams
+  creatorUrl?: string
+  mediaType: SupportedMediaType
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const mediaStore = useMediaStore()
+const providerStore = useProviderStore()
+const uiStore = useUiStore()
+
+const iconName = computed(() => icons[props.collectionParams.collection])
+const collection = computed(() => props.collectionParams.collection)
+
+const sourceName = computed(() => {
+  if (props.collectionParams.collection === "tag") {
+    return ""
+  }
+  return providerStore.getProviderName(
+    props.collectionParams.source,
+    props.mediaType
+  )
+})
+
+const title = computed(() => {
+  if (props.collectionParams.collection === "tag") {
+    return props.collectionParams.tag
+  } else if (props.collectionParams.collection === "creator") {
+    return props.collectionParams.creator
+  }
+  return sourceName.value
+})
+
+const url = computed(() => {
+  if (props.collectionParams.collection === "tag") {
+    return undefined
+  } else if (props.collectionParams.collection === "creator") {
+    return props.creatorUrl
+  }
+  return providerStore.getSourceUrl(
+    props.collectionParams.source,
+    props.mediaType
+  )
+})
+const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
+
+const resultsLabel = computed(() => {
+  if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
+    return ""
+  }
+  const resultsCount = mediaStore.results[props.mediaType].count
+  if (props.collectionParams.collection === "creator") {
+    return getI18nCollectionResultCountLabel(
+      resultsCount,
+      props.mediaType,
+      "creator",
+      { source: sourceName.value }
+    )
+  }
+  return getI18nCollectionResultCountLabel(
+    resultsCount,
+    props.mediaType,
+    props.collectionParams.collection
+  )
 })
+
+const isMd = computed(() => uiStore.isBreakpoint("md"))
+
+const { sendCustomEvent } = useAnalytics()
+
+const sendAnalyticsEvent = () => {
+  if (props.collectionParams.collection === "tag") {
+    return
+  }
+
+  const eventName =
+    props.collectionParams.collection === "creator"
+      ? "VISIT_CREATOR_LINK"
+      : "VISIT_SOURCE_LINK"
+  sendCustomEvent(eventName, {
+    url: url.value,
+    source: props.collectionParams.source,
+  })
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VContentLink/VContentLink.vue b/frontend/src/components/VContentLink/VContentLink.vue
index ac4a3cedcc3..4e5da083088 100644
--- a/frontend/src/components/VContentLink/VContentLink.vue
+++ b/frontend/src/components/VContentLink/VContentLink.vue
@@ -7,12 +7,12 @@
     size="disabled"
     :disabled="!doneHydrating"
     class="h-auto w-full flex-col !items-start !justify-start gap-1 overflow-hidden p-4 sm:h-18 sm:flex-row sm:!items-center sm:gap-2 sm:px-6"
-    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
+    @keydown.shift.tab.exact="emit('shift-tab', $event)"
     @mousedown="handleClick"
   >
     <VIcon :name="mediaType" />
     <p class="label-bold sm:description-bold mt-1 sm:mt-0">
-      {{ $t(`searchType.${mediaType}`) }}
+      {{ t(`searchType.${mediaType}`) }}
     </p>
     <span
       class="label-regular sm:description-regular text-dark-charcoal-70 group-hover/button:text-dark-charcoal sm:ms-auto"
@@ -21,16 +21,16 @@
   </VButton>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 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 useSearchType from "~/composables/use-search-type"
 
 import { useHydrating } from "~/composables/use-hydrating"
@@ -38,74 +38,50 @@ import { useHydrating } from "~/composables/use-hydrating"
 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<{
+  /**
+   * One of the media types supported.
+   */
+  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 emit = defineEmits<{
+  "shift-tab": [KeyboardEvent]
+}>()
 
-    const resultsAriaLabel = computed(() =>
-      getI18nContentLinkLabel(
-        props.resultsCount,
-        props.searchTerm,
-        props.mediaType
-      )
-    )
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    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()
+const analytics = useAnalytics()
 
-    return {
-      resultsCountLabel,
-      resultsAriaLabel,
+const handleClick = () => {
+  analytics.sendCustomEvent("CHANGE_CONTENT_TYPE", {
+    previous: activeType.value,
+    next: props.mediaType,
+    component: "VContentLink",
+  })
+}
 
-      handleClick,
-      doneHydrating,
-    }
-  },
-})
+const { doneHydrating } = useHydrating()
 </script>
diff --git a/frontend/src/components/VContentReport/VContentReportButton.vue b/frontend/src/components/VContentReport/VContentReportButton.vue
index cfb76653bf0..f4f299ac88d 100644
--- a/frontend/src/components/VContentReport/VContentReportButton.vue
+++ b/frontend/src/components/VContentReport/VContentReportButton.vue
@@ -5,22 +5,21 @@
     has-icon-end
     class="label-bold"
   >
-    <span class="md:hidden">{{ $t("mediaDetails.contentReport.short") }}</span>
+    <span class="md:hidden">{{ t("mediaDetails.contentReport.short") }}</span>
     <span class="hidden md:inline">{{
-      $t("mediaDetails.contentReport.long")
+      t("mediaDetails.contentReport.long")
     }}</span>
     <VIcon name="flag" />
   </VButton>
 </template>
 
-<script>
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VContentReportButton",
-  components: { VButton, VIcon },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VContentReport/VContentReportForm.vue b/frontend/src/components/VContentReport/VContentReportForm.vue
index cdd2f220ef2..5c698d2fd30 100644
--- a/frontend/src/components/VContentReport/VContentReportForm.vue
+++ b/frontend/src/components/VContentReport/VContentReportForm.vue
@@ -2,7 +2,7 @@
   <div id="content-report-form">
     <div v-if="status === SENT">
       <h2 class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.success.title") }}
+        {{ t("mediaDetails.contentReport.success.title") }}
       </h2>
       <i18n-t
         scope="global"
@@ -22,22 +22,22 @@
 
     <div v-else-if="status === FAILED">
       <h2 class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.failure.title") }}
+        {{ t("mediaDetails.contentReport.failure.title") }}
       </h2>
       <p class="text-sm">
-        {{ $t("mediaDetails.contentReport.failure.note") }}
+        {{ t("mediaDetails.contentReport.failure.note") }}
       </p>
     </div>
 
     <!-- Main form -->
     <div v-else>
       <div class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.long") }}
+        {{ t("mediaDetails.contentReport.long") }}
       </div>
 
       <p class="mb-4 text-sm">
         {{
-          $t("mediaDetails.contentReport.form.disclaimer", {
+          t("mediaDetails.contentReport.form.disclaimer", {
             openverse: "Openverse",
           })
         }}
@@ -46,7 +46,7 @@
       <form class="text-sm" @submit="handleSubmit">
         <fieldset class="flex flex-col">
           <legend class="label-bold mb-4">
-            {{ $t("mediaDetails.contentReport.form.question") }}
+            {{ t("mediaDetails.contentReport.form.question") }}
           </legend>
           <VRadio
             v-for="reason in reasons"
@@ -57,7 +57,7 @@
             name="reason"
             :value="reason"
           >
-            {{ $t(`mediaDetails.contentReport.form.${reason}.option`) }}
+            {{ t(`mediaDetails.contentReport.form.${reason}.option`) }}
           </VRadio>
         </fieldset>
 
@@ -85,7 +85,7 @@
             class="label-bold"
             @click="handleCancel"
           >
-            {{ $t("mediaDetails.contentReport.form.cancel") }}
+            {{ t("mediaDetails.contentReport.form.cancel") }}
           </VButton>
 
           <VButton
@@ -102,7 +102,7 @@
             :send-external-link-click-event="false"
             @click="handleDmcaSubmit"
           >
-            {{ $t("mediaDetails.contentReport.form.dmca.open") }}
+            {{ t("mediaDetails.contentReport.form.dmca.open") }}
           </VButton>
           <VButton
             v-else
@@ -113,9 +113,9 @@
             variant="filled-dark"
             size="medium"
             class="label-bold"
-            :value="$t('mediaDetails.contentReport.form.submit')"
+            :value="t('mediaDetails.contentReport.form.submit')"
           >
-            {{ $t("mediaDetails.contentReport.form.submit") }}
+            {{ t("mediaDetails.contentReport.form.submit") }}
           </VButton>
         </div>
       </form>
@@ -123,10 +123,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useRuntimeConfig } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp, useRuntimeConfig } from "#imports"
 
-import { computed, defineComponent, PropType, ref } from "vue"
+import { computed, ref } from "vue"
 
 import axios from "axios"
 
@@ -152,114 +152,81 @@ import VDmcaNotice from "~/components/VContentReport/VDmcaNotice.vue"
 import VReportDescForm from "~/components/VContentReport/VReportDescForm.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VContentReportForm",
-  components: {
-    VButton,
-    VLink,
-    VRadio,
-    VDmcaNotice,
-    VReportDescForm,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-    providerName: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    closeFn: {
-      type: Function,
-      required: true,
-    },
-    allowCancel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup(props) {
-    const description = ref("")
-
-    const status = ref<string | null>(WIP)
-
-    const selectedReason = ref<ReportReason>(DMCA)
-
-    /* Buttons */
-    const handleCancel = () => {
-      selectedReason.value = DMCA
-      description.value = ""
-      props.closeFn()
-    }
-
-    const isSubmitDisabled = computed(() => {
-      return selectedReason.value === OTHER && description.value.length < 20
-    })
-
-    const { sendCustomEvent } = useAnalytics()
-
-    const handleDmcaSubmit = () => {
-      sendCustomEvent("REPORT_MEDIA", {
-        id: props.media.id,
-        mediaType: props.media.frontendMediaType,
-        provider: props.media.provider,
-        reason: selectedReason.value,
-      })
-      status.value = SENT
-    }
-    const handleSubmit = async (event: Event) => {
-      event.preventDefault()
-      // Submit report
-      try {
-        const mediaType = props.media.frontendMediaType
-        const reason = selectedReason.value
-
-        const {
-          public: { apiUrl },
-        } = useRuntimeConfig()
-
-        // Not proxied through the Nuxt `/api/` because it is a POST request
-        await axios.post(
-          `${apiUrl}v1/${mediaSlug(mediaType)}/${props.media.id}/report/`,
-          {
-            mediaType,
-            reason,
-            identifier: props.media.id,
-            description: description.value,
-          }
-        )
+const props = withDefaults(
+  defineProps<{
+    media: AudioDetail | ImageDetail
+    providerName: string
+    closeFn: () => void
+    allowCancel?: boolean
+  }>(),
+  {
+    allowCancel: true,
+  }
+)
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const description = ref("")
+
+const status = ref<string | null>(WIP)
+
+const selectedReason = ref<ReportReason>(DMCA)
+
+/* Buttons */
+const handleCancel = () => {
+  selectedReason.value = DMCA
+  description.value = ""
+  props.closeFn()
+}
+
+const isSubmitDisabled = computed(() => {
+  return selectedReason.value === OTHER && description.value.length < 20
+})
 
-        sendCustomEvent("REPORT_MEDIA", {
-          mediaType,
-          reason,
-          id: props.media.id,
-          provider: props.media.provider,
-        })
-        status.value = SENT
-      } catch (error) {
-        status.value = FAILED
+const { sendCustomEvent } = useAnalytics()
+
+const handleDmcaSubmit = () => {
+  sendCustomEvent("REPORT_MEDIA", {
+    id: props.media.id,
+    mediaType: props.media.frontendMediaType,
+    provider: props.media.provider,
+    reason: selectedReason.value,
+  })
+  status.value = SENT
+}
+const handleSubmit = async (event: Event) => {
+  event.preventDefault()
+  // Submit report
+  try {
+    const mediaType = props.media.frontendMediaType
+    const reason = selectedReason.value
+
+    const {
+      public: { apiUrl },
+    } = useRuntimeConfig()
+
+    // Not proxied through the Nuxt `/api/` because it is a POST request
+    await axios.post(
+      `${apiUrl}v1/${mediaSlug(mediaType)}/${props.media.id}/report/`,
+      {
+        mediaType,
+        reason,
+        identifier: props.media.id,
+        description: description.value,
       }
-    }
-
-    return {
-      reasons,
-      DMCA,
-      OTHER,
-      SENT,
-      FAILED,
-      DMCA_FORM_URL,
-
-      selectedReason,
-      status,
-      description,
+    )
 
-      handleCancel,
-
-      isSubmitDisabled,
-      handleSubmit,
-      handleDmcaSubmit,
-    }
-  },
-})
+    sendCustomEvent("REPORT_MEDIA", {
+      mediaType,
+      reason,
+      id: props.media.id,
+      provider: props.media.provider,
+    })
+    status.value = SENT
+  } catch (error) {
+    status.value = FAILED
+  }
+}
 </script>
diff --git a/frontend/src/components/VContentReport/VContentReportPopover.vue b/frontend/src/components/VContentReport/VContentReportPopover.vue
index e664e5fb7c5..794ae92cf75 100644
--- a/frontend/src/components/VContentReport/VContentReportPopover.vue
+++ b/frontend/src/components/VContentReport/VContentReportPopover.vue
@@ -2,7 +2,7 @@
   <VPopover
     ref="popoverEl"
     :hide-on-click-outside="false"
-    :label="$t('mediaDetails.contentReport.long')"
+    :label="t('mediaDetails.contentReport.long')"
     placement="bottom-end"
   >
     <template #trigger="{ a11yProps }">
@@ -11,7 +11,7 @@
     <template #default="{ close }">
       <div class="grid w-80 items-stretch justify-stretch">
         <VIconButton
-          :label="$t('modal.close')"
+          :label="t('modal.close')"
           :icon-props="{ name: 'close' }"
           variant="transparent-gray"
           size="small"
@@ -29,8 +29,8 @@
   </VPopover>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
@@ -39,22 +39,14 @@ import VContentReportForm from "~/components/VContentReport/VContentReportForm.v
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-export default defineComponent({
-  name: "VContentReportPopover",
-  components: {
-    VIconButton,
-    VContentReportButton,
-    VContentReportForm,
-    VPopover,
-  },
-  props: {
-    /**
-     * the media item to report; This can either be an audio track or an image.
-     */
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-})
+defineProps<{
+  /**
+   * the media item to report; This can either be an audio track or an image.
+   */
+  media: AudioDetail | ImageDetail
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VContentReport/VDmcaNotice.vue b/frontend/src/components/VContentReport/VDmcaNotice.vue
index e2495903cee..2729c99b097 100644
--- a/frontend/src/components/VContentReport/VDmcaNotice.vue
+++ b/frontend/src/components/VContentReport/VDmcaNotice.vue
@@ -7,11 +7,11 @@
   >
     <template #form>
       <VLink
-        :aria-label="$t('mediaDetails.contentReport.form.dmca.form')"
+        :aria-label="t('mediaDetails.contentReport.form.dmca.form')"
         :href="DMCA_FORM_URL"
         class="text-pink hover:underline"
-        @click="$emit('click')"
-        >{{ $t("mediaDetails.contentReport.form.dmca.form") }}</VLink
+        @click="emit('click')"
+        >{{ t("mediaDetails.contentReport.form.dmca.form") }}</VLink
       >
     </template>
     <template #source>
@@ -22,40 +22,29 @@
   </i18n-t>
 </template>
 
-<script>
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { DMCA_FORM_URL } from "~/constants/content-report"
-import { defineEvent } from "~/types/emits"
 
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VDmcaNotice",
-  components: { VLink },
-  props: {
-    /**
-     * the foreign landing URL for the media item
-     */
-    foreignLandingUrl: {
-      type: String,
-      required: true,
-    },
-    /**
-     * the name of the provider of the media item
-     */
-    provider: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    return {
-      DMCA_FORM_URL,
-    }
-  },
-})
+defineProps<{
+  /**
+   * the foreign landing URL for the media item
+   */
+  foreignLandingUrl: string
+  /**
+   * the name of the provider of the media item
+   */
+  provider: string
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VContentReport/VReportDescForm.vue b/frontend/src/components/VContentReport/VReportDescForm.vue
index c6a1fc73ab3..a7383d2f572 100644
--- a/frontend/src/components/VContentReport/VReportDescForm.vue
+++ b/frontend/src/components/VContentReport/VReportDescForm.vue
@@ -1,16 +1,14 @@
 <template>
   <label class="other-form block" for="description">
     <span class="flex flex-row items-center justify-between">
-      <span>{{ $t("mediaDetails.contentReport.form.other.note") }}</span>
-      <span>{{
-        $t(`mediaDetails.contentReport.form.${reason}.subLabel`)
-      }}</span>
+      <span>{{ t("mediaDetails.contentReport.form.other.note") }}</span>
+      <span>{{ t(`mediaDetails.contentReport.form.${reason}.subLabel`) }}</span>
     </span>
     <textarea
       id="description"
       v-model="text"
       class="mt-2 h-20 w-full border border-dark-charcoal-20 p-2 placeholder-dark-charcoal-70"
-      :placeholder="$t(`mediaDetails.contentReport.form.${reason}.placeholder`)"
+      :placeholder="t(`mediaDetails.contentReport.form.${reason}.placeholder`)"
       :required="isRequired"
       :minlength="isRequired ? 20 : 0"
       maxlength="500"
@@ -18,49 +16,44 @@
   </label>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { reasons, OTHER, ReportReason } from "~/constants/content-report"
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
-export default defineComponent({
-  name: "VReportDescForm",
-  model: {
-    prop: "content",
-    event: "update:content",
-  },
-  props: {
+import { OTHER, ReportReason } from "~/constants/content-report"
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const props = withDefaults(
+  defineProps<{
     /**
      * the contents of the textarea
      */
-    content: {
-      type: String,
-      default: "",
-    },
+    content?: string
     /**
      * the reason selected for reporting the content
      */
-    reason: {
-      type: String as PropType<ReportReason>,
-      validator: (val: ReportReason) => reasons.includes(val),
-    },
-  },
-  emits: {
-    "update:content": defineEvent<[string]>(),
-  },
-  setup(props, { emit }) {
-    const text = computed({
-      get: () => props.content,
-      set: (val) => emit("update:content", val),
-    })
+    reason: ReportReason
+  }>(),
+  {
+    content: "",
+  }
+)
 
-    const isRequired = computed(() => props.reason === OTHER)
+const emit = defineEmits<{
+  /**
+   * emits the updated content of the textarea
+   */
+  "update:content": [string]
+}>()
 
-    return {
-      isRequired,
-      text,
-    }
-  },
+const text = computed({
+  get: () => props.content,
+  set: (val) => emit("update:content", val),
 })
+
+const isRequired = computed(() => props.reason === OTHER)
 </script>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
index 4e5bdf90128..40a8df22e70 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -6,9 +6,9 @@
     :disabled="!doneHydrating"
     :icon-only="!showLabel"
     size="large"
-    :aria-label="$t('searchType.selectLabel', { type: label })"
-    v-bind="$attrs"
-    @click="$emit('click')"
+    :aria-label="t('searchType.selectLabel', { type: label })"
+    v-bind="attrs"
+    @click="emit('click')"
   >
     <VIcon :name="searchType" :size="6" />
     <template v-if="showLabel">
@@ -19,15 +19,15 @@
     </template>
   </VButton>
 </template>
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+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"
@@ -36,44 +36,30 @@ 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()
+    showLabel?: boolean
+    searchType: SearchType
+    icon: string
+    label: string
+  }>(),
+  {
+    showLabel: false,
+  }
+)
 
-    return {
-      doneHydrating,
-    }
-  },
-})
+const emit = 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()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
index 806b98f0996..eca696815c5 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -5,103 +5,89 @@
     :as="component"
     class="label-regular"
     v-bind="{ href }"
-    @click="$emit('click', item)"
+    @click="emit('click', item)"
   >
     <VIcon :name="icon" class="h-6 w-6" />
     <span>{{ itemLabelKey }}</span>
     <VPill v-if="isBeta" class="ms-auto">{{
-      $t("searchType.statusBeta")
+      t("searchType.statusBeta")
     }}</VPill>
   </VItem>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+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 {
+  $i18n: { t },
+} = useNuxtApp()
+
+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,
-    },
+    isFirst?: boolean
     /**
      * Whether the item is selected.
      */
-    selected: {
-      type: Boolean,
-      default: false,
-    },
+    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)
+const emit = 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()
 
-    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>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index 89838ffe5c3..b6acc9e2d0d 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -1,7 +1,7 @@
 <template>
   <VPopover
     ref="contentMenuPopover"
-    :label="$t('searchType.label')"
+    :label="t('searchType.label')"
     placement="bottom-end"
     :clippable="true"
     :trap-focus="false"
@@ -23,56 +23,44 @@
   </VPopover>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed, ref } from "vue"
 
 import useSearchType from "~/composables/use-search-type"
 
 import type { SearchType } from "~/constants/media"
 
-import { defineEvent } from "~/types/emits"
-
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
 
-export default defineComponent({
-  name: "VSearchTypePopover",
-  components: {
-    VPopover,
-    VSearchTypeButton,
-    VSearchTypes,
-  },
-  props: {
-    showLabel: {
-      type: Boolean,
-      default: false,
-    },
-    placement: {
-      type: String as PropType<"header" | "searchbar">,
-      default: "header",
-    },
-  },
-  emits: {
-    select: defineEvent<[SearchType]>(),
-  },
-  setup(_, { emit }) {
-    const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
+withDefaults(
+  defineProps<{
+    showLabel?: boolean
+    placement?: "header" | "searchbar"
+  }>(),
+  {
+    showLabel: false,
+    placement: "header",
+  }
+)
 
-    const { getSearchTypeProps } = useSearchType()
+const emit = defineEmits<{
+  select: [SearchType]
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
+const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-    const searchTypeProps = computed(() => getSearchTypeProps())
+const { getSearchTypeProps } = useSearchType()
 
-    const handleSelect = (searchType: SearchType) => {
-      emit("select", searchType)
-      contentMenuPopover.value?.close()
-    }
+const searchTypeProps = computed(() => getSearchTypeProps())
 
-    return {
-      handleSelect,
-      contentMenuPopover,
-      searchTypeProps,
-    }
-  },
-})
+const handleSelect = (searchType: SearchType) => {
+  emit("select", searchType)
+  contentMenuPopover.value?.close()
+}
 </script>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
index 74f918d7551..3624941cc11 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -20,7 +20,7 @@
         :class="bordered ? 'ps-0' : 'ps-6'"
         class="category pb-4 pt-6"
       >
-        {{ $t(`searchType.${category.heading}`) }}
+        {{ t(`searchType.${category.heading}`) }}
       </h4>
       <VSearchTypeItem
         v-for="(item, idx) in category.items"
@@ -35,12 +35,13 @@
     </div>
   </VItemGroup>
 </template>
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+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"
@@ -50,65 +51,56 @@ 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 {
+  $i18n: { t },
+} = useNuxtApp()
+const content = useSearchType()
+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>
diff --git a/frontend/src/components/VCopyButton.vue b/frontend/src/components/VCopyButton.vue
index f2e5876b4ba..8f1a59cabda 100644
--- a/frontend/src/components/VCopyButton.vue
+++ b/frontend/src/components/VCopyButton.vue
@@ -9,84 +9,77 @@
     :data-clipboard-target="el"
   >
     <span v-if="!success">
-      {{ $t("mediaDetails.reuse.copyLicense.copyText") }}
+      {{ t("mediaDetails.reuse.copyLicense.copyText") }}
     </span>
     <span v-else>
-      {{ $t("mediaDetails.reuse.copyLicense.copied") }}
+      {{ t("mediaDetails.reuse.copyLicense.copied") }}
     </span>
   </VButton>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import Clipboard from "clipboard"
 
-import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref } from "vue"
 
 import { useHydrating } from "~/composables/use-hydrating"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VCopyButton",
-  components: { VButton },
-  props: {
-    el: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ["copied", "copy-failed"],
-  setup(props, { emit }) {
-    const clipboard = ref<Clipboard | null>(null)
-    const success = ref(false)
-
-    function setFocusOnButton(): void {
-      const button = document.getElementById(props.id)
-      if (button) {
-        button.focus()
-      }
-    }
-
-    const onCopySuccess = (e: Clipboard.Event) => {
-      success.value = true
-      emit("copied")
-
-      setTimeout(() => {
-        success.value = false
-      }, 2000)
-
-      e.clearSelection()
-
-      /* Set the focus back on the button */
-      setFocusOnButton()
-    }
-    const onCopyError = (e: Clipboard.Event) => {
-      emit("copy-failed")
-      e.clearSelection()
-
-      /* Restore focus on the button */
-      setFocusOnButton()
-    }
-
-    onMounted(() => {
-      clipboard.value = new Clipboard(`#${props.id}`)
-      clipboard.value.on("success", onCopySuccess)
-      clipboard.value.on("error", onCopyError)
-    })
-
-    onBeforeUnmount(() => clipboard.value?.destroy())
-
-    const { doneHydrating } = useHydrating()
-
-    return {
-      clipboard,
-      success,
-      doneHydrating,
-    }
-  },
+const props = defineProps<{
+  el: string
+  id: string
+}>()
+
+const emit = defineEmits<{
+  copied: []
+  "copy-failed": []
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const clipboard = ref<Clipboard | null>(null)
+const success = ref(false)
+
+function setFocusOnButton(): void {
+  const button = document.getElementById(props.id)
+  if (button) {
+    button.focus()
+  }
+}
+
+const onCopySuccess = (e: Clipboard.Event) => {
+  success.value = true
+  emit("copied")
+
+  setTimeout(() => {
+    success.value = false
+  }, 2000)
+
+  e.clearSelection()
+
+  /* Set the focus back on the button */
+  setFocusOnButton()
+}
+const onCopyError = (e: Clipboard.Event) => {
+  emit("copy-failed")
+  e.clearSelection()
+
+  /* Restore focus on the button */
+  setFocusOnButton()
+}
+
+onMounted(() => {
+  clipboard.value = new Clipboard(`#${props.id}`)
+  clipboard.value.on("success", onCopySuccess)
+  clipboard.value.on("error", onCopyError)
 })
+
+onBeforeUnmount(() => clipboard.value?.destroy())
+
+const { doneHydrating } = useHydrating()
 </script>
diff --git a/frontend/src/components/VErrorSection/VErrorImage.vue b/frontend/src/components/VErrorSection/VErrorImage.vue
index 8866bd60f70..7060f831e17 100644
--- a/frontend/src/components/VErrorSection/VErrorImage.vue
+++ b/frontend/src/components/VErrorSection/VErrorImage.vue
@@ -1,16 +1,16 @@
 <template>
   <figure class="error-image">
-    <img :src="image.src" :alt="$t(image.alt)" :title="$t(image.alt)" />
+    <img :src="image.src" :alt="t(image.alt)" :title="t(image.alt)" />
     <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
     <!-- eslint-disable-next-line vue/no-v-html -->
     <figcaption class="attribution" v-html="image.attribution" />
   </figure>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { License, LicenseVersion } from "~/constants/license"
 import { AttributableMedia, getAttribution } from "~/utils/attribution-html"
@@ -27,42 +27,32 @@ interface ErrorImage extends AttributableMedia {
  * Displays a sad image to convey the negative outcome such as absence of
  * results or a server error.
  */
-export default defineComponent({
-  name: "VErrorImage",
-  props: {
-    /**
-     * the code of the error, used to identify and render the appropriate image
-     */
-    errorCode: {
-      type: String as PropType<"NO_RESULT" | "SERVER_TIMEOUT">,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
+const props = defineProps<{
+  /**
+   * the code of the error, used to identify and render the appropriate image
+   */
+  errorCode: "NO_RESULT" | "SERVER_TIMEOUT"
+}>()
 
-    const images = Object.fromEntries(
-      imageInfo.errors.map((errorItem) => {
-        let image = errorItem.image
-        const errorImage: ErrorImage = {
-          ...image,
-          originalTitle: image.title,
-          src: `/error_images/${image.file}.jpg`,
-          alt: `errorImages.${image.id}`,
-          license: image.license as License,
-          license_version: image.license_version as LicenseVersion,
-        }
-        errorImage.attribution = getAttribution(errorImage, i18n)
-        return [errorItem.error, errorImage]
-      })
-    )
-    const image = computed(() => images[props.errorCode])
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
 
-    return {
-      image,
+const images = Object.fromEntries(
+  imageInfo.errors.map((errorItem) => {
+    let image = errorItem.image
+    const errorImage: ErrorImage = {
+      ...image,
+      originalTitle: image.title,
+      src: `/error_images/${image.file}.jpg`,
+      alt: `errorImages.${image.id}`,
+      license: image.license as License,
+      license_version: image.license_version as LicenseVersion,
     }
-  },
-})
+    errorImage.attribution = getAttribution(errorImage, $i18n)
+    return [errorItem.error, errorImage]
+  })
+)
+const image = computed(() => images[props.errorCode])
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VErrorSection/VErrorSection.vue b/frontend/src/components/VErrorSection/VErrorSection.vue
index 992d12c4290..63954c0ed1c 100644
--- a/frontend/src/components/VErrorSection/VErrorSection.vue
+++ b/frontend/src/components/VErrorSection/VErrorSection.vue
@@ -8,60 +8,48 @@
       <div v-else>
         <h1 class="heading-4 md:heading-2 text-center !font-semibold">
           {{
-            isTimeout ? $t("serverTimeout.heading") : $t("unknownError.heading")
+            isTimeout ? t("serverTimeout.heading") : t("unknownError.heading")
           }}
         </h1>
       </div>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineAsyncComponent } from "#imports"
+<script setup lang="ts">
+import { defineAsyncComponent, useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import { ECONNABORTED, NO_RESULT, SERVER_TIMEOUT } from "~/constants/errors"
 
 import type { FetchingError } from "~/types/fetch-state"
 
-export default defineComponent({
-  components: {
-    VNoResults: defineAsyncComponent(
-      () => import("~/components/VErrorSection/VNoResults.vue")
-    ),
-    VErrorImage: defineAsyncComponent(
-      () => import("~/components/VErrorSection/VErrorImage.vue")
-    ),
-  },
-  props: {
-    fetchingError: {
-      type: Object as PropType<FetchingError>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const searchTerm = computed(
-      () => props.fetchingError.details?.searchTerm ?? ""
-    )
-    /**
-     * The code used for the error page image.
-     * For now, NO_RESULT image is used for searches without result,
-     * and SERVER_TIMEOUT image is used as a fall-back for all other errors.
-     */
-    const errorCode = computed(() =>
-      props.fetchingError.code === NO_RESULT ? NO_RESULT : SERVER_TIMEOUT
-    )
+const VNoResults = defineAsyncComponent(
+  () => import("~/components/VErrorSection/VNoResults.vue")
+)
+const VErrorImage = defineAsyncComponent(
+  () => import("~/components/VErrorSection/VErrorImage.vue")
+)
 
-    const isTimeout = computed(() =>
-      [SERVER_TIMEOUT, ECONNABORTED].includes(props.fetchingError.code)
-    )
+const props = defineProps<{
+  fetchingError: FetchingError
+}>()
 
-    return {
-      errorCode,
-      isTimeout,
-      NO_RESULT,
-      searchTerm,
-    }
-  },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const searchTerm = computed(() => props.fetchingError.details?.searchTerm ?? "")
+/**
+ * The code used for the error page image.
+ * For now, NO_RESULT image is used for searches without result,
+ * and SERVER_TIMEOUT image is used as a fall-back for all other errors.
+ */
+const errorCode = computed(() =>
+  props.fetchingError.code === NO_RESULT ? NO_RESULT : SERVER_TIMEOUT
+)
+
+const isTimeout = computed(() =>
+  [SERVER_TIMEOUT, ECONNABORTED].includes(props.fetchingError.code)
+)
 </script>
diff --git a/frontend/src/components/VErrorSection/VNoResults.vue b/frontend/src/components/VErrorSection/VNoResults.vue
index ff98c026ed7..e435ecb8738 100644
--- a/frontend/src/components/VErrorSection/VNoResults.vue
+++ b/frontend/src/components/VErrorSection/VNoResults.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="no-results text-center md:text-left">
     <h1 class="heading-4 md:heading-2 break-words">
-      {{ $t("noResults.heading", { query: searchTerm }) }}
+      {{ t("noResults.heading", { query: searchTerm }) }}
     </h1>
     <h2 class="description-regular md:heading-5 mt-4">
-      {{ $t("noResults.alternatives") }}
+      {{ t("noResults.alternatives") }}
     </h2>
 
     <div class="mt-10 flex flex-col flex-wrap gap-4 sm:flex-row">
@@ -27,8 +27,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { onMounted } from "vue"
 
 import { useAnalytics } from "~/composables/use-analytics"
 import { useExternalSources } from "~/composables/use-external-sources"
@@ -36,39 +38,30 @@ import { useUiStore } from "~/stores/ui"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VNoResults",
-  components: { VButton },
-  props: {
-    /**
-     * The search term for which the external sources links are generated.
-     */
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { externalSources, externalSourcesType } = useExternalSources()
-    const { sendCustomEvent } = useAnalytics()
-    const handleClick = (sourceName: string) => {
-      sendCustomEvent("SELECT_EXTERNAL_SOURCE", {
-        name: sourceName,
-        mediaType: externalSourcesType.value,
-        query: props.searchTerm,
-        component: "VNoResults",
-      })
-    }
+const props = defineProps<{
+  /**
+   * The search term for which the external sources links are generated.
+   */
+  searchTerm: string
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    onMounted(() => {
-      const uiStore = useUiStore()
-      uiStore.setFiltersState(false)
-    })
+const { externalSources, externalSourcesType } = useExternalSources()
+const { sendCustomEvent } = useAnalytics()
+const handleClick = (sourceName: string) => {
+  sendCustomEvent("SELECT_EXTERNAL_SOURCE", {
+    name: sourceName,
+    mediaType: externalSourcesType.value,
+    query: props.searchTerm,
+    component: "VNoResults",
+  })
+}
 
-    return {
-      handleClick,
-      externalSources,
-    }
-  },
+onMounted(() => {
+  const uiStore = useUiStore()
+  uiStore.setFiltersState(false)
 })
 </script>
diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
index 20f1a23f4fa..9cf34f4266b 100644
--- a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -45,13 +45,13 @@
           class="flex items-center justify-between pe-5 ps-7 pt-5 sm:pe-7 sm:ps-9 sm:pt-7"
         >
           <h2 class="heading-6" tabindex="-1">
-            {{ $t("externalSources.title") }}
+            {{ t("externalSources.title") }}
           </h2>
           <VIconButton
             size="small"
             :icon-props="{ name: 'close' }"
             variant="transparent-gray"
-            :label="$t('modal.close')"
+            :label="t('modal.close')"
             @click="close"
           />
         </header>
@@ -61,12 +61,12 @@
   </section>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { storeToRefs } from "pinia"
+import { computed, ref } from "vue"
 
-import { defineEvent } from "~/types/emits"
+import { storeToRefs } from "pinia"
 
 import { useUiStore } from "~/stores/ui"
 import { useSearchStore } from "~/stores/search"
@@ -81,61 +81,40 @@ import VIcon from "~/components/VIcon/VIcon.vue"
 import VModal from "~/components/VModal/VModal.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
-export default defineComponent({
-  name: "VExternalSearchForm",
-  components: {
-    VModal,
-    VIconButton,
-    VIcon,
-    VButton,
-    VExternalSourceList,
-  },
-  props: {
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-    isSupported: {
-      type: Boolean,
-      default: false,
-    },
-    hasNoResults: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    tab: defineEvent<[KeyboardEvent]>(),
-  },
-  setup() {
-    const sectionRef = ref<HTMLElement | null>(null)
-    const searchStore = useSearchStore()
-    const uiStore = useUiStore()
+withDefaults(
+  defineProps<{
+    searchTerm: string
+    isSupported?: boolean
+    hasNoResults?: boolean
+  }>(),
+  {
+    isSupported: false,
+    hasNoResults: true,
+  }
+)
 
-    const { sendCustomEvent } = useAnalytics()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const mediaStore = useMediaStore()
-    const { currentPage } = storeToRefs(mediaStore)
+const sectionRef = ref<HTMLElement | null>(null)
+const searchStore = useSearchStore()
+const uiStore = useUiStore()
 
-    const handleModalOpen = () => {
-      sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
-        searchType: searchStore.searchType,
-        query: searchStore.searchTerm,
-        resultPage: currentPage.value || 1,
-      })
-    }
+const { sendCustomEvent } = useAnalytics()
 
-    const { externalSourcesType } = useExternalSources()
+const mediaStore = useMediaStore()
+const { currentPage } = storeToRefs(mediaStore)
 
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
+const handleModalOpen = () => {
+  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
+    searchType: searchStore.searchType,
+    query: searchStore.searchTerm,
+    resultPage: currentPage.value || 1,
+  })
+}
 
-    return {
-      externalSourcesType,
-      sectionRef,
-      isMd,
+const { externalSourcesType } = useExternalSources()
 
-      handleModalOpen,
-    }
-  },
-})
+const isMd = computed(() => uiStore.isBreakpoint("md"))
 </script>
diff --git a/frontend/src/components/VExternalSearch/VExternalSourceList.vue b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
index 72de77057e3..c9326502346 100644
--- a/frontend/src/components/VExternalSearch/VExternalSourceList.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
@@ -4,7 +4,7 @@
     data-testid="source-list-popover"
   >
     <p class="label-regular px-3 py-4 text-start !leading-normal">
-      {{ $t("externalSources.caption", { openverse: "Openverse" }) }}
+      {{ t("externalSources.caption", { openverse: "Openverse" }) }}
     </p>
     <VButton
       v-for="source in externalSources"
@@ -25,8 +25,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { useAnalytics } from "~/composables/use-analytics"
 
@@ -38,36 +38,26 @@ import VButton from "~/components/VButton.vue"
  * This component renders a list of pre-populated links to additional sources
  * when there are insufficient or zero search results.
  */
-export default defineComponent({
-  name: "VExternalSourceList",
-  components: { VButton },
-  props: {
-    /**
-     * The search term for which the external sources links are generated.
-     */
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { externalSources, externalSourcesType } = useExternalSources()
+const props = defineProps<{
+  /**
+   * The search term for which the external sources links are generated.
+   */
+  searchTerm: string
+}>()
 
-    const { sendCustomEvent } = useAnalytics()
-    const handleClick = (sourceName: string) => {
-      sendCustomEvent("SELECT_EXTERNAL_SOURCE", {
-        name: sourceName,
-        mediaType: externalSourcesType.value,
-        query: props.searchTerm,
-        component: "VExternalSourceList",
-      })
-    }
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    return {
-      externalSources,
-      externalSourcesType,
-      handleClick,
-    }
-  },
-})
+const { externalSources, externalSourcesType } = useExternalSources()
+
+const { sendCustomEvent } = useAnalytics()
+const handleClick = (sourceName: string) => {
+  sendCustomEvent("SELECT_EXTERNAL_SOURCE", {
+    name: sourceName,
+    mediaType: externalSourcesType.value,
+    query: props.searchTerm,
+    component: "VExternalSourceList",
+  })
+}
 </script>
diff --git a/frontend/src/components/VFilters/VFilterChecklist.vue b/frontend/src/components/VFilters/VFilterChecklist.vue
index e16fdab7165..030ca0c6441 100644
--- a/frontend/src/components/VFilters/VFilterChecklist.vue
+++ b/frontend/src/components/VFilters/VFilterChecklist.vue
@@ -23,7 +23,7 @@
       <VPopover
         v-if="isLicense(item.code)"
         strategy="fixed"
-        :label="$t('browsePage.aria.licenseExplanation')"
+        :label="t('browsePage.aria.licenseExplanation')"
         :trap-focus="false"
       >
         <template #trigger="{ a11yProps }">
@@ -31,7 +31,7 @@
             v-bind="a11yProps"
             variant="transparent-tx"
             size="disabled"
-            :aria-label="$t('browsePage.aria.licenseExplanation')"
+            :aria-label="t('browsePage.aria.licenseExplanation')"
             class="h-6 w-6"
           >
             <VIcon name="help" />
@@ -55,10 +55,8 @@
   </fieldset>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
-
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { useSearchStore } from "~/stores/search"
 
@@ -66,7 +64,6 @@ import type { FilterItem, FilterCategory } from "~/constants/filters"
 
 import type { License } from "~/constants/license"
 
-import { defineEvent } from "~/types/emits"
 import { getElements } from "~/utils/license"
 
 import VButton from "~/components/VButton.vue"
@@ -82,81 +79,56 @@ type toggleFilterPayload = {
   code: string
 }
 
-export default defineComponent({
-  name: "VFilterCheckList",
-  components: {
-    VIconButton,
-    VCheckbox,
-    VButton,
-    VIcon,
-    VLicense,
-    VLicenseExplanation,
-    VPopover,
-  },
-  props: {
-    options: {
-      type: Array as PropType<FilterItem[]>,
-      required: false,
-    },
-    title: {
-      type: String,
-    },
-    filterType: {
-      type: String as PropType<FilterCategory>,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    "toggle-filter": defineEvent<[toggleFilterPayload]>(),
-  },
-  setup(props, { emit }) {
-    const i18n = useI18n({ useScope: "global" })
-    const searchStore = useSearchStore()
-
-    const itemLabel = (item: FilterItem) =>
-      ["audioProviders", "imageProviders"].indexOf(props.filterType) > -1
-        ? item.name
-        : i18n.t(item.name)
-
-    const onValueChange = ({ value }: { value: string }) => {
-      emit("toggle-filter", {
-        code: value,
-        filterType: props.filterType,
-      })
-    }
-    const getLicenseExplanationCloseAria = (license: License) => {
-      const elements = getElements(license).filter((icon) => icon !== "cc")
-      const descriptions = elements
-        .map((element) => i18n.t(`browsePage.licenseDescription.${element}`))
-        .join(" ")
-      const close = i18n.t("modal.closeNamed", {
-        name: i18n.t("browsePage.aria.licenseExplanation"),
-      })
-      return `${descriptions} - ${close}`
-    }
-
-    const isDisabled = (item: FilterItem) => {
-      return (
-        searchStore.isFilterDisabled(item, props.filterType) ?? props.disabled
-      )
-    }
-
-    const isLicense = (code: string): code is License => {
-      // Quick check that also prevents "`code` is declared but its value is never read" warning.
-      return !!code && props.filterType === "licenses"
-    }
-
-    return {
-      isDisabled,
-      itemLabel,
-      onValueChange,
-      getLicenseExplanationCloseAria,
-      isLicense,
-    }
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    options?: FilterItem[]
+    title: string
+    filterType: FilterCategory
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  "toggle-filter": [toggleFilterPayload]
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const searchStore = useSearchStore()
+
+const itemLabel = (item: FilterItem) =>
+  ["audioProviders", "imageProviders"].indexOf(props.filterType) > -1
+    ? item.name
+    : t(item.name)
+
+const onValueChange = ({ value }: { value: string }) => {
+  emit("toggle-filter", {
+    code: value,
+    filterType: props.filterType,
+  })
+}
+const getLicenseExplanationCloseAria = (license: License) => {
+  const elements = getElements(license).filter((icon) => icon !== "cc")
+  const descriptions = elements
+    .map((element) => t(`browsePage.licenseDescription.${element}`))
+    .join(" ")
+  const close = t("modal.closeNamed", {
+    name: t("browsePage.aria.licenseExplanation"),
+  })
+  return `${descriptions} - ${close}`
+}
+
+const isDisabled = (item: FilterItem) => {
+  return searchStore.isFilterDisabled(item, props.filterType) ?? props.disabled
+}
+
+const isLicense = (code: string): code is License => {
+  // Quick check that also prevents "`code` is declared but its value is never read" warning.
+  return !!code && props.filterType === "licenses"
+}
 </script>
diff --git a/frontend/src/components/VFilters/VLicenseExplanation.vue b/frontend/src/components/VFilters/VLicenseExplanation.vue
index 41382fb1293..fa127bf3918 100644
--- a/frontend/src/components/VFilters/VLicenseExplanation.vue
+++ b/frontend/src/components/VFilters/VLicenseExplanation.vue
@@ -2,10 +2,10 @@
   <div class="license-explanation w-70 max-w-xs p-6">
     <h5 class="text-base font-semibold">
       <template v-if="isLicense(license)">{{
-        $t("filters.licenseExplanation.licenseDefinition")
+        t("filters.licenseExplanation.licenseDefinition")
       }}</template>
       <template v-else>{{
-        $t("filters.licenseExplanation.markDefinition", {
+        t("filters.licenseExplanation.markDefinition", {
           mark: license.toUpperCase(),
         })
       }}</template>
@@ -28,7 +28,7 @@
     >
       <template #readMore>
         <VLink :href="`${getLicenseUrl(license)}`">{{
-          $t("filters.licenseExplanation.more.readMore")
+          t("filters.licenseExplanation.more.readMore")
         }}</VLink>
       </template>
       <template #mark>{{ license.toUpperCase() }}</template>
@@ -36,8 +36,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { getLicenseUrl, isLicense } from "~/utils/license"
 
@@ -50,26 +50,15 @@ import VLink from "~/components/VLink.vue"
  * Renders the explanation of the license passed to it by breaking it down to
  * its constituent clauses.
  */
-export default defineComponent({
-  name: "VLicenseExplanation",
-  components: {
-    VLicenseElements,
-    VLink,
-  },
-  props: {
-    /**
-     * the code of the license whose elements need to be explained
-     */
-    license: {
-      type: String as PropType<License>,
-      required: true,
-    },
-  },
-  setup() {
-    return {
-      isLicense,
-      getLicenseUrl,
-    }
-  },
-})
+
+defineProps<{
+  /**
+   * the code of the license whose elements need to be explained
+   */
+  license: License
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VFilters/VSearchGridFilter.vue b/frontend/src/components/VFilters/VSearchGridFilter.vue
index 63129e90681..ce039c7431b 100644
--- a/frontend/src/components/VFilters/VSearchGridFilter.vue
+++ b/frontend/src/components/VFilters/VSearchGridFilter.vue
@@ -5,7 +5,7 @@
       class="relative mb-6 flex items-center justify-between"
     >
       <h4 id="filters-heading" class="caption-bold uppercase">
-        {{ $t("filterList.filterBy") }}
+        {{ t("filterList.filterBy") }}
       </h4>
       <VButton
         v-show="isAnyFilterApplied"
@@ -15,7 +15,7 @@
         class="label-bold absolute end-0 !text-pink"
         @click="clearFilters"
       >
-        {{ $t("filterList.clear") }}
+        {{ t("filterList.clear") }}
       </VButton>
     </header>
     <form class="filters-form">
@@ -31,10 +31,10 @@
   </section>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 import { storeToRefs } from "pinia"
 
 import { useSearchStore } from "~/stores/search"
@@ -45,77 +45,63 @@ import { useAnalytics } from "~/composables/use-analytics"
 import VFilterChecklist from "~/components/VFilters/VFilterChecklist.vue"
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VSearchGridFilter",
-  components: {
-    VButton,
-    VFilterChecklist,
-  },
-  props: {
+withDefaults(
+  defineProps<{
     /**
      * Whether to show the header with the title and the clear button.
      */
-    showFilterHeader: {
-      type: Boolean,
-      default: true,
-    },
+    showFilterHeader?: boolean
     /**
      * When the filters are in the sidebar, we change the keyboard tabbing order:
      * the focus moves from the Filters button to the filter,
      * and from the last tabbable element to the main content on Tab,
      * and from the filters to the filters button on Shift Tab.
      */
-    changeTabOrder: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const searchStore = useSearchStore()
+    changeTabOrder?: boolean
+  }>(),
+  {
+    showFilterHeader: true,
+    changeTabOrder: true,
+  }
+)
 
-    const i18n = useI18n({ useScope: "global" })
+const searchStore = useSearchStore()
 
-    const { sendCustomEvent } = useAnalytics()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const {
-      isAnyFilterApplied,
-      searchTerm,
-      searchType,
-      searchFilters: filters,
-    } = storeToRefs(searchStore)
+const { sendCustomEvent } = useAnalytics()
 
-    const filterTypes = computed(
-      () => Object.keys(filters.value) as FilterCategory[]
-    )
-    const filterTypeTitle = (filterType: FilterCategory) => {
-      return i18n.t(`filters.${filterType}.title`)
-    }
+const {
+  isAnyFilterApplied,
+  searchTerm,
+  searchType,
+  searchFilters: filters,
+} = storeToRefs(searchStore)
 
-    const toggleFilter = ({
-      filterType,
-      code,
-    }: {
-      filterType: FilterCategory
-      code: string
-    }) => {
-      const checked = searchStore.toggleFilter({ filterType, code })
-      sendCustomEvent("APPLY_FILTER", {
-        category: filterType,
-        key: code,
-        checked,
-        searchType: searchType.value,
-        query: searchTerm.value,
-      })
-    }
+const filterTypes = computed(
+  () => Object.keys(filters.value) as FilterCategory[]
+)
+const filterTypeTitle = (filterType: FilterCategory) => {
+  return t(`filters.${filterType}.title`)
+}
 
-    return {
-      isAnyFilterApplied,
-      filters,
-      filterTypes,
-      filterTypeTitle,
-      clearFilters: searchStore.clearFilters,
-      toggleFilter,
-    }
-  },
-})
+const toggleFilter = ({
+  filterType,
+  code,
+}: {
+  filterType: FilterCategory
+  code: string
+}) => {
+  const checked = searchStore.toggleFilter({ filterType, code })
+  sendCustomEvent("APPLY_FILTER", {
+    category: filterType,
+    key: code,
+    checked,
+    searchType: searchType.value,
+    query: searchTerm.value,
+  })
+}
+const clearFilters = searchStore.clearFilters
 </script>
diff --git a/frontend/src/components/VFourOhFour.vue b/frontend/src/components/VFourOhFour.vue
index bb3808f369e..7f8560171e9 100644
--- a/frontend/src/components/VFourOhFour.vue
+++ b/frontend/src/components/VFourOhFour.vue
@@ -16,7 +16,7 @@
         class="z-10 grow-[3] space-y-4 lg:space-y-6"
       >
         <h1 class="heading-5 lg:heading-2 mb-6 lg:mb-10 lg:leading-tight">
-          {{ $t("404.title") }}
+          {{ t("404.title") }}
         </h1>
         <p class="label-bold lg:heading-6">
           <i18n-t scope="global" keypath="404.main" tag="span">
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { navigateTo } from "#imports"
+import { navigateTo, useNuxtApp } from "#imports"
 
 import { useSearchStore } from "~/stores/search"
 
@@ -49,6 +49,9 @@ import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSea
 import VSvg from "~/components/VSvg/VSvg.vue"
 
 defineProps({ error: Object })
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
 const searchStore = useSearchStore()
 
diff --git a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
index f20fac39296..dc6201ffdbf 100644
--- a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
+++ b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
@@ -10,17 +10,17 @@
         variant="transparent-gray"
         :icon-props="{ name: 'close-small' }"
         size="small"
-        :label="$t('audioTrack.close')"
+        :label="t('audioTrack.close')"
         @click="handleClose"
       />
     </template>
   </div>
 </template>
 
-<script lang="ts">
-import { useRoute } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp, useRoute } from "#imports"
 
-import { watch, computed, defineComponent } from "vue"
+import { watch, computed } from "vue"
 
 import { useActiveAudio } from "~/composables/use-active-audio"
 
@@ -32,122 +32,111 @@ import VGlobalAudioTrack from "~/components/VAudioTrack/VGlobalAudioTrack.vue"
 
 import type { RouteRecordName } from "vue-router"
 
-export default defineComponent({
-  name: "VGlobalAudioSection",
-  components: {
-    VIconButton,
-    VGlobalAudioTrack,
-  },
-  setup() {
-    const route = useRoute()
-
-    const activeMediaStore = useActiveMediaStore()
-    const uiStore = useUiStore()
-
-    const activeAudio = useActiveAudio()
-
-    const audio = computed(() => activeMediaStore.detail)
-
-    /* Message */
-
-    const handleError = (event: Event) => {
-      if (!(event.target instanceof HTMLAudioElement)) {
-        activeMediaStore.setMessage({ message: "err_unknown" })
-        return
-      }
-      const error = event.target.error
-      if (!error) {
-        return
-      }
-      let errorMsg
-      switch (error.code) {
-        case error.MEDIA_ERR_ABORTED: {
-          errorMsg = "err_aborted"
-          break
-        }
-        case error.MEDIA_ERR_NETWORK: {
-          errorMsg = "err_network"
-          break
-        }
-        case error.MEDIA_ERR_DECODE: {
-          errorMsg = "err_decode"
-          break
-        }
-        case error.MEDIA_ERR_SRC_NOT_SUPPORTED: {
-          errorMsg = "err_unsupported"
-          break
-        }
-        default: {
-          errorMsg = "err_unknown"
-        }
-      }
-      activeMediaStore.setMessage({ message: errorMsg })
-    }
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    watch(
-      activeAudio.obj,
-      (audio, _, onInvalidate) => {
-        if (!audio) {
-          return
-        }
-        audio.addEventListener("error", handleError)
-
-        onInvalidate(() => {
-          audio.removeEventListener("error", handleError)
-        })
-      },
-      { immediate: true }
-    )
-
-    const handleClose = () => {
-      activeAudio.obj.value?.pause()
-      activeAudio.obj.value = undefined
-      activeMediaStore.ejectActiveMediaItem()
-    }
+const route = useRoute()
 
-    const getRouteId = (routeName: RouteRecordName | null | undefined) => {
-      return String(routeName).split("__")[0]
-    }
+const activeMediaStore = useActiveMediaStore()
+const uiStore = useUiStore()
 
-    /**
-     * Router observation
-     *
-     * When navigating to pages other than search or single audio detail,
-     * close the global audio player.
-     *
-     *
-     * The player will continue only within 'search-audio' and 'audio-id' routes,
-     * and on desktop, only if the next route is the 'audio-id' page of the
-     * track currently playing, or the original search result page.
-     */
-    const routeId = computed(() => getRouteId(route?.name))
-    watch(routeId, (newRouteId) => {
-      if (!["search", "search-audio", "audio-id"].includes(newRouteId)) {
-        ejectAndClose()
-      }
-    })
+const activeAudio = useActiveAudio()
 
-    const ejectAndClose = () => {
-      activeAudio.obj.value?.pause()
-      activeMediaStore.ejectActiveMediaItem()
-    }
-
-    /**
-     * Stop the global audio when the global audio player is hidden on screens
-     * above sm.
-     */
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
-    watch(isSm, (aboveSm) => {
-      if (aboveSm) {
-        ejectAndClose()
-      }
-    })
+const audio = computed(() => activeMediaStore.detail)
 
-    return {
-      audio,
+/* Message */
 
-      handleClose,
+const handleError = (event: Event) => {
+  if (!(event.target instanceof HTMLAudioElement)) {
+    activeMediaStore.setMessage({ message: "err_unknown" })
+    return
+  }
+  const error = event.target.error
+  if (!error) {
+    return
+  }
+  let errorMsg
+  switch (error.code) {
+    case error.MEDIA_ERR_ABORTED: {
+      errorMsg = "err_aborted"
+      break
+    }
+    case error.MEDIA_ERR_NETWORK: {
+      errorMsg = "err_network"
+      break
     }
+    case error.MEDIA_ERR_DECODE: {
+      errorMsg = "err_decode"
+      break
+    }
+    case error.MEDIA_ERR_SRC_NOT_SUPPORTED: {
+      errorMsg = "err_unsupported"
+      break
+    }
+    default: {
+      errorMsg = "err_unknown"
+    }
+  }
+  activeMediaStore.setMessage({ message: errorMsg })
+}
+
+watch(
+  activeAudio.obj,
+  (audio, _, onInvalidate) => {
+    if (!audio) {
+      return
+    }
+    audio.addEventListener("error", handleError)
+
+    onInvalidate(() => {
+      audio.removeEventListener("error", handleError)
+    })
   },
+  { immediate: true }
+)
+
+const handleClose = () => {
+  activeAudio.obj.value?.pause()
+  activeAudio.obj.value = undefined
+  activeMediaStore.ejectActiveMediaItem()
+}
+
+const getRouteId = (routeName: RouteRecordName | null | undefined) => {
+  return String(routeName).split("__")[0]
+}
+
+/**
+ * Router observation
+ *
+ * When navigating to pages other than search or single audio detail,
+ * close the global audio player.
+ *
+ *
+ * The player will continue only within 'search-audio' and 'audio-id' routes,
+ * and on desktop, only if the next route is the 'audio-id' page of the
+ * track currently playing, or the original search result page.
+ */
+const routeId = computed(() => getRouteId(route?.name))
+watch(routeId, (newRouteId) => {
+  if (!["search", "search-audio", "audio-id"].includes(newRouteId)) {
+    ejectAndClose()
+  }
+})
+
+const ejectAndClose = () => {
+  activeAudio.obj.value?.pause()
+  activeMediaStore.ejectActiveMediaItem()
+}
+
+/**
+ * Stop the global audio when the global audio player is hidden on screens
+ * above sm.
+ */
+const isSm = computed(() => uiStore.isBreakpoint("sm"))
+watch(isSm, (aboveSm) => {
+  if (aboveSm) {
+    ejectAndClose()
+  }
 })
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index 75453994ce1..41811c3e54f 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -14,7 +14,7 @@
       <VSearchBarButton
         v-show="searchTerm !== ''"
         icon="close-small"
-        :label="$t('browsePage.searchForm.clear')"
+        :label="t('browsePage.searchForm.clear')"
         variant="filled-white"
         class="hidden group-focus-within:flex"
         @click="clearSearchTerm"
@@ -43,6 +43,8 @@
   </header>
 </template>
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed, inject, ref } from "vue"
 
 import { useMediaStore } from "~/stores/media"
@@ -69,6 +71,9 @@ import type { Ref } from "vue"
 /**
  * The desktop search header.
  */
+const {
+  $i18n: { t },
+} = useNuxtApp()
 const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
 const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
 
diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
index 37ec50e038f..a76777285f9 100644
--- a/frontend/src/components/VHeader/VHeaderInternal.vue
+++ b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -19,7 +19,7 @@
         size="large"
         :disabled="!doneHydrating"
         :icon-props="{ name: 'menu' }"
-        :label="$t('header.aria.menu')"
+        :label="t('header.aria.menu')"
         v-bind="triggerA11yProps"
         @click="onTriggerClick"
       />
@@ -59,7 +59,7 @@
                 size="large"
                 :icon-props="{ name: 'close' }"
                 class="text-white focus-slim-tx-yellow hover:bg-white hover:bg-opacity-10"
-                :label="$t('modal.closePagesMenu')"
+                :label="t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
             </div>
@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "#imports"
+import { useNuxtApp, useRoute } from "#imports"
 
 import { computed, ref, watch } from "vue"
 
@@ -104,7 +104,7 @@ import VWordPressLink from "~/components/VHeader/VWordPressLink.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 const emit = defineEmits(["close", "open"])
-const menuButtonRef = ref<{ $el: HTMLElement } | null>(null)
+const menuButtonRef = ref<InstanceType<typeof VIconButton> | null>(null)
 const nodeRef = ref<HTMLElement | null>(null)
 const modalContentRef = ref<{
   $el: HTMLElement
@@ -159,4 +159,8 @@ watch(route, () => {
     closePageMenu()
   }
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
index 928152298a3..361c2b7b9fd 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
@@ -4,10 +4,10 @@
     icon="source"
     :label="
       appliedFilterCount
-        ? $t('header.contentSettingsButton.withCount', {
+        ? t('header.contentSettingsButton.withCount', {
             count: appliedFilterCount,
           })
-        : $t('header.contentSettingsButton.simple')
+        : t('header.contentSettingsButton.simple')
     "
     aria-haspopup="dialog"
     :aria-expanded="isPressed"
@@ -22,21 +22,22 @@
     </template>
   </VSearchBarButton>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
 
-export default {
-  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,
+  }
+)
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
index cdb71a8f1a6..96b9807e453 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -1,6 +1,6 @@
 <template>
   <VModalContent
-    :aria-label="$t('header.aria.menu')"
+    :aria-label="t('header.aria.menu')"
     :hide-on-click-outside="true"
     :hide="close"
     :visible="visible"
@@ -22,21 +22,21 @@
           size="medium"
           class="me-4 gap-x-2"
           ><VIcon :name="searchType.searchType" />
-          <h2 class="label-regular">{{ $t("searchType.heading") }}</h2></VTab
+          <h2 class="label-regular">{{ t("searchType.heading") }}</h2></VTab
         >
         <h2
           v-else
           class="label-regular relative my-2 me-4 flex h-12 items-center gap-x-2 px-2 after:absolute after:bottom-[-0.625rem] after:right-1/2 after:h-0.5 after:w-full after:translate-x-1/2 after:translate-y-[-50%] after:bg-dark-charcoal"
         >
           <VIcon :name="searchType.searchType" />
-          {{ $t("searchType.heading") }}
+          {{ t("searchType.heading") }}
         </h2>
         <VFilterTab
           v-if="showFilters"
           :applied-filter-count="appliedFilterCount"
         />
         <VIconButton
-          :label="$t('modal.closeContentSettings')"
+          :label="t('modal.closeContentSettings')"
           :icon-props="{ name: 'close' }"
           variant="transparent-gray"
           size="large"
@@ -48,7 +48,7 @@
         <VSearchTypes
           size="medium"
           :use-links="useLinks"
-          @select="$emit('select', $event)"
+          @select="emit('select', $event)"
         />
       </VTabPanel>
       <!-- Horizontal padding removed to display divider. -->
@@ -72,22 +72,22 @@
         :disabled="isClearButtonDisabled"
         size="large"
         @click="clearFilters"
-        >{{ $t("filterList.clear") }}
+        >{{ t("filterList.clear") }}
       </VButton>
       <VShowResultsButton :is-fetching="isFetching" @click="close" />
     </footer>
   </VModalContent>
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed, ref } from "vue"
 
 import { useSearchStore } from "~/stores/search"
 
 import useSearchType from "~/composables/use-search-type"
 
-import { defineEvent } from "~/types/emits"
-
-import { SearchType } from "~/constants/media"
+import type { SearchType } from "~/constants/media"
 
 import VButton from "~/components/VButton.vue"
 import VFilterTab from "~/components/VHeader/VHeaderMobile/VFilterTab.vue"
@@ -104,89 +104,50 @@ import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 type ContentSettingsTab = "content-settings" | "filters"
 
-export default defineComponent({
-  name: "VContentSettingsModalContent",
-  components: {
-    VIconButton,
-    VSafeBrowsing,
-    VIcon,
-    VModalContent,
-    VButton,
-    VFilterTab,
-    VSearchGridFilter,
-    VSearchTypes,
-    VShowResultsButton,
-    VTab,
-    VTabPanel,
-    VTabs,
-  },
-  props: {
-    variant: {
-      type: String as PropType<"fit-content" | "two-thirds">,
-      default: "fit-content",
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-    close: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    showFilters: {
-      type: Boolean,
-      default: true,
-    },
-    useLinks: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    select: defineEvent<[SearchType]>(),
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-    const content = useSearchType()
-    const selectedTab = ref<ContentSettingsTab>("content-settings")
-    const changeSelectedTab = (tab: string) => {
-      selectedTab.value = tab as ContentSettingsTab
-    }
-
-    const areFiltersSelected = computed(() => searchStore.isAnyFilterApplied)
+const props = withDefaults(
+  defineProps<{
+    variant?: "fit-content" | "two-thirds"
+    isFetching?: boolean
+    close: () => void
+    visible?: boolean
+    showFilters?: boolean
+    useLinks?: boolean
+  }>(),
+  {
+    variant: "fit-content",
+    isFetching: false,
+    visible: false,
+    showFilters: true,
+    useLinks: true,
+  }
+)
 
-    const showClearFiltersButton = computed(
-      () => props.showFilters && selectedTab.value === "filters"
-    )
-    const isClearButtonDisabled = computed(
-      () => !searchStore.isAnyFilterApplied
-    )
-    const appliedFilterCount = computed<number>(
-      () => searchStore.appliedFilterCount
-    )
+const emit = defineEmits<{
+  select: [SearchType]
+}>()
 
-    const searchType = computed(() => content.getSearchTypeProps())
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const clearFilters = () => {
-      searchStore.clearFilters()
-    }
+const searchStore = useSearchStore()
+const content = useSearchType()
+const selectedTab = ref<ContentSettingsTab>("content-settings")
+const changeSelectedTab = (tab: string) => {
+  selectedTab.value = tab as ContentSettingsTab
+}
 
-    return {
-      searchType,
+const showClearFiltersButton = computed(
+  () => props.showFilters && selectedTab.value === "filters"
+)
+const isClearButtonDisabled = computed(() => !searchStore.isAnyFilterApplied)
+const appliedFilterCount = computed<number>(
+  () => searchStore.appliedFilterCount
+)
 
-      selectedTab,
-      changeSelectedTab,
+const searchType = computed(() => content.getSearchTypeProps())
 
-      areFiltersSelected,
-      appliedFilterCount,
-      showClearFiltersButton,
-      isClearButtonDisabled,
-      clearFilters,
-    }
-  },
-})
+const clearFilters = () => {
+  searchStore.clearFilters()
+}
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
index 4f3f55ce3e8..3c36f1bae36 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -1,21 +1,25 @@
 <template>
   <VTab id="filters" size="medium" class="gap-x-2">
     <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
-    <h2 class="label-regular">{{ $t("filters.title") }}</h2>
+    <h2 class="label-regular">{{ t("filters.title") }}</h2>
   </VTab>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 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<{
+    appliedFilterCount: number
+  }>(),
+  {
+    appliedFilterCount: 0,
+  }
+)
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index b7833816b88..2a4a53bc790 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -30,7 +30,7 @@
             <VSearchBarButton
               v-show="searchBarIsActive"
               icon="chevron-back"
-              :label="$t('header.backButton')"
+              :label="t('header.backButton')"
               :rtl-flip="true"
               variant="filled-gray"
               @click="handleBack"
@@ -41,12 +41,12 @@
             id="search-bar"
             ref="searchInputRef"
             name="q"
-            :placeholder="$t('hero.search.placeholder')"
+            :placeholder="t('hero.search.placeholder')"
             type="search"
             class="search-field ms-1 h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-dark-charcoal-70 placeholder-dark-charcoal-70 hover:text-dark-charcoal hover:placeholder-dark-charcoal focus-visible:outline-none"
             :value="searchTerm"
             :aria-label="
-              $t('search.searchBarLabel', {
+              t('search.searchBarLabel', {
                 openverse: 'Openverse',
               })
             "
@@ -66,7 +66,7 @@
             <VSearchBarButton
               v-show="searchBarIsActive && searchTerm"
               icon="close-small"
-              :label="$t('browsePage.searchForm.clear')"
+              :label="t('browsePage.searchForm.clear')"
               inner-area-classes="bg-white hover:bg-dark-charcoal-10"
               @click="clearSearchText"
             />
@@ -112,6 +112,8 @@
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed, nextTick, ref, watch } from "vue"
 
 import { ensureFocus } from "~/utils/reakit-utils/focus"
@@ -128,8 +130,6 @@ import { useSearchStore } from "~/stores/search"
 
 import { useHydrating } from "~/composables/use-hydrating"
 
-import { defineEvent } from "~/types/emits"
-
 import VLogoButton from "~/components/VHeader/VLogoButton.vue"
 import VInputModal from "~/components/VModal/VInputModal.vue"
 import VContentSettingsModalContent from "~/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue"
@@ -142,10 +142,14 @@ import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButto
  * that fires a search request. The loading state and number of hits are also
  * displayed in the bar itself.
  */
-const emit = defineEmits({
-  open: defineEvent<[]>(),
-  close: defineEvent<[]>(),
-})
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const headerRef = ref<HTMLElement | null>(null)
 
@@ -216,6 +220,7 @@ const handleBack = () => {
  * visual focus is on the input field.
  */
 const selectedIdx = ref<number | undefined>(undefined)
+
 const entries = computed(() => searchStore.recentSearches)
 const handleVerticalArrows = (event: KeyboardEvent) => {
   event.preventDefault() // Prevent the cursor from moving horizontally.
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
index 0e21a5bc3d2..f85c065bc77 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
@@ -3,7 +3,7 @@
     variant="filled-pink"
     size="large"
     class="label-bold relative ms-auto"
-    @click="$emit('click')"
+    @click="emit('click')"
   >
     <!-- Loading animation -->
     <span
@@ -30,22 +30,22 @@
         />
       </svg>
       <span class="sr-only">
-        {{ $t("header.loading") }}
+        {{ t("header.loading") }}
       </span>
     </span>
 
     <!-- To preserve the button width when state changes, this element is not
     removed from the DOM, only hidden and muted. -->
     <span :class="{ 'opacity-0': isFetching }" :aria-hidden="isFetching">
-      {{ $t("header.seeResults") }}
+      {{ t("header.seeResults") }}
     </span>
   </VButton>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 import VButton from "~/components/VButton.vue"
 
@@ -53,36 +53,33 @@ import VButton from "~/components/VButton.vue"
  * 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: {
+withDefaults(
+  defineProps<{
     /**
-     * whether the results are being updated behind the open modal
+     * Whether the button should display the loading animation.
      */
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    const diameter = 8 // px
-    const spacing = 8 // px
+    isFetching: boolean
+  }>(),
+  {
+    isFetching: false,
+  }
+)
+const emit = defineEmits<{
+  /**
+   * Emitted when the button is clicked.
+   */
+  click: []
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    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>
 
 <style>
diff --git a/frontend/src/components/VHeader/VHomeLink.vue b/frontend/src/components/VHeader/VHomeLink.vue
index 5fdb88365a6..d7a7568a494 100644
--- a/frontend/src/components/VHeader/VHomeLink.vue
+++ b/frontend/src/components/VHeader/VHomeLink.vue
@@ -2,7 +2,7 @@
   <VButton
     as="VLink"
     href="/"
-    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
+    :aria-label="t('header.homeLink', { openverse: 'Openverse' })"
     variant="transparent-tx"
     size="disabled"
     :class="
@@ -20,8 +20,8 @@
   </VButton>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import VButton from "~/components/VButton.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
@@ -30,23 +30,19 @@ import VSvg from "~/components/VSvg/VSvg.vue"
  * 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: {
+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"
+  }>(),
+  {}
+)
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VLogoButton.vue b/frontend/src/components/VHeader/VLogoButton.vue
index 66ddae4a268..70fa6f7edad 100644
--- a/frontend/src/components/VHeader/VLogoButton.vue
+++ b/frontend/src/components/VHeader/VLogoButton.vue
@@ -2,7 +2,7 @@
   <VButton
     as="VLink"
     href="/"
-    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
+    :aria-label="t('header.homeLink', { openverse: 'Openverse' })"
     variant="transparent-tx"
     size="large"
     icon-only
@@ -14,8 +14,8 @@
     />
   </VButton>
 </template>
-<script>
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
 import VButton from "~/components/VButton.vue"
@@ -24,14 +24,16 @@ import VButton from "~/components/VButton.vue"
  * 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,
-    },
-  },
-})
+withDefaults(
+  defineProps<{
+    isFetching: boolean
+  }>(),
+  {
+    isFetching: false,
+  }
+)
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
index 756f447515b..ae7b8c4e045 100644
--- a/frontend/src/components/VHeader/VPageLinks.vue
+++ b/frontend/src/components/VHeader/VPageLinks.vue
@@ -16,7 +16,7 @@
       @click="onClick"
     >
       <div class="flex w-full flex-row justify-between">
-        <span class="pe-2">{{ $t(page.name) }}</span>
+        <span class="pe-2">{{ t(page.name) }}</span>
         <VIcon
           v-if="isLinkExternal(page)"
           name="external-link"
@@ -38,7 +38,7 @@
         ]"
         :href="page.link"
         @click="onClick"
-        >{{ $t(page.name)
+        >{{ t(page.name)
         }}<VIcon
           v-if="isLinkExternal(page)"
           name="external-link"
@@ -51,6 +51,8 @@
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed } from "vue"
 
 import usePages from "~/composables/use-pages"
@@ -80,6 +82,9 @@ const props = withDefaults(
   }>(),
   { mode: "light", navLinkClasses: "", variant: "links", isInModal: false }
 )
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
 const emit = defineEmits(["open", "close"])
 
diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
index 07017d65d92..12d1bb9331f 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBarEl" class="relative" :class="$attrs.class">
+  <div ref="searchBarEl" class="relative" :class="attrs.class">
     <!-- Form action is a fallback for when JavaScript is disabled. -->
     <form
       action="/search"
@@ -11,9 +11,9 @@
         ref="inputFieldRef"
         v-bind="nonClassAttrs"
         v-model="modelMedium"
-        :placeholder="placeholder || $t('hero.search.placeholder')"
+        :placeholder="placeholder || t('hero.search.placeholder')"
         class="search-field flex-grow border-tx bg-dark-charcoal-10 text-dark-charcoal-70 focus-within:bg-white focus:border-pink group-hover:bg-dark-charcoal-10 group-hover:text-dark-charcoal group-hover:focus-within:bg-white"
-        :label-text="$t('search.searchBarLabel', { openverse: 'Openverse' })"
+        :label-text="t('search.searchBarLabel', { openverse: 'Openverse' })"
         :connection-sides="['end']"
         :size="size"
         field-id="search-bar"
@@ -54,12 +54,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { onClickOutside } from "@vueuse/core"
+import { computed, ref, useAttrs } from "vue"
 
-import { defineEvent } from "~/types/emits"
+import { onClickOutside } from "@vueuse/core"
 
 import { useSearchStore } from "~/stores/search"
 
@@ -80,179 +80,156 @@ import VRecentSearches from "~/components/VRecentSearches/VRecentSearches.vue"
  * 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 },
+defineOptions({
   inheritAttrs: false,
-  props: {
+})
+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>,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-      required: false,
-    },
+    modelValue?: string
+    size: keyof typeof FIELD_SIZES
+    placeholder?: string
+  }>(),
+  {
+    modelValue: "",
+    size: "medium",
+    placeholder: undefined,
+  }
+)
+const emit = defineEmits<{
+  "update:modelValue": [string]
+  submit: []
+}>()
+const attrs = useAttrs()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+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(),
-  },
-  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 searchStore = useSearchStore()
-
-    const isRecentVisible = ref(false)
-    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]
-    })
-
-    /**
-     * Show and hide recent searches.
-     */
-    const showRecentSearches = () => {
-      isRecentVisible.value = true
-    }
-    const hideRecentSearches = () => {
-      isRecentVisible.value = false
-    }
-    /**
-     * Hide recent searches on blur and click outside.
-     */
-    const handleSearchBlur = () => {
-      if (!entries.value.length) {
-        hideRecentSearches()
-      }
-    }
-    onClickOutside(searchBarEl, hideRecentSearches)
-
-    /**
-     * Refers to the current suggestion that has visual focus (not DOM focus)
-     * and is the active descendant. This should be set to `undefined` when the
-     * visual focus is on the input field.
-     */
-    const selectedIdx = ref<number | undefined>(undefined)
-    const entries = computed(() => searchStore.recentSearches)
-
-    const handleVerticalArrows = (event: KeyboardEvent) => {
-      event.preventDefault() // Prevent the cursor from moving horizontally.
-      const { key, altKey } = event
-
-      showRecentSearches()
-      if (altKey) {
-        return
-      }
-
-      // Shift selection (if Alt was not pressed with arrow keys)
-      let defaultValue: number
-      let offset: number
-      if (key == keycodes.ArrowUp) {
-        defaultValue = 0
-        offset = -1
-      } else {
-        defaultValue = -1
-        offset = 1
-      }
-      selectedIdx.value = cyclicShift(
-        selectedIdx.value ?? defaultValue,
-        offset,
-        0,
-        entries.value.length
-      )
-    }
-
-    const handleOtherKeys = (event: KeyboardEvent) => {
-      const { key } = event
-
-      if (key === keycodes.Enter && selectedIdx.value) {
-        // If a recent search is selected, populate its value into the input.
-        modelMedium.value = entries.value[selectedIdx.value]
-      }
-
-      // Hide the recent searches popover when the user presses Enter, Escape or Shift+Tab on the input.
-      if (
-        (key === keycodes.Tab && event.shiftKey) ||
-        ([keycodes.Escape, keycodes.Enter] as string[]).includes(key)
-      ) {
-        hideRecentSearches()
-      }
-
-      selectedIdx.value = undefined // Lose visual focus from entries.
-    }
-    const handleKeydown = (event: KeyboardEvent) => {
-      const { key } = event
-
-      return ([keycodes.ArrowUp, keycodes.ArrowDown] as string[]).includes(key)
-        ? handleVerticalArrows(event)
-        : handleOtherKeys(event)
-    }
-
-    /* Populate the input with the clicked entry and execute the search. */
-    const handleSelect = (idx: number) => {
-      modelMedium.value = entries.value[idx]
-
-      hideRecentSearches()
-      selectedIdx.value = undefined // Lose visual focus from entries.
-      handleSearch() // Immediately execute the search manually.
-    }
-    /* Clear all recent searches from the store. */
-    const handleClear = () => {
-      inputFieldRef.value?.focusInput()
-      searchStore.clearRecentSearches()
-    }
-
-    const nonClassAttrs = computed(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { class: _, ...rest } = attrs
-      return rest
-    })
+})
 
-    return {
-      searchBarEl,
-      inputFieldRef,
+const handleSearch = () => {
+  emit("submit")
+}
 
-      handleSearch,
-      modelMedium,
+/* Recent searches */
+const searchStore = useSearchStore()
 
-      showRecentSearches,
-      hideRecentSearches,
-      handleSearchBlur,
+const isRecentVisible = ref(false)
+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]
+})
 
-      isRecentVisible,
-      recentClasses,
-      selectedIdx,
-      entries,
-      nonClassAttrs,
+/**
+ * Show and hide recent searches.
+ */
+const showRecentSearches = () => {
+  isRecentVisible.value = true
+}
+const hideRecentSearches = () => {
+  isRecentVisible.value = false
+}
+/**
+ * Hide recent searches on blur and click outside.
+ */
+const handleSearchBlur = () => {
+  if (!entries.value.length) {
+    hideRecentSearches()
+  }
+}
+onClickOutside(searchBarEl, hideRecentSearches)
 
-      handleKeydown,
-      handleSelect,
-      handleClear,
-    }
-  },
+/**
+ * Refers to the current suggestion that has visual focus (not DOM focus)
+ * and is the active descendant. This should be set to `undefined` when the
+ * visual focus is on the input field.
+ */
+const selectedIdx = ref<number | undefined>(undefined)
+const entries = computed(() => searchStore.recentSearches)
+
+const handleVerticalArrows = (event: KeyboardEvent) => {
+  event.preventDefault() // Prevent the cursor from moving horizontally.
+  const { key, altKey } = event
+
+  showRecentSearches()
+  if (altKey) {
+    return
+  }
+
+  // Shift selection (if Alt was not pressed with arrow keys)
+  let defaultValue: number
+  let offset: number
+  if (key == keycodes.ArrowUp) {
+    defaultValue = 0
+    offset = -1
+  } else {
+    defaultValue = -1
+    offset = 1
+  }
+  selectedIdx.value = cyclicShift(
+    selectedIdx.value ?? defaultValue,
+    offset,
+    0,
+    entries.value.length
+  )
+}
+
+const handleOtherKeys = (event: KeyboardEvent) => {
+  const { key } = event
+
+  if (key === keycodes.Enter && selectedIdx.value) {
+    // If a recent search is selected, populate its value into the input.
+    modelMedium.value = entries.value[selectedIdx.value]
+  }
+
+  // Hide the recent searches popover when the user presses Enter, Escape or Shift+Tab on the input.
+  if (
+    (key === keycodes.Tab && event.shiftKey) ||
+    ([keycodes.Escape, keycodes.Enter] as string[]).includes(key)
+  ) {
+    hideRecentSearches()
+  }
+
+  selectedIdx.value = undefined // Lose visual focus from entries.
+}
+const handleKeydown = (event: KeyboardEvent) => {
+  const { key } = event
+
+  return ([keycodes.ArrowUp, keycodes.ArrowDown] as string[]).includes(key)
+    ? handleVerticalArrows(event)
+    : handleOtherKeys(event)
+}
+
+/* Populate the input with the clicked entry and execute the search. */
+const handleSelect = (idx: number) => {
+  modelMedium.value = entries.value[idx]
+
+  hideRecentSearches()
+  selectedIdx.value = undefined // Lose visual focus from entries.
+  handleSearch() // Immediately execute the search manually.
+}
+/* Clear all recent searches from the store. */
+const handleClear = () => {
+  inputFieldRef.value?.focusInput()
+  searchStore.clearRecentSearches()
+}
+
+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 5c3c4ecff55..b41a27397ee 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -1,7 +1,7 @@
 <template>
   <VButton
     type="submit"
-    :aria-label="$t('search.search')"
+    :aria-label="t('search.search')"
     size="disabled"
     :disabled="!doneHydrating"
     variant="plain"
@@ -18,8 +18,8 @@
   </VButton>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { useHydrating } from "~/composables/use-hydrating"
 
@@ -28,24 +28,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()
-
-    return {
-      doneHydrating,
-    }
-  },
-})
+defineProps<{
+  /**
+   * The current route determines the size and the style of the button.
+   */
+  route: "home" | "404" | "search"
+}>()
+const { doneHydrating } = useHydrating()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
index a9374191338..d25a4c48b97 100644
--- a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -18,10 +18,10 @@
         ref="inputRef"
         type="search"
         name="q"
-        :placeholder="$t('hero.search.placeholder')"
+        :placeholder="t('hero.search.placeholder')"
         class="paragraph-large md:label-regular ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-dark-charcoal placeholder-dark-charcoal-70 focus:outline-none"
         :aria-label="
-          $t('search.searchBarLabel', {
+          t('search.searchBarLabel', {
             openverse: 'Openverse',
           })
         "
@@ -33,10 +33,10 @@
   </form>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { defineEvent } from "~/types/emits"
+import { ref } from "vue"
 
 import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
 
@@ -47,46 +47,39 @@ 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",
-    },
+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]>(),
-  },
-  expose: ["focusInput"],
-  setup(_, { emit }) {
-    const inputRef = ref<HTMLInputElement | null>(null)
+    hasPopover: boolean
+  }>(),
+  {
+    route: "home",
+    hasPopover: false,
+  }
+)
 
-    // Only emit `submit` if the input value is not blank
-    const handleSearch = () => {
-      const searchTerm = inputRef.value?.value.trim()
-      if (searchTerm) {
-        emit("submit", searchTerm)
-      }
-    }
+const emit = defineEmits<{
+  submit: [string]
+}>()
+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)
+  }
+}
 
-    return {
-      inputRef,
-      handleSearch,
-      focusInput,
-    }
-  },
-})
+const focusInput = () => {
+  inputRef.value?.focus()
+}
+
+defineExpose({ focusInput })
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index 751f698790e..3fbe6c38be6 100644
--- a/frontend/src/components/VHeader/VWordPressLink.vue
+++ b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -1,7 +1,7 @@
 <template>
   <VLink
     href="https://wordpress.org"
-    :aria-label="$t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
+    :aria-label="t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
     :class="mode === 'light' ? 'text-dark-charcoal' : 'text-white'"
     class="hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx"
   >
@@ -18,6 +18,8 @@
   </VLink>
 </template>
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import VLink from "~/components/VLink.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
 
@@ -27,4 +29,7 @@ withDefaults(
   }>(),
   { mode: "light" }
 )
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VHideButton.vue b/frontend/src/components/VHideButton.vue
index 384e485daad..62929ba036c 100644
--- a/frontend/src/components/VHideButton.vue
+++ b/frontend/src/components/VHideButton.vue
@@ -6,10 +6,10 @@
       class="label-bold"
       size="small"
       has-icon-end
-      @click="$emit('click')"
+      @click="emit('click')"
     >
       <span class="hidden md:block">{{
-        $t("sensitiveContent.singleResult.hide")
+        t("sensitiveContent.singleResult.hide")
       }}</span>
       <VIcon name="eye-closed" />
     </VButton>
@@ -18,29 +18,27 @@
       variant="transparent-gray"
       :icon-props="{ name: 'eye-closed' }"
       size="small"
-      :label="$t('sensitiveContent.singleResult.hide')"
-      @click="$emit('click')"
+      :label="t('sensitiveContent.singleResult.hide')"
+      @click="emit('click')"
     />
   </div>
 </template>
 
-<script>
-import { computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import { useUiStore } from "~/stores/ui"
-import { defineEvent } from "~/types/emits"
 
-export default defineComponent({
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    const uiStore = useUiStore()
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
+const emit = defineEmits<{
+  click: []
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    return {
-      isMd,
-    }
-  },
-})
+const uiStore = useUiStore()
+const isMd = computed(() => uiStore.isBreakpoint("md"))
 </script>
diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue
index 936f4791989..8719bbc8cde 100644
--- a/frontend/src/components/VHomepageContent.vue
+++ b/frontend/src/components/VHomepageContent.vue
@@ -3,11 +3,11 @@
     <h1
       class="mb-2 mt-auto text-[40px] font-light leading-tight lg:text-[63px]"
     >
-      {{ $t("hero.subtitle") }}
+      {{ t("hero.subtitle") }}
     </h1>
 
     <p class="text-base leading-relaxed">
-      {{ $t("hero.description") }}
+      {{ t("hero.description") }}
     </p>
 
     <VStandaloneSearchBar
@@ -68,14 +68,16 @@
         <VLink
           href="https://creativecommons.org/licenses/"
           class="text-dark-charcoal underline hover:text-dark-charcoal"
-          >{{ $t("hero.disclaimer.license") }}</VLink
+          >{{ t("hero.disclaimer.license") }}</VLink
         >
       </template>
     </i18n-t>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, ref, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed, ref } from "vue"
 
 import type { SearchType } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
@@ -92,97 +94,59 @@ import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.v
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
 import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
 
-export default defineComponent({
-  name: "VHomepageContent",
-  components: {
-    VContentSettingsModalContent,
-    VSearchTypes,
-    VPopoverContent,
-    VSearchTypeButton,
-    VStandaloneSearchBar,
-    VLink,
-  },
-  props: {
-    handleSearch: {
-      type: Function as PropType<(query: string) => void>,
-      required: true,
-    },
-    searchType: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
-    setSearchType: {
-      type: Function as PropType<(searchType: SearchType) => void>,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const searchTypeButtonRef = ref<InstanceType<
-      typeof VSearchTypeButton
-    > | null>(null)
-    const searchBarRef = ref<InstanceType<typeof VStandaloneSearchBar> | null>(
-      null
-    )
-    const nodeRef = computed(() => searchBarRef.value?.$el ?? null)
-
-    const { getSearchTypeProps } = useSearchType()
-    const uiStore = useUiStore()
-
-    const searchTypeProps = computed(() => getSearchTypeProps())
-
-    const isContentSwitcherVisible = ref(false)
-
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
-    const isLg = computed(() => uiStore.isBreakpoint("lg"))
-
-    const triggerElement = computed(
-      () => searchTypeButtonRef.value?.$el || null
-    )
-
-    const lockBodyScroll = computed(() => !isLg.value)
-
-    /**
-     * When a search type is selected, we close the popover or modal,
-     * and focus the search input.
-     *
-     * @param searchType
-     */
-    const handleSelect = (searchType: SearchType) => {
-      props.setSearchType(searchType)
-      searchBarRef.value?.focusInput()
-      closeContentSwitcher()
-    }
-
-    const {
-      close: closeContentSwitcher,
-      open: openContentSwitcher,
-      onTriggerClick,
-      triggerA11yProps,
-    } = useDialogControl({
-      visibleRef: isContentSwitcherVisible,
-      nodeRef,
-      lockBodyScroll,
-      emit,
-    })
-
-    return {
-      searchTypeButtonRef,
-      searchBarRef,
-
-      isLg,
-      isSm,
-
-      triggerElement,
-      onTriggerClick,
-      handleSelect,
-      searchTypeProps,
-      closeContentSwitcher,
-      openContentSwitcher,
-      isContentSwitcherVisible,
-      triggerA11yProps,
-
-      skipToContentTargetId,
-    }
-  },
+const props = defineProps<{
+  handleSearch: (query: string) => void
+  searchType: SearchType
+  setSearchType: (searchType: SearchType) => void
+}>()
+
+const emit = defineEmits(["open", "close"])
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const searchTypeButtonRef = ref<InstanceType<typeof VSearchTypeButton> | null>(
+  null
+)
+const searchBarRef = ref<InstanceType<typeof VStandaloneSearchBar> | null>(null)
+const nodeRef = computed(() => searchBarRef.value?.$el ?? null)
+
+const { getSearchTypeProps } = useSearchType()
+const uiStore = useUiStore()
+
+const searchTypeProps = computed(() => getSearchTypeProps())
+
+const isContentSwitcherVisible = ref(false)
+
+const isSm = computed(() => uiStore.isBreakpoint("sm"))
+const isLg = computed(() => uiStore.isBreakpoint("lg"))
+
+const triggerElement = computed(() => searchTypeButtonRef.value?.$el || null)
+
+const lockBodyScroll = computed(() => !isLg.value)
+
+/**
+ * When a search type is selected, we close the popover or modal,
+ * and focus the search input.
+ *
+ * @param searchType
+ */
+const handleSelect = (searchType: SearchType) => {
+  props.setSearchType(searchType)
+  searchBarRef.value?.focusInput()
+  closeContentSwitcher()
+}
+
+const {
+  close: closeContentSwitcher,
+  open: openContentSwitcher,
+  onTriggerClick,
+  triggerA11yProps,
+} = useDialogControl({
+  visibleRef: isContentSwitcherVisible,
+  nodeRef,
+  lockBodyScroll,
+  emit: emit as (event: string) => void,
 })
 </script>
diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue
index 4918b8d6679..a0ca18db441 100644
--- a/frontend/src/components/VImageCell/VImageCell.vue
+++ b/frontend/src/components/VImageCell/VImageCell.vue
@@ -28,7 +28,7 @@
             { 'scale-150 blur-image': shouldBlur },
           ]"
           :alt="
-            shouldBlur ? `${$t('sensitiveContent.title.image')}` : image.title
+            shouldBlur ? `${t('sensitiveContent.title.image')}` : image.title
           "
           :src="imageUrl"
           :width="imgWidth"
@@ -47,7 +47,7 @@
         >
           <h2 class="sr-only">
             {{
-              shouldBlur ? `${$t("sensitiveContent.title.image")}` : image.title
+              shouldBlur ? `${t("sensitiveContent.title.image")}` : image.title
             }}
           </h2>
           <VLicense
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n, useRoute, useSearchStore } from "#imports"
+import { useNuxtApp, useRoute, useSearchStore } from "#imports"
 
 import { computed } from "vue"
 
@@ -118,12 +118,15 @@ const props = withDefaults(
   }
 )
 
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
 const isSquare = computed(() => props.aspectRatio === "square")
 const { imgHeight, imgWidth, isPanorama, styles } = useImageCellSize({
   imageSize: { width: props.image.width, height: props.image.height },
   isSquare,
 })
-const i18n = useI18n({ useScope: "global" })
 
 const imageUrl = computed(() => {
   // TODO: check if we have blurry panorama thumbnails
@@ -168,8 +171,8 @@ const getImgDimension = (event: Event) => {
 
 const contextSensitiveTitle = computed(() => {
   return shouldBlur.value
-    ? i18n.t("sensitiveContent.title.image")
-    : i18n.t("browsePage.aria.imageTitle", {
+    ? t("sensitiveContent.title.image")
+    : t("browsePage.aria.imageTitle", {
         title: props.image.title,
       })
 })
diff --git a/frontend/src/components/VImageDetails/VRelatedImages.vue b/frontend/src/components/VImageDetails/VRelatedImages.vue
index 67ce417c1be..d682b6409db 100644
--- a/frontend/src/components/VImageDetails/VRelatedImages.vue
+++ b/frontend/src/components/VImageDetails/VRelatedImages.vue
@@ -1,18 +1,20 @@
 <template>
   <aside v-if="showRelated">
     <h2 class="heading-6 md:heading-5 mb-6">
-      {{ $t("imageDetails.relatedImages") }}
+      {{ t("imageDetails.relatedImages") }}
     </h2>
     <VImageGrid
       kind="related"
       :results="media"
       :related-to="mediaId"
-      :image-grid-label="$t('imageDetails.relatedImages')"
+      :image-grid-label="t('imageDetails.relatedImages')"
     />
   </aside>
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed, toRef, watch } from "vue"
 
 import { useRelatedMediaStore } from "~/stores/media/related-media"
@@ -24,6 +26,11 @@ import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
 const props = defineProps<{
   mediaId: string
 }>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
 const relatedMediaStore = useRelatedMediaStore()
 const mediaId = toRef(props, "mediaId")
 
diff --git a/frontend/src/components/VLanguageSelect/VLanguageSelect.vue b/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
index 5f4a3b6e21d..6fa2f2d8b3a 100644
--- a/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
+++ b/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
@@ -3,8 +3,8 @@
     v-model="locale"
     field-id="language"
     :choices="choices"
-    :blank-text="$t('language.language')"
-    :label-text="$t('language.language')"
+    :blank-text="t('language.language')"
+    :label-text="t('language.language')"
   >
     <template #start>
       <VIcon name="globe" />
@@ -12,10 +12,10 @@
   </VSelectField>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VSelectField, {
@@ -28,30 +28,21 @@ import type { LocaleObject } from "@nuxtjs/i18n"
  * Presents a way for the users to change the app locale and use a translated
  * version of the app.
  */
-export default defineComponent({
-  name: "VLanguageSelect",
-  components: { VSelectField, VIcon },
-  setup() {
-    const i18n = useI18n({ useScope: "global" })
-    const locale = computed({
-      get: () => i18n.locale.value,
-      set: (value) => {
-        i18n.setLocale(value)
-      },
-    })
-    const choices = computed<Choice[]>(() =>
-      (i18n.locales.value as LocaleObject[])
-        .map((locale: LocaleObject) => ({
-          key: locale.code,
-          text: locale.nativeName,
-        }))
-        .sort((a, b) => a.key.localeCompare(b.key))
-    )
 
-    return {
-      locale,
-      choices,
-    }
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
+const locale = computed({
+  get: () => $i18n.locale.value,
+  set: (value) => {
+    $i18n.setLocale(value)
   },
 })
+const choices = computed<Choice[]>(() =>
+  ($i18n.locales.value as LocaleObject[])
+    .map((locale: LocaleObject) => ({
+      key: locale.code,
+      text: locale.nativeName,
+    }))
+    .sort((a, b) => a.key.localeCompare(b.key))
+)
 </script>
diff --git a/frontend/src/components/VMediaInfo/VCopyLicense.vue b/frontend/src/components/VMediaInfo/VCopyLicense.vue
index 1b98ae8400c..0c8e52b03d5 100644
--- a/frontend/src/components/VMediaInfo/VCopyLicense.vue
+++ b/frontend/src/components/VMediaInfo/VCopyLicense.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <h3 id="copy-license-title" class="description-bold md:heading-6 mb-4">
-      {{ $t("mediaDetails.reuse.copyLicense.title") }}
+      {{ t("mediaDetails.reuse.copyLicense.title") }}
     </h3>
 
     <VTabs label="#copy-license-title" :selected-id="tabs[0]">
       <template #tabs>
         <VTab v-for="tab in tabs" :id="tab" :key="tab">
-          {{ $t(`mediaDetails.reuse.copyLicense.${tab}`) }}
+          {{ t(`mediaDetails.reuse.copyLicense.${tab}`) }}
         </VTab>
       </template>
       <VLicenseTabPanel
@@ -43,10 +43,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useI18n, useNuxtApp } from "#imports"
 
-import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref } from "vue"
 
 import { AttributionOptions, getAttribution } from "~/utils/attribution-html"
 import type { Media } from "~/types/media"
@@ -58,52 +58,40 @@ import VLicenseTabPanel from "~/components/VMediaInfo/VLicenseTabPanel.vue"
 
 const tabs = ["rich", "html", "plain"] as const
 
-export default defineComponent({
-  name: "VCopyLicense",
-  components: { VTabs, VTab, VLicenseTabPanel },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const richRef = ref<HTMLElement | null>(null)
+const props = defineProps<{
+  media: Media
+}>()
 
-    const i18n = useI18n({ useScope: "global" })
-    const getAttributionMarkup = (options?: AttributionOptions) =>
-      getAttribution(props.media, i18n, options)
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const { sendCustomEvent } = useAnalytics()
+const richRef = ref<HTMLElement | null>(null)
 
-    const sendAnalyticsEvent = (event: MouseEvent) => {
-      if (!event.currentTarget) {
-        return
-      }
+const i18n = useI18n({ useScope: "global" })
+const getAttributionMarkup = (options?: AttributionOptions) =>
+  getAttribution(props.media, i18n, options)
 
-      const url = (event.currentTarget as HTMLAnchorElement).href
-      sendCustomEvent("EXTERNAL_LINK_CLICK", { url })
-    }
+const { sendCustomEvent } = useAnalytics()
 
-    onMounted(() => {
-      richRef.value?.querySelectorAll("a").forEach((link) => {
-        link.addEventListener("click", sendAnalyticsEvent)
-      })
-    })
+const sendAnalyticsEvent = (event: MouseEvent) => {
+  if (!event.currentTarget) {
+    return
+  }
 
-    onBeforeUnmount(() => {
-      richRef.value?.querySelectorAll("a").forEach((link) => {
-        link.removeEventListener("click", sendAnalyticsEvent)
-      })
-    })
+  const url = (event.currentTarget as HTMLAnchorElement).href
+  sendCustomEvent("EXTERNAL_LINK_CLICK", { url })
+}
 
-    return {
-      richRef,
-
-      tabs,
+onMounted(() => {
+  richRef.value?.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", sendAnalyticsEvent)
+  })
+})
 
-      getAttributionMarkup,
-    }
-  },
+onBeforeUnmount(() => {
+  richRef.value?.querySelectorAll("a").forEach((link) => {
+    link.removeEventListener("click", sendAnalyticsEvent)
+  })
 })
 </script>
diff --git a/frontend/src/components/VMediaInfo/VGetMediaButton.vue b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
index d503e6d6544..add94f3ab43 100644
--- a/frontend/src/components/VMediaInfo/VGetMediaButton.vue
+++ b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
@@ -11,11 +11,11 @@
     :send-external-link-click-event="false"
     @click="sendGetMediaEvent"
   >
-    {{ $t(`${mediaType}Details.weblink`) }}
+    {{ t(`${mediaType}Details.weblink`) }}
   </VButton>
 </template>
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { useAnalytics } from "~/composables/use-analytics"
 import type { SupportedMediaType } from "~/constants/media"
@@ -23,32 +23,22 @@ import type { Media } from "~/types/media"
 
 import VButton from "~/components/VButton.vue"
 
-export default defineComponent({
-  name: "VGetMediaButton",
-  components: { VButton },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
+const props = defineProps<{
+  media: Media
+  mediaType: SupportedMediaType
+}>()
 
-    const sendGetMediaEvent = () => {
-      sendCustomEvent("GET_MEDIA", {
-        id: props.media.id,
-        provider: props.media.provider,
-        mediaType: props.mediaType,
-      })
-    }
-    return {
-      sendGetMediaEvent,
-    }
-  },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const { sendCustomEvent } = useAnalytics()
+
+const sendGetMediaEvent = () => {
+  sendCustomEvent("GET_MEDIA", {
+    id: props.media.id,
+    provider: props.media.provider,
+    mediaType: props.mediaType,
+  })
+}
 </script>
diff --git a/frontend/src/components/VMediaInfo/VImageTitleButton.vue b/frontend/src/components/VMediaInfo/VImageTitleButton.vue
index 748b0ea2484..0ebb718d068 100644
--- a/frontend/src/components/VMediaInfo/VImageTitleButton.vue
+++ b/frontend/src/components/VMediaInfo/VImageTitleButton.vue
@@ -22,7 +22,7 @@
           <VLink
             v-if="image.creator_url"
             :aria-label="
-              $t('mediaDetails.aria.creatorUrl', {
+              t('mediaDetails.aria.creatorUrl', {
                 creator: image.creator,
               })
             "
@@ -38,49 +38,30 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import { ImageDetail } from "~/types/media"
-import { IMAGE } from "~/constants/media"
 import { useAnalytics } from "~/composables/use-analytics"
 
 import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 
-export default defineComponent({
-  name: "VImageTitleButton",
-  components: { VGetMediaButton, VLink },
-  props: {
-    image: {
-      type: Object as PropType<ImageDetail>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
+const props = defineProps<{
+  image: ImageDetail
+}>()
 
-    const sendGetMediaEvent = () => {
-      if (!props.image) {
-        return
-      }
-      sendCustomEvent("GET_MEDIA", {
-        id: props.image.id,
-        provider: props.image.provider,
-        mediaType: IMAGE,
-      })
-    }
-    const sendVisitCreatorLinkEvent = () => {
-      sendCustomEvent("VISIT_CREATOR_LINK", {
-        id: props.image.id,
-        source: props.image.source ?? props.image.provider,
-        url: props.image.creator_url ?? "",
-      })
-    }
-    return {
-      sendGetMediaEvent,
-      sendVisitCreatorLinkEvent,
-    }
-  },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const { sendCustomEvent } = useAnalytics()
+
+const sendVisitCreatorLinkEvent = () => {
+  sendCustomEvent("VISIT_CREATOR_LINK", {
+    id: props.image.id,
+    source: props.image.source ?? props.image.provider,
+    url: props.image.creator_url ?? "",
+  })
+}
 </script>
diff --git a/frontend/src/components/VMediaInfo/VMediaDetails.vue b/frontend/src/components/VMediaInfo/VMediaDetails.vue
index 85c1fd7799a..901928fc589 100644
--- a/frontend/src/components/VMediaInfo/VMediaDetails.vue
+++ b/frontend/src/components/VMediaInfo/VMediaDetails.vue
@@ -2,7 +2,7 @@
   <section class="flex flex-col gap-y-6">
     <header class="flex flex-row items-center justify-between">
       <h2 class="heading-6 md:heading-5">
-        {{ $t(`mediaDetails.${media.frontendMediaType}Info`) }}
+        {{ t(`mediaDetails.${media.frontendMediaType}Info`) }}
       </h2>
       <VContentReportPopover :media="media" />
     </header>
@@ -18,10 +18,10 @@
   </section>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { AudioDetail, ImageDetail, Metadata } from "~/types/media"
 
@@ -31,44 +31,24 @@ import VContentReportPopover from "~/components/VContentReport/VContentReportPop
 import VMetadata from "~/components/VMediaInfo/VMetadata.vue"
 import VMediaTags from "~/components/VMediaInfo/VMediaTags.vue"
 
-export default defineComponent({
-  components: {
-    VMediaTags,
-    VMetadata,
-    VContentReportPopover,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-    imageWidth: {
-      type: Number,
-    },
-    imageHeight: {
-      type: Number,
-    },
-    imageType: {
-      type: String,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
-
-    const metadata = computed<null | Metadata[]>(() => {
-      if (!props.media) {
-        return null
-      }
-      return getMediaMetadata(props.media, i18n, {
-        width: props.imageWidth,
-        height: props.imageHeight,
-        type: props.imageType,
-      })
-    })
-
-    return {
-      metadata,
-    }
-  },
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+  imageWidth?: number
+  imageHeight?: number
+  imageType?: string
+}>()
+
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
+
+const metadata = computed<null | Metadata[]>(() => {
+  if (!props.media) {
+    return null
+  }
+  return getMediaMetadata(props.media, $i18n, {
+    width: props.imageWidth,
+    height: props.imageHeight,
+    type: props.imageType,
+  })
 })
 </script>
diff --git a/frontend/src/components/VMediaInfo/VMediaLicense.vue b/frontend/src/components/VMediaInfo/VMediaLicense.vue
index ada946764f4..0bcab7a0907 100644
--- a/frontend/src/components/VMediaInfo/VMediaLicense.vue
+++ b/frontend/src/components/VMediaInfo/VMediaLicense.vue
@@ -33,11 +33,11 @@
       >
         <template #link>
           <VLink
-            :aria-label="$t('mediaDetails.aria.attribution.tool')"
+            :aria-label="t('mediaDetails.aria.attribution.tool')"
             :href="licenseUrl"
             :send-external-link-click-event="false"
             @click="sendVisitLicensePage"
-            >{{ $t("mediaDetails.reuse.tool.link") }}</VLink
+            >{{ t("mediaDetails.reuse.tool.link") }}</VLink
           >
         </template>
       </i18n-t>
@@ -45,10 +45,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import { getFullLicenseName, isLicense as isLicenseFn } from "~/utils/license"
 import { useAnalytics } from "~/composables/use-analytics"
@@ -58,49 +58,29 @@ import type { License, LicenseVersion } from "~/constants/license"
 import VLicenseElements from "~/components/VLicense/VLicenseElements.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VMediaLicense",
-  components: { VLicenseElements, VLink },
-  props: {
-    license: {
-      type: String as PropType<License>,
-      required: true,
-    },
-    licenseVersion: {
-      type: String as PropType<LicenseVersion>,
-      required: true,
-    },
-    licenseUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n({ useScope: "global" })
-    const { sendCustomEvent } = useAnalytics()
+const props = defineProps<{
+  license: License
+  licenseVersion: LicenseVersion
+  licenseUrl: string
+}>()
 
-    const isLicense = computed(() => isLicenseFn(props.license))
-    const headerText = computed(() => {
-      const licenseOrTool = isLicense.value ? "license" : "tool"
-      return i18n.t(`mediaDetails.reuse.${licenseOrTool}Header`)
-    })
-    const fullLicenseName = computed(() =>
-      getFullLicenseName(props.license, props.licenseVersion, i18n)
-    )
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
 
-    const sendVisitLicensePage = () => {
-      sendCustomEvent("VISIT_LICENSE_PAGE", {
-        license: props.license,
-      })
-    }
+const { sendCustomEvent } = useAnalytics()
 
-    return {
-      isLicense,
-      headerText,
-      fullLicenseName,
-
-      sendVisitLicensePage,
-    }
-  },
+const isLicense = computed(() => isLicenseFn(props.license))
+const headerText = computed(() => {
+  const licenseOrTool = isLicense.value ? "license" : "tool"
+  return t(`mediaDetails.reuse.${licenseOrTool}Header`)
 })
+const fullLicenseName = computed(() =>
+  getFullLicenseName(props.license, props.licenseVersion, $i18n)
+)
+
+const sendVisitLicensePage = () => {
+  sendCustomEvent("VISIT_LICENSE_PAGE", {
+    license: props.license,
+  })
+}
 </script>
diff --git a/frontend/src/components/VMediaInfo/VMediaReuse.vue b/frontend/src/components/VMediaInfo/VMediaReuse.vue
index dabacc17698..c38b9cc81b5 100644
--- a/frontend/src/components/VMediaInfo/VMediaReuse.vue
+++ b/frontend/src/components/VMediaInfo/VMediaReuse.vue
@@ -1,11 +1,11 @@
 <template>
-  <section :aria-label="$t('mediaDetails.reuse.title')" class="media-reuse">
+  <section :aria-label="t('mediaDetails.reuse.title')" class="media-reuse">
     <h2 class="heading-6 md:heading-5 mb-4">
-      {{ $t("mediaDetails.reuse.title") }}
+      {{ t("mediaDetails.reuse.title") }}
     </h2>
     <p class="description-regular">
       {{
-        $t("mediaDetails.reuse.description", {
+        t("mediaDetails.reuse.description", {
           media: media.frontendMediaType,
         })
       }}
@@ -21,22 +21,18 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import type { Media } from "~/types/media"
 
 import VCopyLicense from "~/components/VMediaInfo/VCopyLicense.vue"
 import VMediaLicense from "~/components/VMediaInfo/VMediaLicense.vue"
 
-export default defineComponent({
-  name: "VMediaReuse",
-  components: { VCopyLicense, VMediaLicense },
-  props: {
-    media: {
-      type: Object as PropType<Media>,
-      required: true,
-    },
-  },
-})
+defineProps<{
+  media: Media
+}>()
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index 6473e1b3c4c..3cd6345dff9 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -1,7 +1,7 @@
 <template>
   <dl v-if="isSm" class="metadata grid gap-8" :style="columnCount">
     <div v-for="datum in metadata" :key="`${datum.label}`">
-      <dt class="label-regular mb-1 ps-1">{{ $t(datum.label) }}</dt>
+      <dt class="label-regular mb-1 ps-1">{{ t(datum.label) }}</dt>
       <VMetadataValue
         :datum="datum"
         @click="sendVisitSourceLinkEvent(datum.source)"
@@ -11,7 +11,7 @@
   <dl v-else class="grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
     <template v-for="datum in metadata" :key="datum.label">
       <dt class="label-regular pt-1">
-        {{ $t(datum.label) }}
+        {{ t(datum.label) }}
       </dt>
       <VMetadataValue
         :datum="datum"
@@ -20,10 +20,10 @@
     </template>
   </dl>
 </template>
-<script lang="ts">
-import { firstParam, useRoute } from "#imports"
+<script setup lang="ts">
+import { firstParam, useNuxtApp, useRoute } from "#imports"
 
-import { computed, defineComponent, PropType } from "vue"
+import { computed } from "vue"
 
 import type { Metadata } from "~/types/media"
 import { useAnalytics } from "~/composables/use-analytics"
@@ -31,44 +31,34 @@ import { useUiStore } from "~/stores/ui"
 
 import VMetadataValue from "~/components/VMediaInfo/VMetadataValue.vue"
 
-export default defineComponent({
-  name: "VMetadata",
-  components: { VMetadataValue },
-  props: {
-    metadata: {
-      type: Array as PropType<Metadata[]>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const route = useRoute()
-    const uiStore = useUiStore()
+const props = defineProps<{
+  metadata: Metadata[]
+}>()
 
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const columnCount = computed(() => ({
-      "--column-count": props.metadata.length,
-    }))
+const route = useRoute()
+const uiStore = useUiStore()
 
-    const { sendCustomEvent } = useAnalytics()
-    const sendVisitSourceLinkEvent = (source?: string) => {
-      const mediaId = firstParam(route.params.id)
-      if (!source || !mediaId) {
-        return
-      }
-      sendCustomEvent("VISIT_SOURCE_LINK", {
-        id: mediaId,
-        source,
-      })
-    }
+const isSm = computed(() => uiStore.isBreakpoint("sm"))
 
-    return {
-      sendVisitSourceLinkEvent,
-      isSm,
-      columnCount,
-    }
-  },
-})
+const columnCount = computed(() => ({
+  "--column-count": props.metadata.length,
+}))
+
+const { sendCustomEvent } = useAnalytics()
+const sendVisitSourceLinkEvent = (source?: string) => {
+  const mediaId = firstParam(route.params.id)
+  if (!source || !mediaId) {
+    return
+  }
+  sendCustomEvent("VISIT_SOURCE_LINK", {
+    id: mediaId,
+    source,
+  })
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
index 167ba1b7f89..3f5a750e8f8 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -53,7 +53,7 @@
               >
                 <VIconButton
                   ref="closeButton"
-                  :label="$t('modal.ariaClose')"
+                  :label="t('modal.ariaClose')"
                   variant="filled-white"
                   size="small"
                   @click="hide()"
@@ -88,110 +88,95 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, toRefs, ref, computed, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { toRefs, ref, computed, useAttrs } from "vue"
 
 import { useDialogContent } from "~/composables/use-dialog-content"
 
 import type { ModalColorMode, ModalVariant } from "~/types/modal"
 
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
 /**
  * Renders the inner content of a modal and manages focus.
  */
-export default defineComponent({
-  name: "VModalContent",
-  components: { VIconButton },
+defineOptions({
   inheritAttrs: false,
-  props: {
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    hide: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
-    hideOnEsc: {
-      type: Boolean,
-      default: true,
-    },
-    hideOnClickOutside: {
-      type: Boolean,
-      default: false,
-    },
-    autoFocusOnShow: {
-      type: Boolean,
-      default: true,
-    },
-    autoFocusOnHide: {
-      type: Boolean,
-      default: true,
-    },
-    trapFocus: {
-      type: Boolean,
-      default: true,
-    },
-    triggerElement: {
-      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
-      default: null,
-    },
-    initialFocusElement: {
-      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
-      default: null,
-    },
-    variant: {
-      type: String as PropType<ModalVariant>,
-      default: "default",
-    },
-    mode: {
-      type: String as PropType<ModalColorMode>,
-      default: "light",
-    },
+})
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    hide: () => void
+    hideOnEsc?: boolean
+    hideOnClickOutside?: boolean
+    autoFocusOnShow?: boolean
+    autoFocusOnHide?: boolean
+    trapFocus?: boolean
+    triggerElement?: HTMLElement | null
+    initialFocusElement?: HTMLElement | null
+    variant?: ModalVariant
+    mode?: ModalColorMode
     /**
      * The tailwind classes to apply to the modal backdrop element.
      * Can be used to make the modal hidden on some breakpoint.
      */
-    contentClasses: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props, { emit, attrs }) {
-    const propsRefs = toRefs(props)
-    const closeButton = ref<{ $el: HTMLElement } | null>(null)
-    const initialFocusElement = computed(
-      () => props.initialFocusElement || closeButton.value?.$el
-    )
-    const dialogRef = ref<HTMLElement | null>(null)
-    const { onKeyDown, onBlur, deactivateFocusTrap } = useDialogContent({
-      dialogElements: {
-        dialogRef,
-        initialFocusElementRef: initialFocusElement,
-        triggerElementRef: propsRefs.triggerElement,
-      },
-      visibleRef: propsRefs.visible,
-      dialogOptions: {
-        hideOnEscRef: propsRefs.hideOnEsc,
-        hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
-        autoFocusOnShowRef: propsRefs.autoFocusOnShow,
-        autoFocusOnHideRef: propsRefs.autoFocusOnHide,
-        trapFocusRef: propsRefs.trapFocus,
-      },
-      hideRef: propsRefs.hide,
-      emit,
-      attrs,
-    })
+    contentClasses?: string
+  }>(),
+  {
+    hideOnEsc: true,
+    hideOnClickOutside: false,
+    autoFocusOnShow: true,
+    autoFocusOnHide: true,
+    trapFocus: true,
+    triggerElement: null,
+    initialFocusElement: null,
+    variant: "default",
+    mode: "light",
+    contentClasses: "",
+  }
+)
+const emit = defineEmits<{
+  keydown: [KeyboardEvent]
+  focus: [FocusEvent]
+  blur: [FocusEvent]
+  close: []
+  open: []
+}>()
+const attrs = useAttrs()
 
-    return {
-      dialogRef,
-      onKeyDown,
-      onBlur,
-      closeButton,
-      deactivateFocusTrap,
-    }
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const propsRefs = toRefs(props)
+const closeButton = ref<InstanceType<typeof VIconButton> | null>(null)
+const initialFocusElement = computed(
+  () => props.initialFocusElement || closeButton.value?.$el
+)
+const dialogRef = ref<HTMLElement | null>(null)
+const { onKeyDown, onBlur, deactivateFocusTrap } = useDialogContent({
+  dialogElements: {
+    dialogRef,
+    initialFocusElementRef: initialFocusElement,
+    triggerElementRef: propsRefs.triggerElement,
+  },
+  visibleRef: propsRefs.visible,
+  dialogOptions: {
+    hideOnEscRef: propsRefs.hideOnEsc,
+    hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
+    autoFocusOnShowRef: propsRefs.autoFocusOnShow,
+    autoFocusOnHideRef: propsRefs.autoFocusOnHide,
+    trapFocusRef: propsRefs.trapFocus,
   },
+  hideRef: propsRefs.hide,
+  emit: emit as (event: string) => void,
+  attrs,
+})
+
+defineExpose({
+  dialogRef,
+  deactivateFocusTrap,
 })
 </script>
 
diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 24b6a9a95bf..e6434bd2a7c 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -10,17 +10,17 @@
     >
       <!-- Left margin to align with the text of recent searches. -->
       <span class="category mx-2 my-1">
-        {{ $t("recentSearches.heading") }}
+        {{ t("recentSearches.heading") }}
       </span>
       <VButton
         v-show="entries.length"
         variant="transparent-gray"
         class="label-bold"
         size="small"
-        :aria-label="$t('recentSearches.clear.label')"
+        :aria-label="t('recentSearches.clear.label')"
         @click="handleClear"
       >
-        {{ $t("recentSearches.clear.text") }}
+        {{ t("recentSearches.clear.text") }}
       </VButton>
     </div>
 
@@ -28,7 +28,7 @@
       v-if="entries.length"
       id="recent-searches-list"
       role="listbox"
-      :aria-label="$t('recentSearches.heading')"
+      :aria-label="t('recentSearches.heading')"
     >
       <!-- eslint-disable vuejs-accessibility/interactive-supports-focus Combobox descendants only have visual focus. -->
       <!-- eslint-disable vuejs-accessibility/click-events-have-key-events Key events handled by input field of combobox. -->
@@ -47,19 +47,17 @@
       <!-- eslint-enable -->
     </ul>
     <span v-else class="description-regular mx-2 my-3">
-      {{ $t("recentSearches.none") }}
+      {{ t("recentSearches.none") }}
     </span>
 
     <span class="caption-regular mx-2 my-3 text-dark-charcoal-70">
-      {{ $t("recentSearches.disclaimer") }}
+      {{ t("recentSearches.disclaimer") }}
     </span>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import { defineEvent } from "~/types/emits"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
 import VButton from "~/components/VButton.vue"
 
@@ -67,47 +65,38 @@ import VButton from "~/components/VButton.vue"
  * 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: { VButton },
-  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(),
-  },
-  setup(_, { emit }) {
-    const handleClick = (idx: number) => {
-      emit("select", idx)
-    }
-    const handleClear = () => {
-      emit("clear")
-    }
+    bordered?: boolean
+  }>(),
+  {
+    entries: () => [] as string[],
+    bordered: true,
+  }
+)
+const emit = defineEmits<{
+  select: [number]
+  clear: []
+}>()
 
-    return {
-      handleClick,
-      handleClear,
-    }
-  },
-})
+const {
+  $i18n: { t },
+} = useNuxtApp()
+const handleClick = (idx: number) => {
+  emit("select", idx)
+}
+const handleClear = () => {
+  emit("clear")
+}
 </script>
diff --git a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
index 6f05e668555..88ae8d2a376 100644
--- a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
+++ b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
@@ -2,7 +2,7 @@
   <section id="safe-browsing" aria-labelledby="safe-browsing-heading">
     <header class="relative mb-6 flex items-center justify-between">
       <h4 id="safe-browsing-heading" class="caption-bold uppercase">
-        {{ $t("filters.safeBrowsing.title") }}
+        {{ t("filters.safeBrowsing.title") }}
       </h4>
     </header>
     <i18n-t
@@ -13,7 +13,7 @@
     >
       <template #sensitive>
         <VLink :href="sensitivityPath">{{
-          $t("filters.safeBrowsing.sensitive")
+          t("filters.safeBrowsing.sensitive")
         }}</VLink>
       </template>
     </i18n-t>
@@ -30,14 +30,14 @@
             @change="toggle.switchFn"
           >
             <span class="label-bold">{{
-              $t(`filters.safeBrowsing.toggles.${toggle.name}.title`)
+              t(`filters.safeBrowsing.toggles.${toggle.name}.title`)
             }}</span>
           </VCheckbox>
           <p
             class="label-regular mt-2"
             :class="{ 'text-dark-charcoal-40': isDisabled(toggle.name) }"
           >
-            {{ $t(`filters.safeBrowsing.toggles.${toggle.name}.desc`) }}
+            {{ t(`filters.safeBrowsing.toggles.${toggle.name}.desc`) }}
           </p>
         </div>
       </fieldset>
@@ -45,10 +45,10 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
-import { computed, defineComponent } from "vue"
+import { computed } from "vue"
 
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useUiStore } from "~/stores/ui"
@@ -63,60 +63,49 @@ import VLink from "~/components/VLink.vue"
  * that may contain sensitive content and subsequently blurring them to prevent
  * accidental exposure or showing them directly.
  */
-export default defineComponent({
-  name: "VSafeBrowsing",
-  components: { VCheckbox, VLink },
-  setup() {
-    const localePath = useNuxtApp().$localePath
+const {
+  $i18n: { t },
+  $localePath,
+} = useNuxtApp()
 
-    const sensitivityPath = computed(() => localePath("/sensitive-content"))
+const sensitivityPath = computed(() => $localePath("/sensitive-content"))
 
-    const featureFlagStore = useFeatureFlagStore()
-    const { sendCustomEvent } = useAnalytics()
+const featureFlagStore = useFeatureFlagStore()
+const { sendCustomEvent } = useAnalytics()
 
-    let fetchSensitive = computed(() =>
-      featureFlagStore.isOn("fetch_sensitive")
-    )
-    let setFetchSensitive = ({ checked }: { checked: boolean }) => {
-      featureFlagStore.toggleFeature("fetch_sensitive", checked ? ON : OFF)
-      sendCustomEvent("TOGGLE_FETCH_SENSITIVE", { checked })
+let fetchSensitive = computed(() => featureFlagStore.isOn("fetch_sensitive"))
+let setFetchSensitive = ({ checked }: { checked: boolean }) => {
+  featureFlagStore.toggleFeature("fetch_sensitive", checked ? ON : OFF)
+  sendCustomEvent("TOGGLE_FETCH_SENSITIVE", { checked })
 
-      if (!checked) {
-        // If sensitive content is not fetched, there is nothing to blur/unblur.
-        // In this case, we reset blurring to its default value.
-        setBlurSensitive({ checked: true })
-      }
-    }
+  if (!checked) {
+    // If sensitive content is not fetched, there is nothing to blur/unblur.
+    // In this case, we reset blurring to its default value.
+    setBlurSensitive({ checked: true })
+  }
+}
 
-    const uiStore = useUiStore()
-    let blurSensitive = computed(() => uiStore.shouldBlurSensitive)
-    let setBlurSensitive = ({ checked }: { checked: boolean }) => {
-      uiStore.setShouldBlurSensitive(checked)
-      sendCustomEvent("TOGGLE_BLUR_SENSITIVE", { checked })
-    }
+const uiStore = useUiStore()
+let blurSensitive = computed(() => uiStore.shouldBlurSensitive)
+let setBlurSensitive = ({ checked }: { checked: boolean }) => {
+  uiStore.setShouldBlurSensitive(checked)
+  sendCustomEvent("TOGGLE_BLUR_SENSITIVE", { checked })
+}
 
-    const toggles = [
-      {
-        name: "fetchSensitive",
-        state: fetchSensitive,
-        switchFn: setFetchSensitive,
-      },
-      {
-        name: "blurSensitive",
-        state: blurSensitive,
-        switchFn: setBlurSensitive,
-      },
-    ]
-
-    const isDisabled = (name: string) =>
-      name === "blurSensitive" && !fetchSensitive.value
-
-    return {
-      sensitivityPath,
-
-      toggles,
-      isDisabled,
-    }
+const toggles = [
+  {
+    name: "fetchSensitive",
+    state: fetchSensitive,
+    switchFn: setFetchSensitive,
   },
-})
+  {
+    name: "blurSensitive",
+    state: blurSensitive,
+    switchFn: setBlurSensitive,
+  },
+]
+
+const isDisabled = (name: string) => {
+  return name === "blurSensitive" && !fetchSensitive.value
+}
 </script>
diff --git a/frontend/src/components/VSafetyWall/VSafetyWall.vue b/frontend/src/components/VSafetyWall/VSafetyWall.vue
index 2048079dbb6..c69f2e9b73b 100644
--- a/frontend/src/components/VSafetyWall/VSafetyWall.vue
+++ b/frontend/src/components/VSafetyWall/VSafetyWall.vue
@@ -5,14 +5,14 @@
   >
     <section class="mx-auto max-w-2xl px-8 text-sm leading-relaxed">
       <h1 class="heading-5 mb-2">
-        {{ $t("sensitiveContent.singleResult.title") }}
+        {{ t("sensitiveContent.singleResult.title") }}
       </h1>
       <p class="mb-2">
-        {{ $t("sensitiveContent.singleResult.explanation") }}
+        {{ t("sensitiveContent.singleResult.explanation") }}
       </p>
       <p v-for="reason in media.sensitivity" :key="reason">
         {{
-          $t(`sensitiveContent.reasons.${camelCase(reason)}`, {
+          t(`sensitiveContent.reasons.${camelCase(reason)}`, {
             openverse: "Openverse",
           })
         }}
@@ -26,7 +26,7 @@
         <template #openverse>Openverse</template>
         <template #link>
           <VLink class="text-pink hover:underline" href="/sensitive-content">{{
-            $t("sensitiveContent.singleResult.link")
+            t("sensitiveContent.singleResult.link")
           }}</VLink>
           {{ " " }}
         </template>
@@ -43,7 +43,7 @@
           :href="backToSearchPath || '/'"
           @mousedown="handleBack"
         >
-          {{ $t("singleResult.back") }}
+          {{ t("singleResult.back") }}
         </VButton>
         <VButton
           size="large"
@@ -52,7 +52,7 @@
           has-icon-end
           @click="handleShow"
         >
-          {{ $t("sensitiveContent.singleResult.show") }}
+          {{ t("sensitiveContent.singleResult.show") }}
           <VIcon name="eye-open" />
         </VButton>
       </div>
@@ -60,59 +60,42 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 
 import { useSearchStore } from "~/stores/search"
 import { useAnalytics } from "~/composables/use-analytics"
 import { camelCase } from "~/utils/case"
 import type { AudioDetail, ImageDetail } from "~/types/media"
 
-import { defineEvent } from "~/types/emits"
-
 import VLink from "~/components/VLink.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
-export default defineComponent({
-  name: "VSafetyWall",
-  components: {
-    VButton,
-    VIcon,
-    VLink,
-  },
-  props: {
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-  emits: {
-    reveal: defineEvent(),
-  },
-  setup(props, { emit }) {
-    const searchStore = useSearchStore()
-    const backToSearchPath = computed(() => searchStore.backToSearchPath)
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+}>()
+const emit = defineEmits(["reveal"])
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 
-    const { sendCustomEvent } = useAnalytics()
-    const handleBack = () => {
-      sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
-        id: props.media.id,
-        sensitivities: props.media.sensitivity.join(","),
-      })
-    }
-    const handleShow = () => {
-      emit("reveal")
-    }
+const searchStore = useSearchStore()
+const backToSearchPath = computed(() => searchStore.backToSearchPath)
 
-    return {
-      backToSearchPath,
-      handleBack,
-      handleShow,
-      camelCase,
-    }
-  },
-})
+const { sendCustomEvent } = useAnalytics()
+const handleBack = () => {
+  sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
+    id: props.media.id,
+    sensitivities: props.media.sensitivity.join(","),
+  })
+}
+const handleShow = () => {
+  emit("reveal")
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/VScrollButton.vue b/frontend/src/components/VScrollButton.vue
index 9d1af41f870..e4aabb6cada 100644
--- a/frontend/src/components/VScrollButton.vue
+++ b/frontend/src/components/VScrollButton.vue
@@ -1,11 +1,11 @@
 <template>
   <button
-    :aria-label="$t('browsePage.aria.scroll')"
+    :aria-label="t('browsePage.aria.scroll')"
     type="button"
     class="scroll fixed bottom-4 mb-4 ms-auto h-14 w-14 rounded-full bg-pink text-center text-white transition-all duration-100 ease-linear hover:bg-dark-pink hover:shadow-md"
     :class="hClass"
     @click="scrollToTop"
-    @keydown.tab.exact="$emit('tab', $event)"
+    @keydown.tab.exact="emit('tab', $event)"
   >
     <svg
       viewBox="0 0 24 24"
@@ -19,37 +19,36 @@
   </button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
 
-import { defineEvent } from "~/types/emits"
+import { computed } from "vue"
 
 const positionWithoutSidebar = "ltr:right-4 rtl:left-4"
 const positionWithSidebar = "ltr:right-[22rem] rtl:left-[22rem]"
 
-export default defineComponent({
-  name: "VScrollButton",
-  props: {
-    isFilterSidebarVisible: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    tab: defineEvent<[KeyboardEvent]>(),
-  },
-  setup(props) {
-    const hClass = computed(() =>
-      props.isFilterSidebarVisible
-        ? positionWithSidebar
-        : positionWithoutSidebar
-    )
-    const scrollToTop = (e: MouseEvent) => {
-      const element =
-        (e.currentTarget as HTMLElement)?.closest("#main-page") || window
-      element.scrollTo({ top: 0, left: 0, behavior: "smooth" })
-    }
-    return { hClass, scrollToTop }
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    isFilterSidebarVisible: boolean
+  }>(),
+  {
+    isFilterSidebarVisible: true,
+  }
+)
+const emit = defineEmits<{
+  tab: [KeyboardEvent]
+}>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const hClass = computed(() =>
+  props.isFilterSidebarVisible ? positionWithSidebar : positionWithoutSidebar
+)
+const scrollToTop = (e: MouseEvent) => {
+  const element =
+    (e.currentTarget as HTMLElement)?.closest("#main-page") || window
+  element.scrollTo({ top: 0, left: 0, behavior: "smooth" })
+}
 </script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index 0f5c6ca0860..60940b791ef 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -13,7 +13,7 @@
     <VSnackbar size="large" :is-visible="isSnackbarVisible">
       <i18n-t scope="global" keypath="allResults.snackbar.text" tag="p">
         <template #spacebar>
-          <kbd class="font-sans">{{ $t(`allResults.snackbar.spacebar`) }}</kbd>
+          <kbd class="font-sans">{{ t(`allResults.snackbar.spacebar`) }}</kbd>
         </template>
       </i18n-t>
     </VSnackbar>
@@ -24,7 +24,7 @@
           ? 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
           : 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'
       "
-      :aria-label="$t('browsePage.aria.results', { query: searchTerm })"
+      :aria-label="t('browsePage.aria.results', { query: searchTerm })"
     >
       <template v-for="item in results">
         <VImageCell
@@ -48,8 +48,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
+import { computed } from "vue"
 import { storeToRefs } from "pinia"
 
 import { useMediaStore } from "~/stores/media"
@@ -65,52 +67,27 @@ import VImageCell from "~/components/VImageCell/VImageCell.vue"
 import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
 import VContentLink from "~/components/VContentLink/VContentLink.vue"
 
-export default defineComponent({
-  name: "VAllResultsGrid",
-  components: {
-    VSnackbar,
-    VImageCell,
-    VAudioResult,
-    VContentLink,
-  },
-  props: {
-    results: {
-      type: Array as PropType<(AudioDetail | ImageDetail)[]>,
-      required: true,
-    },
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-
-    const contentLinkPath = (mediaType: SupportedMediaType) =>
-      searchStore.getSearchPath({ type: mediaType })
-
-    const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
-
-    const uiStore = useUiStore()
-    const {
-      areInstructionsVisible: isSnackbarVisible,
-      isFilterVisible: isSidebarVisible,
-    } = storeToRefs(uiStore)
+defineProps<{
+  results: (AudioDetail | ImageDetail)[]
+  searchTerm: string
+}>()
 
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+const {
+  $i18n: { t },
+} = useNuxtApp()
+const mediaStore = useMediaStore()
+const searchStore = useSearchStore()
 
-    return {
-      resultCounts,
+const contentLinkPath = (mediaType: SupportedMediaType) =>
+  searchStore.getSearchPath({ type: mediaType })
 
-      contentLinkPath,
+const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
 
-      isSidebarVisible,
-      isSnackbarVisible,
-      isSm,
+const uiStore = useUiStore()
+const {
+  areInstructionsVisible: isSnackbarVisible,
+  isFilterVisible: isSidebarVisible,
+} = storeToRefs(uiStore)
 
-      isDetail,
-    }
-  },
-})
+const isSm = computed(() => uiStore.isBreakpoint("sm"))
 </script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
index f8b4e5e6f1d..9d37bb94b5a 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
@@ -8,7 +8,7 @@
           #[keyboardKey]
         >
           <kbd class="font-sans">{{
-            $t(`audioResults.snackbar.${keyboardKey}`)
+            t(`audioResults.snackbar.${keyboardKey}`)
           }}</kbd>
         </template>
       </i18n-t>
@@ -22,6 +22,8 @@
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import type { AudioDetail } from "~/types/media"
 import type { ResultKind } from "~/types/result"
 import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
@@ -38,5 +40,10 @@ defineProps<{
   kind: ResultKind
   collectionLabel: string
 }>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
 const { isVisible: isSnackbarVisible } = useAudioSnackbar()
 </script>
diff --git a/frontend/src/components/VSkipToContentButton.vue b/frontend/src/components/VSkipToContentButton.vue
index 63d01935c13..4a365ab6437 100644
--- a/frontend/src/components/VSkipToContentButton.vue
+++ b/frontend/src/components/VSkipToContentButton.vue
@@ -5,23 +5,19 @@
     variant="filled-pink"
     size="medium"
     class="skip-button z-50 focus:fixed focus:absolute focus:ms-2 focus:mt-2"
-    >{{ $t("skipToContent") }}
+    >{{ t("skipToContent") }}
   </VButton>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { skipToContentTargetId } from "~/constants/window"
 
 import VButton from "~/components/VButton.vue"
 
-export default {
-  name: "VSkipToContentButton",
-  components: { VButton },
-  setup() {
-    return {
-      skipToContentTargetId,
-    }
-  },
-}
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
 <style scoped>
 .skip-button:not(:focus) {
diff --git a/frontend/src/components/VSourcesTable.vue b/frontend/src/components/VSourcesTable.vue
index a765efe8d95..ba4f0895a4d 100644
--- a/frontend/src/components/VSourcesTable.vue
+++ b/frontend/src/components/VSourcesTable.vue
@@ -1,6 +1,6 @@
 <template>
   <table
-    :aria-label="$t('sources.aria.table')"
+    :aria-label="t('sources.aria.table')"
     role="region"
     class="not-prose table w-full table-fixed text-base"
   >
@@ -12,7 +12,7 @@
           @keypress.enter="sortTable('display_name')"
         >
           <span class="flex w-full flex-row items-center justify-between">
-            {{ $t("sources.providers.source") }}
+            {{ t("sources.providers.source") }}
             <TableSortIcon :active="sorting.field === 'display_name'" />
           </span>
         </th>
@@ -22,7 +22,7 @@
           @keypress.enter="sortTable('source_url')"
         >
           <span class="flex w-full flex-row items-center justify-between">
-            {{ $t("sources.providers.domain") }}
+            {{ t("sources.providers.domain") }}
             <TableSortIcon :active="sorting.field === 'source_url'" />
           </span>
         </th>
@@ -32,7 +32,7 @@
           @keypress.enter="sortTable('media_count')"
         >
           <span class="flex w-full flex-row items-center justify-between">
-            {{ $t("sources.providers.item") }}
+            {{ t("sources.providers.item") }}
             <TableSortIcon :active="sorting.field === 'media_count'" />
           </span>
         </th>
@@ -59,10 +59,10 @@
   </table>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, useFeatureFlagStore, useNuxtApp } from "#imports"
 
-import { defineComponent, PropType, reactive, ref } from "vue"
+import { reactive, ref } from "vue"
 
 import { useProviderStore } from "~/stores/provider"
 import { useGetLocaleFormattedNumber } from "~/composables/use-get-locale-formatted-number"
@@ -73,96 +73,79 @@ import type { MediaProvider } from "~/types/media-provider"
 import TableSortIcon from "~/components/TableSortIcon.vue"
 import VLink from "~/components/VLink.vue"
 
-export default defineComponent({
-  name: "VSourcesTable",
-  components: {
-    TableSortIcon,
-    VLink,
-  },
-  props: {
-    media: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() => {
-      return featureFlagStore.isOn("additional_search_views")
-    })
-    const sorting = reactive({
-      direction: "asc",
-      field: "display_name" as keyof Omit<MediaProvider, "logo_url">,
-    })
-
-    const providerStore = useProviderStore()
-    const sortedProviders = ref<MediaProvider[]>(
-      providerStore.providers[props.media].sort(compareProviders)
-    )
-
-    function sortTable(field: keyof Omit<MediaProvider, "logo_url">) {
-      let direction = "asc"
-      if (field === sorting.field) {
-        direction = sorting.direction === "asc" ? "desc" : "asc"
-      }
-
-      sorting.direction = direction
-      sorting.field = field
-
-      sortedProviders.value =
-        sorting.direction === "asc"
-          ? sortedProviders.value.sort(compareProviders)
-          : sortedProviders.value.sort(compareProviders).reverse()
-    }
-
-    function cleanSourceUrlForPresentation(url: string) {
-      const stripProtocol = (s: string) => s.replace(/https?:\/\//, "")
-      const stripLeadingWww = (s: string) =>
-        s.startsWith("www.") ? s.replace("www.", "") : s
-      const removeAfterSlash = (s: string) => s.split("/")[0]
-
-      return removeAfterSlash(stripLeadingWww(stripProtocol(url)))
-    }
-
-    const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
-
-    function compareProviders(prov1: MediaProvider, prov2: MediaProvider) {
-      let field1 = prov1[sorting.field]
-      let field2 = prov2[sorting.field]
-      if (sorting.field === "display_name") {
-        field1 = prov1[sorting.field].toLowerCase()
-        field2 = prov2[sorting.field].toLowerCase()
-      }
-
-      if (sorting.field === "source_url") {
-        field1 = cleanSourceUrlForPresentation(field1 as string)
-        field2 = cleanSourceUrlForPresentation(field2 as string)
-      }
-      if (field1 > field2) {
-        return 1
-      }
-      if (field1 < field2) {
-        return -1
-      }
-      return 0
-    }
-
-    const { $localePath } = useNuxtApp()
-    const providerViewUrl = (provider: MediaProvider) => {
-      return $localePath(`/${props.media}/source/${provider.source_name}`)
-    }
-
-    return {
-      getLocaleFormattedNumber,
-      sortedProviders,
-      sorting,
-      sortTable,
-      cleanSourceUrlForPresentation,
-      providerViewUrl,
-      additionalSearchViews,
-    }
-  },
+const props = defineProps<{
+  media: SupportedMediaType
+}>()
+
+const {
+  $i18n: { t },
+  $localePath,
+} = useNuxtApp()
+
+const featureFlagStore = useFeatureFlagStore()
+const additionalSearchViews = computed(() => {
+  return featureFlagStore.isOn("additional_search_views")
+})
+const sorting = reactive({
+  direction: "asc",
+  field: "display_name" as keyof Omit<MediaProvider, "logo_url">,
 })
+
+const providerStore = useProviderStore()
+const sortedProviders = ref<MediaProvider[]>(
+  providerStore.providers[props.media].sort(compareProviders)
+)
+
+function sortTable(field: keyof Omit<MediaProvider, "logo_url">) {
+  let direction = "asc"
+  if (field === sorting.field) {
+    direction = sorting.direction === "asc" ? "desc" : "asc"
+  }
+
+  sorting.direction = direction
+  sorting.field = field
+
+  sortedProviders.value =
+    sorting.direction === "asc"
+      ? sortedProviders.value.sort(compareProviders)
+      : sortedProviders.value.sort(compareProviders).reverse()
+}
+
+function cleanSourceUrlForPresentation(url: string) {
+  const stripProtocol = (s: string) => s.replace(/https?:\/\//, "")
+  const stripLeadingWww = (s: string) =>
+    s.startsWith("www.") ? s.replace("www.", "") : s
+  const removeAfterSlash = (s: string) => s.split("/")[0]
+
+  return removeAfterSlash(stripLeadingWww(stripProtocol(url)))
+}
+
+const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
+
+function compareProviders(prov1: MediaProvider, prov2: MediaProvider) {
+  let field1 = prov1[sorting.field]
+  let field2 = prov2[sorting.field]
+  if (sorting.field === "display_name") {
+    field1 = prov1[sorting.field].toLowerCase()
+    field2 = prov2[sorting.field].toLowerCase()
+  }
+
+  if (sorting.field === "source_url") {
+    field1 = cleanSourceUrlForPresentation(field1 as string)
+    field2 = cleanSourceUrlForPresentation(field2 as string)
+  }
+  if (field1 > field2) {
+    return 1
+  }
+  if (field1 < field2) {
+    return -1
+  }
+  return 0
+}
+
+const providerViewUrl = (provider: MediaProvider) => {
+  return $localePath(`/${props.media}/source/${provider.source_name}`)
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/about.vue b/frontend/src/pages/about.vue
index c3072d8f474..dbd6b091ff5 100644
--- a/frontend/src/pages/about.vue
+++ b/frontend/src/pages/about.vue
@@ -1,10 +1,10 @@
 <template>
   <VContentPage>
     <h1>
-      {{ $t("about.title", { openverse: "Openverse" }) }}
+      {{ t("about.title", { openverse: "Openverse" }) }}
     </h1>
     <p>
-      {{ $t("about.description.content", { openverse: "Openverse" }) }}
+      {{ t("about.description.content", { openverse: "Openverse" }) }}
     </p>
 
     <i18n-t scope="global" keypath="about.collection.content" tag="p">
@@ -18,27 +18,27 @@
       <template #openverse>Openverse</template>
       <template #frontend>
         <VLink href="https://github.com/wordpress/openverse-frontend/">{{
-          $t("about.planning.frontend", { openverse: "Openverse" })
+          t("about.planning.frontend", { openverse: "Openverse" })
         }}</VLink>
       </template>
       <template #api>
         <VLink href="https://github.com/wordpress/openverse-api/">{{
-          $t("about.planning.api", { openverse: "Openverse" })
+          t("about.planning.api", { openverse: "Openverse" })
         }}</VLink>
       </template>
       <template #catalog>
         <VLink href="https://github.com/wordpress/openverse-catalog/">{{
-          $t("about.planning.catalog", { openverse: "Openverse" })
+          t("about.planning.catalog", { openverse: "Openverse" })
         }}</VLink>
       </template>
       <template #community>
         <VLink href="https://make.wordpress.org/openverse/">{{
-          $t("about.planning.community")
+          t("about.planning.community")
         }}</VLink>
       </template>
       <template #working>
         <VLink href="https://github.com/orgs/WordPress/projects/3">{{
-          $t("about.planning.working")
+          t("about.planning.working")
         }}</VLink>
       </template>
     </i18n-t>
@@ -62,62 +62,62 @@
       <template #openverse>Openverse</template>
       <template #terms>
         <VLink href="https://creativecommons.org/terms/">{{
-          $t("about.declaration.terms", { openverse: "Openverse" })
+          t("about.declaration.terms", { openverse: "Openverse" })
         }}</VLink>
       </template>
     </i18n-t>
 
     <h2 id="external-sources">
-      {{ $t("externalSourcesPage.title") }}
+      {{ t("externalSourcesPage.title") }}
     </h2>
 
     <i18n-t scope="global" keypath="externalSourcesPage.intro" tag="p">
       <template #openverse>Openverse</template>
       <template #link>
-        <VLink href="/sources">{{ $t("externalSourcesPage.link") }}</VLink>
+        <VLink href="/sources">{{ t("externalSourcesPage.link") }}</VLink>
       </template>
     </i18n-t>
     <p>
-      {{ $t("externalSourcesPage.license", { openverse: "Openverse" }) }}
+      {{ t("externalSourcesPage.license", { openverse: "Openverse" }) }}
     </p>
     <p>
-      {{ $t("externalSourcesPage.explanation", { openverse: "Openverse" }) }}
+      {{ t("externalSourcesPage.explanation", { openverse: "Openverse" }) }}
     </p>
     <p>
-      {{ $t("externalSourcesPage.relationships", { openverse: "Openverse" }) }}
+      {{ t("externalSourcesPage.relationships", { openverse: "Openverse" }) }}
     </p>
     <h2>
-      {{ $t("externalSourcesPage.new.title") }}
+      {{ t("externalSourcesPage.new.title") }}
     </h2>
     <i18n-t scope="global" keypath="externalSourcesPage.new.content" tag="p">
       <template #issue>
         <VLink
           aria-label="issue"
           href="https://github.com/WordPress/openverse/issues"
-          >{{ $t("externalSourcesPage.new.issue") }}</VLink
+          >{{ t("externalSourcesPage.new.issue") }}</VLink
         >
       </template>
       <template #email>
         <VLink aria-label="email" href="mailto:openverse@wordpress.org">{{
-          $t("externalSourcesPage.new.email")
+          t("externalSourcesPage.new.email")
         }}</VLink>
       </template>
     </i18n-t>
     <h2>
-      {{ $t("externalSourcesPage.why.title") }}
+      {{ t("externalSourcesPage.why.title") }}
     </h2>
     <i18n-t scope="global" keypath="externalSourcesPage.why.content" tag="p">
       <template #old>
         <VLink
           aria-label="email"
           href="https://oldsearch.creativecommons.org"
-          >{{ $t("externalSourcesPage.why.old") }}</VLink
+          >{{ t("externalSourcesPage.why.old") }}</VLink
         >
       </template>
     </i18n-t>
 
     <p>
-      {{ $t("externalSourcesPage.why.new", { openverse: "Openverse" }) }}
+      {{ t("externalSourcesPage.why.new", { openverse: "Openverse" }) }}
     </p>
     <i18n-t
       scope="global"
@@ -126,9 +126,9 @@
     >
       <template #feedback>
         <VLink
-          :aria-label="$t('externalSourcesPage.why.ariaLabel')"
+          :aria-label="t('externalSourcesPage.why.ariaLabel')"
           href="/feedback"
-          >{{ $t("externalSourcesPage.why.feedbackLink") }}</VLink
+          >{{ t("externalSourcesPage.why.feedbackLink") }}</VLink
         >
       </template>
     </i18n-t>
@@ -136,7 +136,7 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import VLink from "~/components/VLink.vue"
 import VContentPage from "~/components/VContentPage.vue"
@@ -144,4 +144,7 @@ import VContentPage from "~/components/VContentPage.vue"
 definePageMeta({
   layout: "content-layout",
 })
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/pages/feedback.vue b/frontend/src/pages/feedback.vue
index 23b14555701..d995ffe6dec 100644
--- a/frontend/src/pages/feedback.vue
+++ b/frontend/src/pages/feedback.vue
@@ -1,7 +1,7 @@
 <template>
   <VContentPage>
     <h1 id="feedback">
-      {{ $t("feedback.title") }}
+      {{ t("feedback.title") }}
     </h1>
     <i18n-t scope="global" keypath="feedback.intro" tag="p">
       <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
@@ -20,17 +20,17 @@
       <VTabs label="#feedback" variant="plain" :selected-id="tabs[0]" manual>
         <template #tabs>
           <VTab v-for="tab in tabs" :id="tab" :key="tab">
-            {{ $t(`feedback.${tab}`) }}
+            {{ t(`feedback.${tab}`) }}
           </VTab>
         </template>
         <VTabPanel v-for="tab in tabs" :id="tab" :key="tab">
           <iframe
             class="h-[1200px] w-full border-0"
             :src="forms[tab]"
-            :aria-label="$t(`feedback.aria.${tab}`)"
-            :title="$t(`feedback.aria.${tab}`)"
+            :aria-label="t(`feedback.aria.${tab}`)"
+            :title="t(`feedback.aria.${tab}`)"
           >
-            {{ $t("feedback.loading") }}
+            {{ t("feedback.loading") }}
           </iframe>
         </VTabPanel>
       </VTabs>
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import VLink from "~/components/VLink.vue"
 import VContentPage from "~/components/VContentPage.vue"
@@ -61,4 +61,8 @@ const tabs = Object.keys(forms) as (keyof typeof forms)[]
 definePageMeta({
   layout: "content-layout",
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/pages/image/[id]/report.vue b/frontend/src/pages/image/[id]/report.vue
index f1b28903fad..b1fd0bb34f5 100644
--- a/frontend/src/pages/image/[id]/report.vue
+++ b/frontend/src/pages/image/[id]/report.vue
@@ -27,7 +27,7 @@
         size="medium"
         class="label-bold"
       >
-        {{ $t("report.imageDetails") }}
+        {{ t("report.imageDetails") }}
       </VButton>
     </figure>
 
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta, useAsyncData, useI18n, useRoute } from "#imports"
+import { definePageMeta, useAsyncData, useNuxtApp, useRoute } from "#imports"
 
 import { ref } from "vue"
 
@@ -60,20 +60,19 @@ import VContentReportForm from "~/components/VContentReport/VContentReportForm.v
 definePageMeta({
   layout: "content-layout",
 })
-
+const { $i18n } = useNuxtApp()
+const { t } = $i18n
 const route = useRoute()
 const singleResultStore = useSingleResultStore()
 
 const image = ref<ImageDetail>()
 const attributionMarkup = ref<string>()
 
-const i18n = useI18n({ useScope: "global" })
-
 await useAsyncData("image-report", async () => {
   const imageId = firstParam(route.params.id)
   if (imageId) {
     image.value = await singleResultStore.fetch(IMAGE, imageId)
-    attributionMarkup.value = getAttribution(image.value, i18n, {
+    attributionMarkup.value = getAttribution(image.value, $i18n, {
       includeIcons: false,
     })
   } else {
diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
index aab96c0d8cd..dd786026fee 100644
--- a/frontend/src/pages/preferences.vue
+++ b/frontend/src/pages/preferences.vue
@@ -1,6 +1,6 @@
 <template>
   <VContentPage>
-    <h1>{{ $t("prefPage.title") }}</h1>
+    <h1>{{ t("prefPage.title") }}</h1>
 
     <!-- TODO: Extract this to preferences modal. -->
     <!--
@@ -13,11 +13,11 @@
       class="not-prose border-b border-dark-charcoal-20 py-6 last-of-type:border-b-0"
     >
       <h2 class="label-bold mb-2">
-        {{ $t(`prefPage.groups.${group.title}.title`) }}
+        {{ t(`prefPage.groups.${group.title}.title`) }}
       </h2>
       <p class="label-regular mb-4">
         {{
-          $t(`prefPage.groups.${group.title}.desc`, { openverse: "Openverse" })
+          t(`prefPage.groups.${group.title}.desc`, { openverse: "Openverse" })
         }}
       </p>
       <ul>
@@ -33,7 +33,7 @@
             :checked="featureState(name) === ON"
             is-switch
             @change="handleChange"
-            >{{ $t(`prefPage.features.${name}`) }}</VCheckbox
+            >{{ t(`prefPage.features.${name}`) }}</VCheckbox
           >
         </li>
       </ul>
@@ -45,10 +45,10 @@
       class="not-prose border-b border-dark-charcoal-20 py-6 last-of-type:border-b-0"
     >
       <h2 class="label-bold mb-2">
-        {{ $t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.title`) }}
+        {{ t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.title`) }}
       </h2>
       <p class="label-regular mb-4">
-        {{ $t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.desc`) }}
+        {{ t(`prefPage.${isFlagSwitchable ? "s" : "nonS"}witchable.desc`) }}
       </p>
       <ul>
         <template v-for="(feature, name) in flags">
@@ -76,13 +76,13 @@
       </ul>
     </div>
 
-    <h2>{{ $t("prefPage.storeState") }}</h2>
+    <h2>{{ t("prefPage.storeState") }}</h2>
     <pre><code>{{ flags }}</code></pre>
   </VContentPage>
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import { computed } from "vue"
 
@@ -103,6 +103,10 @@ import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
 definePageMeta({
   layout: "content-layout",
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 const featureFlagStore = useFeatureFlagStore()
 
 const flags = computed(() => featureFlagStore.flags)
diff --git a/frontend/src/pages/privacy.vue b/frontend/src/pages/privacy.vue
index f9f0aa6f184..9b9e21d4ab2 100644
--- a/frontend/src/pages/privacy.vue
+++ b/frontend/src/pages/privacy.vue
@@ -1,26 +1,26 @@
 <template>
   <VContentPage>
     <h1>
-      {{ $t("privacy.title", { openverse: "Openverse" }) }}
+      {{ t("privacy.title", { openverse: "Openverse" }) }}
     </h1>
     <i18n-t scope="global" keypath="privacy.intro.content" tag="p">
       <template #link>
         <VLink href="https://wordpress.org/about/privacy/">{{
-          $t("privacy.intro.link")
+          t("privacy.intro.link")
         }}</VLink>
       </template>
       <template #openverse>Openverse</template>
     </i18n-t>
 
     <h2>
-      {{ $t("privacy.cookies.title") }}
+      {{ t("privacy.cookies.title") }}
     </h2>
     <i18n-t scope="global" keypath="privacy.cookies.content" tag="p">
       <template #openverse>Openverse</template>
     </i18n-t>
 
     <h2>
-      {{ $t("privacy.contact.title") }}
+      {{ t("privacy.contact.title") }}
     </h2>
 
     <i18n-t scope="global" keypath="privacy.contact.content" tag="p">
@@ -32,20 +32,20 @@
       </template>
       <template #issue>
         <VLink href="https://github.com/WordPress/openverse/issues/new/choose">
-          {{ $t("privacy.contact.issue") }}</VLink
+          {{ t("privacy.contact.issue") }}</VLink
         >
       </template>
       <template #chat>
         <VLink href="https://make.wordpress.org/chat/">
-          {{ $t("privacy.contact.chat") }}</VLink
+          {{ t("privacy.contact.chat") }}</VLink
         >
       </template>
     </i18n-t>
 
-    <h2>{{ $t("prefPage.groups.analytics.title") }}</h2>
+    <h2>{{ t("prefPage.groups.analytics.title") }}</h2>
 
     <p>
-      {{ $t("prefPage.groups.analytics.desc", { openverse: "Openverse" }) }}
+      {{ t("prefPage.groups.analytics.desc", { openverse: "Openverse" }) }}
     </p>
 
     <VCheckbox
@@ -56,14 +56,14 @@
       @change="handleChange"
     >
       <div>
-        {{ $t("prefPage.features.analytics") }}
+        {{ t("prefPage.features.analytics") }}
       </div>
     </VCheckbox>
   </VContentPage>
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import { computed } from "vue"
 
@@ -77,6 +77,11 @@ import VContentPage from "~/components/VContentPage.vue"
 definePageMeta({
   layout: "content-layout",
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
 const featureFlagStore = useFeatureFlagStore()
 
 const isChecked = computed(() => featureFlagStore.isOn("analytics"))
diff --git a/frontend/src/pages/search-help.vue b/frontend/src/pages/search-help.vue
index 31337f30428..2742e8030b5 100644
--- a/frontend/src/pages/search-help.vue
+++ b/frontend/src/pages/search-help.vue
@@ -1,21 +1,21 @@
 <template>
   <VContentPage>
-    <h1>{{ $t("searchGuide.title", { openverse: "Openverse" }) }}</h1>
-    <p>{{ $t("searchGuide.intro") }}</p>
+    <h1>{{ t("searchGuide.title", { openverse: "Openverse" }) }}</h1>
+    <p>{{ t("searchGuide.intro") }}</p>
 
-    <h2>{{ $t("searchGuide.exact.title") }}</h2>
+    <h2>{{ t("searchGuide.exact.title") }}</h2>
     <i18n-t scope="global" keypath="searchGuide.exact.content" tag="p">
       <template #link>
         <VLink
-          :aria-label="$t('searchGuide.exact.ariaLabel')"
+          :aria-label="t('searchGuide.exact.ariaLabel')"
           :href="pathFromQuery('&quot;Claude Monet&quot;')"
         >
-          <em>{{ $t("searchGuide.exact.claudeMonet") }}</em>
+          <em>{{ t("searchGuide.exact.claudeMonet") }}</em>
         </VLink>
       </template>
     </i18n-t>
 
-    <h2>{{ $t("searchGuide.negate.title") }}</h2>
+    <h2>{{ t("searchGuide.negate.title") }}</h2>
 
     <i18n-t
       scope="global"
@@ -25,17 +25,17 @@
     >
       <template #operator
         ><!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-        <em :aria-label="$t('searchGuide.negate.operatorAriaLabel')"
-          >- {{ $t("searchGuide.negate.operatorName") }}</em
+        <em :aria-label="t('searchGuide.negate.operatorAriaLabel')"
+          >- {{ t("searchGuide.negate.operatorName") }}</em
         >
         <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
       </template>
       <template #link>
         <VLink
-          :aria-label="$t('searchGuide.negate.ariaLabel')"
+          :aria-label="t('searchGuide.negate.ariaLabel')"
           :href="pathFromQuery('dog -pug')"
         >
-          <em>{{ $t("searchGuide.negate.example") }}</em>
+          <em>{{ t("searchGuide.negate.example") }}</em>
         </VLink>
       </template>
       <template #br>
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import { useSearchStore } from "~/stores/search"
 
@@ -56,6 +56,10 @@ import VContentPage from "~/components/VContentPage.vue"
 definePageMeta({
   layout: "content-layout",
 })
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
 const searchStore = useSearchStore()
 
 const pathFromQuery = (queryString: string) => {
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 657416401ab..6033c7245aa 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -46,9 +46,15 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta, isSearchTypeSupported, useAsyncSearch } from "#imports"
+import {
+  definePageMeta,
+  isSearchTypeSupported,
+  useAsyncSearch,
+  useHead,
+  useNuxtApp,
+} from "#imports"
 
-import { computed, inject, ref } from "vue"
+import { computed, inject, ref, watch } from "vue"
 import { storeToRefs } from "pinia"
 
 import { searchMiddleware } from "~/middleware/search"
@@ -99,5 +105,25 @@ const results = computed(() => {
 
 const isAllView = computed(() => searchType.value === ALL_MEDIA)
 
+const pageTitle = ref(`${searchTerm.value} | Openverse`)
+watch(searchTerm, () => {
+  pageTitle.value = `${searchTerm.value} | Openverse`
+})
+const i18n = useNuxtApp().$i18n
+
+const lang = computed(() => {
+  const lp = i18n.localeProperties.value
+  return {
+    lang: lp.code,
+    dir: lp.dir,
+  }
+})
+
+useHead({
+  title: pageTitle.value,
+  meta: [{ key: "robots", name: "robots", content: "all" }],
+  htmlAttrs: lang.value,
+})
+
 const { handleLoadMore, fetchingError, isFetching } = await useAsyncSearch()
 </script>
diff --git a/frontend/src/pages/search/image.vue b/frontend/src/pages/search/image.vue
index c157361df89..a345da6eb8f 100644
--- a/frontend/src/pages/search/image.vue
+++ b/frontend/src/pages/search/image.vue
@@ -2,11 +2,13 @@
   <VImageGrid
     :results="results"
     kind="search"
-    :image-grid-label="$t('browsePage.aria.results', { query: searchTerm })"
+    :image-grid-label="t('browsePage.aria.results', { query: searchTerm })"
   />
 </template>
 
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import type { ImageDetail } from "~/types/media"
 
 import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
@@ -15,4 +17,8 @@ defineProps<{
   searchTerm: string
   results: ImageDetail[]
 }>()
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/pages/sensitive-content.vue b/frontend/src/pages/sensitive-content.vue
index 43357dc9f0e..3e71eb32b54 100644
--- a/frontend/src/pages/sensitive-content.vue
+++ b/frontend/src/pages/sensitive-content.vue
@@ -1,7 +1,7 @@
 <template>
   <VContentPage>
     <h1>
-      {{ $t("sensitive.title") }}
+      {{ t("sensitive.title") }}
     </h1>
 
     <i18n-t scope="global" keypath="sensitive.description.content" tag="p">
@@ -9,46 +9,46 @@
       <template #wpCoc
         ><VLink
           href="https://make.wordpress.org/handbook/community-code-of-conduct/"
-          >{{ $t("sensitive.description.wpCoc") }}</VLink
+          >{{ t("sensitive.description.wpCoc") }}</VLink
         ></template
       >
       <template #deiStatement
         ><VLink
           href="https://make.wordpress.org/handbook/diversity-equity-and-inclusion-in-wordpress/"
-          >{{ $t("sensitive.description.deiStatement") }}</VLink
+          >{{ t("sensitive.description.deiStatement") }}</VLink
         ></template
       >
     </i18n-t>
 
-    <p>{{ $t("sensitive.sensitivity.what", { openverse: "Openverse" }) }}</p>
-    <p>{{ $t("sensitive.sensitivity.how", { openverse: "Openverse" }) }}</p>
+    <p>{{ t("sensitive.sensitivity.what", { openverse: "Openverse" }) }}</p>
+    <p>{{ t("sensitive.sensitivity.how", { openverse: "Openverse" }) }}</p>
 
     <h2 id="on-off">
-      {{ $t("sensitive.onOff.title") }}
+      {{ t("sensitive.onOff.title") }}
     </h2>
 
     <p>
-      {{ $t("sensitive.onOff.sensitiveResults", { openverse: "Openverse" }) }}
+      {{ t("sensitive.onOff.sensitiveResults", { openverse: "Openverse" }) }}
     </p>
 
     <p>
-      {{ $t("sensitive.onOff.blurSensitive", { openverse: "Openverse" }) }}
+      {{ t("sensitive.onOff.blurSensitive", { openverse: "Openverse" }) }}
     </p>
 
     <p>
-      {{ $t("sensitive.onOff.where", { openverse: "Openverse" }) }}
+      {{ t("sensitive.onOff.where", { openverse: "Openverse" }) }}
     </p>
 
     <h2 id="designations">
-      {{ $t("sensitive.designations.title") }}
+      {{ t("sensitive.designations.title") }}
     </h2>
 
     <p>
-      {{ $t("sensitive.designations.description", { openverse: "Openverse" }) }}
+      {{ t("sensitive.designations.description", { openverse: "Openverse" }) }}
     </p>
 
     <h3 id="user-reported-sensitivity">
-      {{ $t("sensitive.designations.userReported.title") }}
+      {{ t("sensitive.designations.userReported.title") }}
     </h3>
 
     <i18n-t
@@ -61,7 +61,7 @@
         <VLink
           href="https://learn.wordpress.org/tutorial/add-media-and-openverse-images-to-your-content-directly-from-the-inserter/"
           >{{
-            $t("sensitive.designations.userReported.gutenbergMediaInserter", {
+            t("sensitive.designations.userReported.gutenbergMediaInserter", {
               openverse: "Openverse",
             })
           }}</VLink
@@ -70,7 +70,7 @@
     </i18n-t>
 
     <h3 id="sensitive-textual-content">
-      {{ $t("sensitive.designations.sensitiveText.title") }}
+      {{ t("sensitive.designations.sensitiveText.title") }}
     </h3>
 
     <i18n-t
@@ -81,14 +81,14 @@
       <template #openverse>Openverse</template>
       <template #sensitiveTermsList>
         <VLink href="https://github.com/wordpress/openverse-sensitive-terms">{{
-          $t("sensitive.designations.sensitiveText.sensitiveTermsList")
+          t("sensitive.designations.sensitiveText.sensitiveTermsList")
         }}</VLink>
       </template>
       <template #imperfect>
         <VLink
           href="https://docs.openverse.org/projects/proposals/trust_and_safety/detecting_sensitive_textual_content/20230309-implementation_plan_sensitive_terms_list.html#this-will-not-be-perfect"
           >{{
-            $t("sensitive.designations.sensitiveText.imperfect", {
+            t("sensitive.designations.sensitiveText.imperfect", {
               sectionName: "This will not be perfect",
             })
           }}</VLink
@@ -104,40 +104,40 @@
       <template #openverse>Openverse</template>
       <template #notAvailable>
         <VLink href="https://github.com/WordPress/openverse/issues/2594">{{
-          $t("sensitive.designations.sensitiveText.notAvailable")
+          t("sensitive.designations.sensitiveText.notAvailable")
         }}</VLink>
       </template>
     </i18n-t>
 
     <h2>
-      {{ $t("sensitive.faq.title") }}
+      {{ t("sensitive.faq.title") }}
     </h2>
 
     <p>
-      <strong>{{ $t("sensitive.faq.one.question") }}</strong
+      <strong>{{ t("sensitive.faq.one.question") }}</strong
       ><br />
-      {{ $t("sensitive.faq.one.answer", { openverse: "Openverse" }) }}
+      {{ t("sensitive.faq.one.answer", { openverse: "Openverse" }) }}
     </p>
 
     <p>
-      <strong>{{ $t("sensitive.faq.two.question") }}</strong
+      <strong>{{ t("sensitive.faq.two.question") }}</strong
       ><br />
-      {{ $t("sensitive.faq.two.answerPt1", { openverse: "Openverse" }) }}
+      {{ t("sensitive.faq.two.answerPt1", { openverse: "Openverse" }) }}
     </p>
-    <p>{{ $t("sensitive.faq.two.answerPt2", { openverse: "Openverse" }) }}</p>
+    <p>{{ t("sensitive.faq.two.answerPt2", { openverse: "Openverse" }) }}</p>
 
     <p>
       <strong>{{
-        $t("sensitive.faq.three.question", { openverse: "Openverse" })
+        t("sensitive.faq.three.question", { openverse: "Openverse" })
       }}</strong
       ><br />
-      {{ $t("sensitive.faq.three.answer", { openverse: "Openverse" }) }}
+      {{ t("sensitive.faq.three.answer", { openverse: "Openverse" }) }}
     </p>
   </VContentPage>
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import VLink from "~/components/VLink.vue"
 import VContentPage from "~/components/VContentPage.vue"
@@ -145,4 +145,8 @@ import VContentPage from "~/components/VContentPage.vue"
 definePageMeta({
   layout: "content-layout",
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/frontend/src/pages/sources.vue b/frontend/src/pages/sources.vue
index 02a2dc3ec3b..7baf33d3f45 100644
--- a/frontend/src/pages/sources.vue
+++ b/frontend/src/pages/sources.vue
@@ -1,14 +1,14 @@
 <template>
   <VContentPage>
     <h1>
-      {{ $t("sources.title") }}
+      {{ t("sources.title") }}
     </h1>
 
     <h2>
-      {{ $t("sources.ccContent.where", { openverse: "Openverse" }) }}
+      {{ t("sources.ccContent.where", { openverse: "Openverse" }) }}
     </h2>
     <p>
-      {{ $t("sources.ccContent.content", { openverse: "Openverse" }) }}
+      {{ t("sources.ccContent.content", { openverse: "Openverse" }) }}
     </p>
     <i18n-t scope="global" keypath="sources.ccContent.provider" tag="p">
       <template #flickr>
@@ -16,7 +16,7 @@
       </template>
       <template #smithsonian>
         <VLink href="https://www.si.edu/">{{
-          $t("sources.ccContent.smithsonian")
+          t("sources.ccContent.smithsonian")
         }}</VLink>
       </template>
     </i18n-t>
@@ -27,31 +27,31 @@
       </template>
       <template #linkApi>
         <VLink href="https://pro.europeana.eu/page/apis">{{
-          $t("sources.ccContent.europeanaApi")
+          t("sources.ccContent.europeanaApi")
         }}</VLink>
       </template>
     </i18n-t>
 
     <h2>
-      {{ $t("sources.newContent.next") }}
+      {{ t("sources.newContent.next") }}
     </h2>
     <p>
-      {{ $t("sources.newContent.integrate") }}
+      {{ t("sources.newContent.integrate") }}
     </p>
     <ul>
       <li>
-        {{ $t("sources.newContent.impact") }}
+        {{ t("sources.newContent.impact") }}
       </li>
       <li>
-        {{ $t("sources.newContent.reuse") }}
+        {{ t("sources.newContent.reuse") }}
       </li>
       <li>
-        {{ $t("sources.newContent.totalItems") }}
+        {{ t("sources.newContent.totalItems") }}
       </li>
     </ul>
 
     <h2>
-      {{ $t("sources.suggestions") }}
+      {{ t("sources.suggestions") }}
     </h2>
 
     <p class="mt-5 inline-block">
@@ -65,19 +65,19 @@
         has-icon-end
         href="https://github.com/WordPress/openverse/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=[Source+Suggestion]+Insert+source+name+here"
       >
-        {{ $t("sources.issueButton") }}
+        {{ t("sources.issueButton") }}
       </VButton>
     </p>
 
     <i18n-t scope="global" keypath="sources.detail" tag="p">
       <template #singleName>
         <strong>
-          {{ $t("sources.singleName") }}
+          {{ t("sources.singleName") }}
         </strong>
       </template>
     </i18n-t>
     <template v-for="(mediaType, i) in supportedMediaTypes" :key="mediaType">
-      <h3>{{ $t(`sources.heading.${mediaType}`) }}</h3>
+      <h3>{{ t(`sources.heading.${mediaType}`) }}</h3>
       <VSourcesTable
         :media="mediaType"
         class="mt-4"
@@ -88,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { definePageMeta } from "#imports"
+import { definePageMeta, useNuxtApp } from "#imports"
 
 import { supportedMediaTypes } from "~/constants/media"
 
@@ -100,4 +100,8 @@ import VSourcesTable from "~/components/VSourcesTable.vue"
 definePageMeta({
   layout: "content-layout",
 })
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31378b80df6..9016a4643ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,16 +62,16 @@ importers:
         version: 9.9.1
       '@nuxtjs/plausible':
         specifier: ^0.2.4
-        version: 0.2.4(rollup@4.9.4)
+        version: 0.2.4(rollup@4.9.6)
       '@nuxtjs/sitemap':
         specifier: ^5.0.2
-        version: 5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(h3@1.10.1)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0)
+        version: 5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(h3@1.10.1)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1)
       '@nuxtjs/tailwindcss':
         specifier: ^6.11.2
-        version: 6.11.2(rollup@4.9.4)
+        version: 6.11.2(rollup@4.9.6)
       '@pinia/nuxt':
         specifier: ^0.5.1
-        version: 0.5.1(rollup@4.9.4)(typescript@5.2.2)(vue@3.4.15)
+        version: 0.5.1(rollup@4.9.6)(typescript@5.2.2)(vue@3.4.15)
       '@sentry/vue':
         specifier: ^7.93.0
         version: 7.93.0(vue@3.4.15)
@@ -120,10 +120,10 @@ importers:
     devDependencies:
       '@nuxt/test-utils':
         specifier: ^3.9.0
-        version: 3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.4)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
+        version: 3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.6)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
       '@nuxtjs/i18n':
-        specifier: 8.0.1
-        version: 8.0.1(rollup@4.9.4)(vue@3.4.15)
+        specifier: npm:@nuxtjs/i18n-edge@8.0.1-28448146.2145ce5
+        version: /@nuxtjs/i18n-edge@8.0.1-28448146.2145ce5(rollup@4.9.6)(vue@3.4.15)
       '@playwright/test':
         specifier: 1.40.1
         version: 1.40.1
@@ -159,10 +159,10 @@ importers:
         version: 4.1.5
       nuxt:
         specifier: ^3.10.0
-        version: 3.10.0(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
+        version: 3.10.0(rollup@4.9.6)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
       nuxt-prepare:
         specifier: ^1.0.0
-        version: 1.0.0(rollup@4.9.4)
+        version: 1.0.0(rollup@4.9.6)
       talkback:
         specifier: ^3.0.2
         version: 3.0.2
@@ -1297,7 +1297,7 @@ packages:
       - supports-color
     dev: false
 
-  /@intlify/bundle-utils@7.5.0(vue-i18n@9.9.0):
+  /@intlify/bundle-utils@7.5.0(vue-i18n@9.9.1):
     resolution: {integrity: sha512-6DymqusddBQ8kVtVBsVFFF7arNfIhuLacOmmsqayT2vl427j9m0VX12mMC+cgoVIodSpRfzYPaPTdPuJq7mK0Q==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1318,7 +1318,7 @@ packages:
       magic-string: 0.30.5
       mlly: 1.5.0
       source-map-js: 1.0.2
-      vue-i18n: 9.9.0(vue@3.4.15)
+      vue-i18n: 9.9.1(vue@3.4.15)
       yaml-eslint-parser: 1.2.2
     dev: true
 
@@ -1336,7 +1336,6 @@ packages:
     dependencies:
       '@intlify/message-compiler': 9.9.1
       '@intlify/shared': 9.9.1
-    dev: false
 
   /@intlify/core@9.9.0:
     resolution: {integrity: sha512-pm5liIc7KDVknpLS6x4HLr928Gs2HLMA7RkCP0sUNelTYouKZfSd7UM6rS8bQAZGUWZuzIxeJAEd0K5RqnuATQ==}
@@ -1407,7 +1406,7 @@ packages:
     resolution: {integrity: sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==}
     engines: {node: '>= 16'}
 
-  /@intlify/unplugin-vue-i18n@2.0.0(rollup@4.9.4)(vue-i18n@9.9.0):
+  /@intlify/unplugin-vue-i18n@2.0.0(rollup@4.9.6)(vue-i18n@9.9.1):
     resolution: {integrity: sha512-1oKvm92L9l2od2H9wKx2ZvR4tzn7gUtd7bPLI7AWUmm7U9H1iEypndt5d985ypxGsEs0gToDaKTrytbBIJwwSg==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1422,9 +1421,9 @@ packages:
       vue-i18n-bridge:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.0)
+      '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.1)
       '@intlify/shared': 9.9.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@vue/compiler-sfc': 3.4.15
       debug: 4.3.4
       fast-glob: 3.3.2
@@ -1434,7 +1433,7 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
       unplugin: 1.6.0
-      vue-i18n: 9.9.0(vue@3.4.15)
+      vue-i18n: 9.9.1(vue@3.4.15)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -1722,6 +1721,13 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /@jridgewell/trace-mapping@0.3.22:
+    resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
+
   /@koa/router@12.0.1:
     resolution: {integrity: sha512-ribfPYfHb+Uw3b27Eiw6NPqjhIhTpVFzEWLwyc/1Xp+DCdwRRyIlAUODX+9bPARF6aQtUu1+/PHzdNvRzcs/+Q==}
     engines: {node: '>= 12'}
@@ -1775,14 +1781,14 @@ packages:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: false
 
-  /@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.9.4):
+  /@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.9.6):
     resolution: {integrity: sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==}
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       json5: 2.2.3
-      rollup: 4.9.4
+      rollup: 4.9.6
     dev: true
 
   /@mole-inc/bin-wrapper@8.0.1:
@@ -1901,22 +1907,22 @@ packages:
   /@nuxt/devalue@2.0.2:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
-  /@nuxt/devtools-kit@1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12):
+  /@nuxt/devtools-kit@1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-j7bNZmoAXQ1a8qv6j6zk4c/aekrxYqYVQM21o/Hy4XHCUq4fajSgpoc8mjyWJSTfpkOmuLyEzMexpDWiIVSr6A==}
     peerDependencies:
       nuxt: ^3.9.0
       vite: '*'
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
-      '@nuxt/schema': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
+      '@nuxt/schema': 3.9.1(rollup@4.9.6)
       execa: 7.2.0
-      nuxt: 3.10.0(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
+      nuxt: 3.10.0(rollup@4.9.6)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
       vite: 5.0.12
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/devtools-ui-kit@1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0):
+  /@nuxt/devtools-ui-kit@1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1):
     resolution: {integrity: sha512-oPkyQ+nkvCvveWxHWAHpZt9uEycHFD00Rh46KYKe5KLl81Wr/L3KacIIYpiocPog0YZZhjvX5CmrIe8zXopNOA==}
     peerDependencies:
       '@nuxt/devtools': 1.0.8
@@ -1925,23 +1931,23 @@ packages:
       '@iconify-json/logos': 1.1.42
       '@iconify-json/ri': 1.1.18
       '@iconify-json/tabler': 1.1.103
-      '@nuxt/devtools': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
-      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
-      '@nuxtjs/color-mode': 3.3.2(rollup@4.9.4)
+      '@nuxt/devtools': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
+      '@nuxtjs/color-mode': 3.3.2(rollup@4.9.6)
       '@unocss/core': 0.58.3
-      '@unocss/nuxt': 0.58.3(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(webpack@5.89.0)
+      '@unocss/nuxt': 0.58.3(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(webpack@5.90.1)
       '@unocss/preset-attributify': 0.58.3
       '@unocss/preset-icons': 0.58.3
       '@unocss/preset-mini': 0.58.3
       '@unocss/reset': 0.58.3
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/integrations': 10.7.1(axios@1.6.5)(focus-trap@7.5.4)(vue@3.4.15)
-      '@vueuse/nuxt': 10.7.1(nuxt@3.10.0)(rollup@4.9.4)(vue@3.4.15)
+      '@vueuse/nuxt': 10.7.1(nuxt@3.10.0)(rollup@4.9.6)(vue@3.4.15)
       defu: 6.1.4
       focus-trap: 7.5.4
       splitpanes: 3.1.5
-      unocss: 0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)
+      unocss: 0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)
       v-lazy-show: 0.2.4(@vue/compiler-core@3.4.15)
     transitivePeerDependencies:
       - '@unocss/webpack'
@@ -1982,7 +1988,7 @@ packages:
       rc9: 2.1.1
       semver: 7.5.4
 
-  /@nuxt/devtools@1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12):
+  /@nuxt/devtools@1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-o6aBFEBxc8OgVHV4OPe2g0q9tFIe9HiTxRiJnlTJ+jHvOQsBLS651ArdVtwLChf9UdMouFlpLLJ1HteZqTbtsQ==}
     hasBin: true
     peerDependencies:
@@ -1990,9 +1996,9 @@ packages:
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.7
-      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
       '@nuxt/devtools-wizard': 1.0.8
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
       birpc: 0.2.14
       consola: 3.2.3
       destr: 2.0.2
@@ -2007,7 +2013,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.3
-      nuxt: 3.10.0(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
+      nuxt: 3.10.0(rollup@4.9.6)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
       nypm: 0.3.6
       ohash: 1.1.3
       pacote: 17.0.5
@@ -2019,9 +2025,9 @@ packages:
       semver: 7.5.4
       simple-git: 3.22.0
       sirv: 2.0.4
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       vite: 5.0.12
-      vite-plugin-inspect: 0.8.1(@nuxt/kit@3.10.0)(rollup@4.9.4)(vite@5.0.12)
+      vite-plugin-inspect: 0.8.1(@nuxt/kit@3.10.0)(rollup@4.9.6)(vite@5.0.12)
       vite-plugin-vue-inspector: 4.0.2(vite@5.0.12)
       which: 3.0.1
       ws: 8.16.0
@@ -2032,11 +2038,11 @@ packages:
       - supports-color
       - utf-8-validate
 
-  /@nuxt/kit@3.10.0(rollup@4.9.4):
+  /@nuxt/kit@3.10.0(rollup@4.9.6):
     resolution: {integrity: sha512-SNyZqk57kyEvTdFSYhQCYFCwT/EQO13O9SWtY2ULscdhXd2C5D0SQW9E7OM7O/31Fa+KQ9RnSTA8DnwaOFne2g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.10.0(rollup@4.9.4)
+      '@nuxt/schema': 3.10.0(rollup@4.9.6)
       c12: 1.6.1
       consola: 3.2.3
       defu: 6.1.4
@@ -2052,17 +2058,17 @@ packages:
       semver: 7.5.4
       ufo: 1.3.2
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/kit@3.9.1(rollup@4.9.4):
+  /@nuxt/kit@3.9.1(rollup@4.9.6):
     resolution: {integrity: sha512-QvwZ4QmxmKEnGXXwhLapfogW8enIX30GD7nbmasAkcDIf4GdP2IWUwhd068mrXMbzdZupRLV1J5E74Dr516o5g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.9.1(rollup@4.9.4)
+      '@nuxt/schema': 3.9.1(rollup@4.9.6)
       c12: 1.6.1
       consola: 3.2.3
       defu: 6.1.4
@@ -2078,17 +2084,17 @@ packages:
       semver: 7.5.4
       ufo: 1.3.2
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/kit@3.9.3(rollup@4.9.4):
+  /@nuxt/kit@3.9.3(rollup@4.9.6):
     resolution: {integrity: sha512-bHGXpTB6E+YJCC1L9tTwrP7txgLZzyuFes/tgy1ZM4dlfrCsGqLK/K4mddROMdC3D81scnH84u7yQsN0JRgoTg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.9.3(rollup@4.9.4)
+      '@nuxt/schema': 3.9.3(rollup@4.9.6)
       c12: 1.6.1
       consola: 3.2.3
       defu: 6.1.4
@@ -2104,14 +2110,14 @@ packages:
       semver: 7.5.4
       ufo: 1.3.2
       unctx: 2.3.1
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@nuxt/schema@3.10.0(rollup@4.9.4):
+  /@nuxt/schema@3.10.0(rollup@4.9.6):
     resolution: {integrity: sha512-XwxyoW1DFMpHsoF3LHvwd2e2JFy9bTBfTo2/gH2RH9tU2W3I56A9uPRBftFXTNEDBrO2whYOFsRgjVOmM0ZZHg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
@@ -2124,13 +2130,13 @@ packages:
       scule: 1.2.0
       std-env: 3.7.0
       ufo: 1.3.2
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/schema@3.9.1(rollup@4.9.4):
+  /@nuxt/schema@3.9.1(rollup@4.9.6):
     resolution: {integrity: sha512-GmALRLYo2vPMS1lMpUkUrUuEgTMCL1ZWyqA+zPKJ9/Rh2rrQgIvFyClqUl4txQoCZl038njP5cW0nOe2Oe0HKg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
@@ -2143,13 +2149,13 @@ packages:
       scule: 1.1.1
       std-env: 3.7.0
       ufo: 1.3.2
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  /@nuxt/schema@3.9.3(rollup@4.9.4):
+  /@nuxt/schema@3.9.3(rollup@4.9.6):
     resolution: {integrity: sha512-pchkGBYdEJ9TAOoC5DKnLuAaFPjzgn2k0OUTr31QwbtHdTR3Q2Ua/oKsS1g9CPU7KRzSE5Vkf7ECE8zVydqF5A==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
@@ -2162,18 +2168,18 @@ packages:
       scule: 1.2.0
       std-env: 3.7.0
       ufo: 1.3.2
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       untyped: 1.4.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@nuxt/telemetry@2.5.3(rollup@4.9.4):
+  /@nuxt/telemetry@2.5.3(rollup@4.9.6):
     resolution: {integrity: sha512-Ghv2MgWbJcUM9G5Dy3oQP0cJkUwEgaiuQxEF61FXJdn0a69Q4StZEP/hLF0MWPM9m6EvAwI7orxkJHM7MrmtVg==}
     hasBin: true
     dependencies:
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
       ci-info: 4.0.0
       consola: 3.2.3
       create-require: 1.1.1
@@ -2194,7 +2200,7 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/test-utils@3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.4)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15):
+  /@nuxt/test-utils@3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.6)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15):
     resolution: {integrity: sha512-17qaU4vfFJWIaT4BJ/R6C2rIuvxaF5HaiRusXHhA/34SyiduNEhezIvIVqhWVkn33y5CNueduE0AykBEj1IgEA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -2228,8 +2234,8 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
-      '@nuxt/schema': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
+      '@nuxt/schema': 3.9.1(rollup@4.9.6)
       '@testing-library/vue': 8.0.1(@vue/compiler-sfc@3.4.15)(vue@3.4.15)
       '@vitest/ui': 1.2.0(vitest@1.2.0)
       '@vue/test-utils': 2.4.3(vue@3.4.15)
@@ -2257,7 +2263,7 @@ packages:
       unplugin: 1.6.0
       vite: 5.0.12
       vitest: 1.2.0(@vitest/ui@1.2.0)(jsdom@23.2.0)
-      vitest-environment-nuxt: 1.0.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.4)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
+      vitest-environment-nuxt: 1.0.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.6)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
       vue: 3.4.15(typescript@5.2.2)
       vue-router: 4.2.5(vue@3.4.15)
     transitivePeerDependencies:
@@ -2268,14 +2274,14 @@ packages:
   /@nuxt/ui-templates@1.3.1:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
 
-  /@nuxt/vite-builder@3.10.0(rollup@4.9.4)(typescript@5.2.2)(vue-tsc@1.8.27)(vue@3.4.15):
+  /@nuxt/vite-builder@3.10.0(rollup@4.9.6)(typescript@5.2.2)(vue-tsc@1.8.27)(vue@3.4.15):
     resolution: {integrity: sha512-PpdcPkvfBzSZVHqxZ/uneTUZq6ufZDzgP36yXxZ/ygRi90szOs5QHWzGFXJ6cCW4D34iqePKjeTXJall3C74LA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
     dependencies:
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
-      '@rollup/plugin-replace': 5.0.5(rollup@4.9.4)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
+      '@rollup/plugin-replace': 5.0.5(rollup@4.9.6)
       '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
       '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.0.12)(vue@3.4.15)
       autoprefixer: 10.4.17(postcss@8.4.33)
@@ -2298,7 +2304,7 @@ packages:
       perfect-debounce: 1.0.0
       pkg-types: 1.0.3
       postcss: 8.4.33
-      rollup-plugin-visualizer: 5.12.0(rollup@4.9.4)
+      rollup-plugin-visualizer: 5.12.0(rollup@4.9.6)
       std-env: 3.7.0
       strip-literal: 2.0.0
       ufo: 1.3.2
@@ -2328,10 +2334,10 @@ packages:
       - vti
       - vue-tsc
 
-  /@nuxtjs/color-mode@3.3.2(rollup@4.9.4):
+  /@nuxtjs/color-mode@3.3.2(rollup@4.9.6):
     resolution: {integrity: sha512-BLpBfrYZngV2QWFQ4HNEFwAXa3Pno43Ge+2XHcZJTTa1Z4KzRLvOwku8yiyV3ovIaaXKGwduBdv3Z5Ocdp0/+g==}
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       lodash.template: 4.5.0
       pathe: 1.1.2
     transitivePeerDependencies:
@@ -2339,17 +2345,17 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxtjs/i18n@8.0.1(rollup@4.9.4)(vue@3.4.15):
-    resolution: {integrity: sha512-h1IBAY/sdGYHEud/HrL28tx632wteggQ1hFWO+XBj/5xBAVfgSYjcaB3bWtB6KNXYktojWOifW0QIis5lfx7UQ==}
+  /@nuxtjs/i18n-edge@8.0.1-28448146.2145ce5(rollup@4.9.6)(vue@3.4.15):
+    resolution: {integrity: sha512-gp0/YX+EFfAKDEECvrhg+bey9DY6JqAi+I7vwNx5ZhmyFl6iTVAlf6AFV6WSzU3WSVRzEVeL0fKfUzOXmBrEag==}
     engines: {node: ^14.16.0 || >=16.11.0}
     dependencies:
       '@intlify/h3': 0.5.0
       '@intlify/shared': 9.9.1
-      '@intlify/unplugin-vue-i18n': 2.0.0(rollup@4.9.4)(vue-i18n@9.9.0)
+      '@intlify/unplugin-vue-i18n': 2.0.0(rollup@4.9.6)(vue-i18n@9.9.1)
       '@intlify/utils': 0.12.0
-      '@miyaneee/rollup-plugin-json5': 1.2.0(rollup@4.9.4)
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
-      '@rollup/plugin-yaml': 4.1.2(rollup@4.9.4)
+      '@miyaneee/rollup-plugin-json5': 1.2.0(rollup@4.9.6)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
+      '@rollup/plugin-yaml': 4.1.2(rollup@4.9.6)
       '@vue/compiler-sfc': 3.4.15
       debug: 4.3.4
       defu: 6.1.4
@@ -2362,7 +2368,7 @@ packages:
       sucrase: 3.35.0
       ufo: 1.3.2
       unplugin: 1.6.0
-      vue-i18n: 9.9.0(vue@3.4.15)
+      vue-i18n: 9.9.1(vue@3.4.15)
       vue-router: 4.2.5(vue@3.4.15)
     transitivePeerDependencies:
       - petite-vue-i18n
@@ -2372,10 +2378,10 @@ packages:
       - vue-i18n-bridge
     dev: true
 
-  /@nuxtjs/plausible@0.2.4(rollup@4.9.4):
+  /@nuxtjs/plausible@0.2.4(rollup@4.9.6):
     resolution: {integrity: sha512-9HrSl9ZGKS/7bULAt8uzAGo9BJyIZebzRSLQD8ZhiODaGyRdEQlgcJBw5JgUzjcC5n4T0ZlX3FC6C3Wyp7opgA==}
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       defu: 6.1.4
       pathe: 1.1.1
       plausible-tracker: 0.3.8
@@ -2384,19 +2390,19 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxtjs/sitemap@5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(h3@1.10.1)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0):
+  /@nuxtjs/sitemap@5.0.3(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(h3@1.10.1)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1):
     resolution: {integrity: sha512-TfVyLI0IShv6DzfdrwhO5ghpMg3Nm67QxL7nHd7l+Ke9e8tQkfwtuiKKhZjXOt2riSpyqKATuG+H9b1Nyx9HPQ==}
     dependencies:
-      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
-      '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0)
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
+      '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       '@vueuse/core': 10.7.2(vue@3.4.15)
       chalk: 5.3.0
       defu: 6.1.4
       floating-vue: 5.0.3(@nuxt/kit@3.9.1)(vue@3.4.15)
       h3-compression: 0.3.2(h3@1.10.1)
-      nuxt-site-config: 2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0)
-      nuxt-site-config-kit: 2.2.5(rollup@4.9.4)(vue@3.4.15)
+      nuxt-site-config: 2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1)
+      nuxt-site-config-kit: 2.2.5(rollup@4.9.6)(vue@3.4.15)
       ofetch: 1.3.3
       pathe: 1.1.2
       pkg-types: 1.0.3
@@ -2431,10 +2437,10 @@ packages:
       - webpack
     dev: false
 
-  /@nuxtjs/tailwindcss@6.11.2(rollup@4.9.4):
+  /@nuxtjs/tailwindcss@6.11.2(rollup@4.9.6):
     resolution: {integrity: sha512-06e8t9ia6Ru/RPMATuhGwi16rMYeZPseXiI4QmRDk/IkvluU60GxhLZOjdUIa+U7DVCECgDsRNEo/rD8/1sMKQ==}
     dependencies:
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
       autoprefixer: 10.4.17(postcss@8.4.33)
       chokidar: 3.5.3
       clear-module: 4.1.2
@@ -2799,10 +2805,10 @@ packages:
       '@parcel/watcher-win32-ia32': 2.3.0
       '@parcel/watcher-win32-x64': 2.3.0
 
-  /@pinia/nuxt@0.5.1(rollup@4.9.4)(typescript@5.2.2)(vue@3.4.15):
+  /@pinia/nuxt@0.5.1(rollup@4.9.6)(typescript@5.2.2)(vue@3.4.15):
     resolution: {integrity: sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==}
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       pinia: 2.1.7(typescript@5.2.2)(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -2914,6 +2920,19 @@ packages:
       magic-string: 0.30.5
       rollup: 4.9.4
 
+  /@rollup/plugin-replace@5.0.5(rollup@4.9.6):
+    resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      magic-string: 0.30.5
+      rollup: 4.9.6
+
   /@rollup/plugin-terser@0.4.4(rollup@4.9.4):
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
@@ -2940,7 +2959,7 @@ packages:
       '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
       rollup: 4.9.4
 
-  /@rollup/plugin-yaml@4.1.2(rollup@4.9.4):
+  /@rollup/plugin-yaml@4.1.2(rollup@4.9.6):
     resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -2949,9 +2968,9 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       js-yaml: 4.1.0
-      rollup: 4.9.4
+      rollup: 4.9.6
       tosource: 2.0.0-alpha.3
     dev: true
 
@@ -2976,6 +2995,20 @@ packages:
       picomatch: 2.3.1
       rollup: 4.9.4
 
+  /@rollup/pluginutils@5.1.0(rollup@4.9.6):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 4.9.6
+
   /@rollup/rollup-android-arm-eabi@4.9.4:
     resolution: {integrity: sha512-ub/SN3yWqIv5CWiAZPHVS1DloyZsJbtXmX4HxUTIpS0BHm9pW5iYBo2mIZi+hE3AeiTzHz33blwSnhdUo+9NpA==}
     cpu: [arm]
@@ -2983,6 +3016,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-android-arm-eabi@4.9.6:
+    resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-android-arm64@4.9.4:
     resolution: {integrity: sha512-ehcBrOR5XTl0W0t2WxfTyHCR/3Cq2jfb+I4W+Ch8Y9b5G+vbAecVv0Fx/J1QKktOrgUYsIKxWAKgIpvw56IFNA==}
     cpu: [arm64]
@@ -2990,6 +3030,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-android-arm64@4.9.6:
+    resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-darwin-arm64@4.9.4:
     resolution: {integrity: sha512-1fzh1lWExwSTWy8vJPnNbNM02WZDS8AW3McEOb7wW+nPChLKf3WG2aG7fhaUmfX5FKw9zhsF5+MBwArGyNM7NA==}
     cpu: [arm64]
@@ -2997,6 +3044,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-darwin-arm64@4.9.6:
+    resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-darwin-x64@4.9.4:
     resolution: {integrity: sha512-Gc6cukkF38RcYQ6uPdiXi70JB0f29CwcQ7+r4QpfNpQFVHXRd0DfWFidoGxjSx1DwOETM97JPz1RXL5ISSB0pA==}
     cpu: [x64]
@@ -3004,6 +3058,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-darwin-x64@4.9.6:
+    resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-arm-gnueabihf@4.9.4:
     resolution: {integrity: sha512-g21RTeFzoTl8GxosHbnQZ0/JkuFIB13C3T7Y0HtKzOXmoHhewLbVTFBQZu+z5m9STH6FZ7L/oPgU4Nm5ErN2fw==}
     cpu: [arm]
@@ -3011,6 +3072,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
+    resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-arm64-gnu@4.9.4:
     resolution: {integrity: sha512-TVYVWD/SYwWzGGnbfTkrNpdE4HON46orgMNHCivlXmlsSGQOx/OHHYiQcMIOx38/GWgwr/po2LBn7wypkWw/Mg==}
     cpu: [arm64]
@@ -3018,6 +3086,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-arm64-gnu@4.9.6:
+    resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-arm64-musl@4.9.4:
     resolution: {integrity: sha512-XcKvuendwizYYhFxpvQ3xVpzje2HHImzg33wL9zvxtj77HvPStbSGI9czrdbfrf8DGMcNNReH9pVZv8qejAQ5A==}
     cpu: [arm64]
@@ -3025,6 +3100,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-arm64-musl@4.9.6:
+    resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-riscv64-gnu@4.9.4:
     resolution: {integrity: sha512-LFHS/8Q+I9YA0yVETyjonMJ3UA+DczeBd/MqNEzsGSTdNvSJa1OJZcSH8GiXLvcizgp9AlHs2walqRcqzjOi3A==}
     cpu: [riscv64]
@@ -3032,6 +3114,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
+    resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-x64-gnu@4.9.4:
     resolution: {integrity: sha512-dIYgo+j1+yfy81i0YVU5KnQrIJZE8ERomx17ReU4GREjGtDW4X+nvkBak2xAUpyqLs4eleDSj3RrV72fQos7zw==}
     cpu: [x64]
@@ -3039,6 +3128,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-x64-gnu@4.9.6:
+    resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-linux-x64-musl@4.9.4:
     resolution: {integrity: sha512-RoaYxjdHQ5TPjaPrLsfKqR3pakMr3JGqZ+jZM0zP2IkDtsGa4CqYaWSfQmZVgFUCgLrTnzX+cnHS3nfl+kB6ZQ==}
     cpu: [x64]
@@ -3046,6 +3142,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-linux-x64-musl@4.9.6:
+    resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-win32-arm64-msvc@4.9.4:
     resolution: {integrity: sha512-T8Q3XHV+Jjf5e49B4EAaLKV74BbX7/qYBRQ8Wop/+TyyU0k+vSjiLVSHNWdVd1goMjZcbhDmYZUYW5RFqkBNHQ==}
     cpu: [arm64]
@@ -3053,6 +3156,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-win32-arm64-msvc@4.9.6:
+    resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-win32-ia32-msvc@4.9.4:
     resolution: {integrity: sha512-z+JQ7JirDUHAsMecVydnBPWLwJjbppU+7LZjffGf+Jvrxq+dVjIE7By163Sc9DKc3ADSU50qPVw0KonBS+a+HQ==}
     cpu: [ia32]
@@ -3060,6 +3170,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-win32-ia32-msvc@4.9.6:
+    resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
   /@rollup/rollup-win32-x64-msvc@4.9.4:
     resolution: {integrity: sha512-LfdGXCV9rdEify1oxlN9eamvDSjv9md9ZVMAbNHA87xqIfFCxImxan9qZ8+Un54iK2nnqPlbnSi4R54ONtbWBw==}
     cpu: [x64]
@@ -3067,6 +3184,13 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@rollup/rollup-win32-x64-msvc@4.9.6:
+    resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
   /@sentry-internal/feedback@7.93.0:
     resolution: {integrity: sha512-4G7rMeQbYGfCHxEoFroABX+UREYc2BSbFqjLmLbIcWowSpgzcwweLLphWHKOciqK6f7DnNDK0jZzx3u7NrkWHw==}
     engines: {node: '>=12'}
@@ -3522,6 +3646,12 @@ packages:
     dependencies:
       undici-types: 5.26.5
 
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: false
+
   /@types/normalize-package-data@2.4.4:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
     dev: false
@@ -3819,7 +3949,7 @@ packages:
       unhead: 1.8.10
       vue: 3.4.15(typescript@5.2.2)
 
-  /@unocss/astro@0.58.3(rollup@4.9.4)(vite@5.0.12):
+  /@unocss/astro@0.58.3(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-qJL+XkWYJhEIX4AmOtbfb2Zu4holTDpRscfvVci4T+2VWjyE3mgtsyNzi9ZChe/hdEPRa7g26gSpNQeMhjh/Kw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
@@ -3829,19 +3959,19 @@ packages:
     dependencies:
       '@unocss/core': 0.58.3
       '@unocss/reset': 0.58.3
-      '@unocss/vite': 0.58.3(rollup@4.9.4)(vite@5.0.12)
+      '@unocss/vite': 0.58.3(rollup@4.9.6)(vite@5.0.12)
       vite: 5.0.12
     transitivePeerDependencies:
       - rollup
     dev: false
 
-  /@unocss/cli@0.58.3(rollup@4.9.4):
+  /@unocss/cli@0.58.3(rollup@4.9.6):
     resolution: {integrity: sha512-veGdHhwm7GRvruXCMdqoFu3wVozr7ELEVWsFB6GpqWdGYIJ1i72M18l72UHDA2+TuDillZONnAQ5AvX9x/sYAw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@unocss/config': 0.58.3
       '@unocss/core': 0.58.3
       '@unocss/preset-uno': 0.58.3
@@ -3884,10 +4014,10 @@ packages:
       sirv: 2.0.4
     dev: false
 
-  /@unocss/nuxt@0.58.3(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(webpack@5.89.0):
+  /@unocss/nuxt@0.58.3(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(webpack@5.90.1):
     resolution: {integrity: sha512-dDQVKb8VtJt2/8SE6/vK1foEaqoTXVUUVq/TT7rSRLHdvRSVKE7M2eeoTS+k38RYdeooMx9YCtzwZDxun6caeQ==}
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       '@unocss/config': 0.58.3
       '@unocss/core': 0.58.3
       '@unocss/preset-attributify': 0.58.3
@@ -3898,9 +4028,9 @@ packages:
       '@unocss/preset-web-fonts': 0.58.3
       '@unocss/preset-wind': 0.58.3
       '@unocss/reset': 0.58.3
-      '@unocss/vite': 0.58.3(rollup@4.9.4)(vite@5.0.12)
-      '@unocss/webpack': 0.58.3(rollup@4.9.4)(webpack@5.89.0)
-      unocss: 0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)
+      '@unocss/vite': 0.58.3(rollup@4.9.6)(vite@5.0.12)
+      '@unocss/webpack': 0.58.3(rollup@4.9.6)(webpack@5.90.1)
+      unocss: 0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -4038,13 +4168,13 @@ packages:
       '@unocss/core': 0.58.3
     dev: false
 
-  /@unocss/vite@0.58.3(rollup@4.9.4)(vite@5.0.12):
+  /@unocss/vite@0.58.3(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-gmB2//z7lDEK7Bw5HbHTSQ3abOM0iveAY/W3L3FFXpvduoxMQyuI5dDk0hOCtzhAWeJoynnVN4MBGVmXM4Y/Mg==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@unocss/config': 0.58.3
       '@unocss/core': 0.58.3
       '@unocss/inspector': 0.58.3
@@ -4058,20 +4188,20 @@ packages:
       - rollup
     dev: false
 
-  /@unocss/webpack@0.58.3(rollup@4.9.4)(webpack@5.89.0):
+  /@unocss/webpack@0.58.3(rollup@4.9.6)(webpack@5.90.1):
     resolution: {integrity: sha512-pBPM27+vnyOZzR7aLGrWAlVgpVZU5I0+57eRQFpnGUggOU3ppDdb0B9KdZ9KY96fxmfIQHc8BLKfSXSbVV//7A==}
     peerDependencies:
       webpack: ^4 || ^5
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@unocss/config': 0.58.3
       '@unocss/core': 0.58.3
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
       unplugin: 1.6.0
-      webpack: 5.89.0
+      webpack: 5.90.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:
       - rollup
@@ -4215,7 +4345,7 @@ packages:
       '@volar/language-core': 1.11.1
       path-browserify: 1.0.1
 
-  /@vue-macros/common@1.10.0(rollup@4.9.4)(vue@3.4.15):
+  /@vue-macros/common@1.10.0(rollup@4.9.6)(vue@3.4.15):
     resolution: {integrity: sha512-4DZsPeQA/nBQDw2RkYAmH7KrFjJVrMdAhJhO1JCl1bbbFXCGeoGjXfkg9wHPppj47s2HpAB3GrqNwqVGbi12NQ==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
@@ -4225,9 +4355,9 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.23.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       '@vue/compiler-sfc': 3.4.15
-      ast-kit: 0.11.3(rollup@4.9.4)
+      ast-kit: 0.11.3(rollup@4.9.6)
       local-pkg: 0.5.0
       magic-string-ast: 0.3.0
       vue: 3.4.15(typescript@5.2.2)
@@ -4456,16 +4586,16 @@ packages:
     resolution: {integrity: sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==}
     dev: false
 
-  /@vueuse/nuxt@10.7.1(nuxt@3.10.0)(rollup@4.9.4)(vue@3.4.15):
+  /@vueuse/nuxt@10.7.1(nuxt@3.10.0)(rollup@4.9.6)(vue@3.4.15):
     resolution: {integrity: sha512-/cPFPIUusKS6y0J16xBJ08OOXdfPUEkQBF9+/eIaG/ZIGuUYyRENZuGLj+V8BArP8uzH+EY6SWQXhT1lWw6Q+A==}
     peerDependencies:
       nuxt: ^3.0.0
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       '@vueuse/core': 10.7.1(vue@3.4.15)
       '@vueuse/metadata': 10.7.1
       local-pkg: 0.5.0
-      nuxt: 3.10.0(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
+      nuxt: 3.10.0(rollup@4.9.6)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27)
       vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -4886,32 +5016,32 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
-  /ast-kit@0.11.3(rollup@4.9.4):
+  /ast-kit@0.11.3(rollup@4.9.6):
     resolution: {integrity: sha512-qdwwKEhckRk0XE22/xDdmU3v/60E8Edu4qFhgTLIhGGDs/PAJwLw9pQn8Rj99PitlbBZbYpx0k/lbir4kg0SuA==}
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.23.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  /ast-kit@0.9.5(rollup@4.9.4):
+  /ast-kit@0.9.5(rollup@4.9.6):
     resolution: {integrity: sha512-kbL7ERlqjXubdDd+szuwdlQ1xUxEz9mCz1+m07ftNVStgwRb2RWw+U6oKo08PAvOishMxiqz1mlJyLl8yQx2Qg==}
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.23.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       pathe: 1.1.2
     transitivePeerDependencies:
       - rollup
 
-  /ast-walker-scope@0.5.0(rollup@4.9.4):
+  /ast-walker-scope@0.5.0(rollup@4.9.6):
     resolution: {integrity: sha512-NsyHMxBh4dmdEHjBo1/TBZvCKxffmZxRYhmclfu0PP6Aftre47jOHYaYaNqJcV0bxihxFXhDkzLHUwHc0ocd0Q==}
     engines: {node: '>=16.14.0'}
     dependencies:
       '@babel/parser': 7.23.6
-      ast-kit: 0.9.5(rollup@4.9.4)
+      ast-kit: 0.9.5(rollup@4.9.6)
     transitivePeerDependencies:
       - rollup
 
@@ -5133,6 +5263,17 @@ packages:
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
 
+  /browserslist@4.22.3:
+    resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001583
+      electron-to-chromium: 1.4.656
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.22.3)
+    dev: false
+
   /bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
     dependencies:
@@ -6043,6 +6184,10 @@ packages:
   /electron-to-chromium@1.4.625:
     resolution: {integrity: sha512-DENMhh3MFgaPDoXWrVIqSPInQoLImywfCwrSmVl3cf9QHzoZSiutHwGaB/Ql3VkqcQV30rzgdM+BjKqBAJxo5Q==}
 
+  /electron-to-chromium@1.4.656:
+    resolution: {integrity: sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==}
+    dev: false
+
   /emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -6921,7 +7066,7 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/dom': 1.1.1
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       vue: 3.4.15(typescript@5.2.2)
       vue-resize: 2.0.0-alpha.1(vue@3.4.15)
     dev: false
@@ -6936,7 +7081,7 @@ packages:
         optional: true
     dependencies:
       '@floating-ui/dom': 1.1.1
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
       vue: 3.4.15(typescript@5.2.2)
       vue-resize: 2.0.0-alpha.1(vue@3.4.15)
     dev: false
@@ -8273,7 +8418,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.10.8
+      '@types/node': 20.11.16
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: false
@@ -9346,10 +9491,10 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
-  /nuxt-prepare@1.0.0(rollup@4.9.4):
+  /nuxt-prepare@1.0.0(rollup@4.9.6):
     resolution: {integrity: sha512-G/p9sTOx2Oqnf25igoZi6n5jpZrykwBhsF8E6VKjNtUbcN0Z2sm+gK4DWHelfgZAFWY72eXzwr3/xtNA15cCzg==}
     dependencies:
-      '@nuxt/kit': 3.9.3(rollup@4.9.4)
+      '@nuxt/kit': 3.9.3(rollup@4.9.6)
       defu: 6.1.4
       jiti: 1.21.0
       pathe: 1.1.2
@@ -9360,11 +9505,11 @@ packages:
       - supports-color
     dev: true
 
-  /nuxt-site-config-kit@2.2.5(rollup@4.9.4)(vue@3.4.15):
+  /nuxt-site-config-kit@2.2.5(rollup@4.9.6)(vue@3.4.15):
     resolution: {integrity: sha512-56KIiPXZosE3xqswQ/jTTne4WLi1xy81lMjm2mCAayh5ZWixx+26wDart9F+5PI3RJ0/txnJKysd2CY2Rcsp7g==}
     dependencies:
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
-      '@nuxt/schema': 3.9.1(rollup@4.9.4)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
+      '@nuxt/schema': 3.9.1(rollup@4.9.6)
       pkg-types: 1.0.3
       site-config-stack: 2.2.5(vue@3.4.15)
       std-env: 3.7.0
@@ -9375,15 +9520,15 @@ packages:
       - vue
     dev: false
 
-  /nuxt-site-config@2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0):
+  /nuxt-site-config@2.2.5(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1):
     resolution: {integrity: sha512-E8qp+/8GRya1Gyt13Vo9MLW36TDJ52YVXJdSEmZAlNBIplAoVSEkizFlppaStKpGmqXXFXmkLuD8rm3jHZsvMQ==}
     dependencies:
-      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
-      '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12)(vue@3.4.15)(webpack@5.89.0)
-      '@nuxt/kit': 3.9.1(rollup@4.9.4)
-      '@nuxt/schema': 3.9.1(rollup@4.9.4)
+      '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
+      '@nuxt/devtools-ui-kit': 1.0.8(@nuxt/devtools@1.0.8)(@vue/compiler-core@3.4.15)(axios@1.6.5)(nuxt@3.10.0)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12)(vue@3.4.15)(webpack@5.90.1)
+      '@nuxt/kit': 3.9.1(rollup@4.9.6)
+      '@nuxt/schema': 3.9.1(rollup@4.9.6)
       floating-vue: 2.0.0-beta.24(@nuxt/kit@3.9.1)(vue@3.4.15)
-      nuxt-site-config-kit: 2.2.5(rollup@4.9.4)(vue@3.4.15)
+      nuxt-site-config-kit: 2.2.5(rollup@4.9.6)(vue@3.4.15)
       pathe: 1.1.2
       pkg-types: 1.0.3
       shiki-es: 0.14.0
@@ -9415,7 +9560,7 @@ packages:
       - webpack
     dev: false
 
-  /nuxt@3.10.0(rollup@4.9.4)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27):
+  /nuxt@3.10.0(rollup@4.9.6)(typescript@5.2.2)(vite@5.0.12)(vue-tsc@1.8.27):
     resolution: {integrity: sha512-E9GWyrzTvkoHoJOT847EASEl8KcGDF1twcBgUzDMuNIx+llZ14F+q+XbTjHzYM/o2hqHTer0lLt2RUn5wsBLQQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -9429,12 +9574,12 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.0.8(nuxt@3.10.0)(rollup@4.9.4)(vite@5.0.12)
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
-      '@nuxt/schema': 3.10.0(rollup@4.9.4)
-      '@nuxt/telemetry': 2.5.3(rollup@4.9.4)
+      '@nuxt/devtools': 1.0.8(nuxt@3.10.0)(rollup@4.9.6)(vite@5.0.12)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
+      '@nuxt/schema': 3.10.0(rollup@4.9.6)
+      '@nuxt/telemetry': 2.5.3(rollup@4.9.6)
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.10.0(rollup@4.9.4)(typescript@5.2.2)(vue-tsc@1.8.27)(vue@3.4.15)
+      '@nuxt/vite-builder': 3.10.0(rollup@4.9.6)(typescript@5.2.2)(vue-tsc@1.8.27)(vue@3.4.15)
       '@unhead/dom': 1.8.10
       '@unhead/ssr': 1.8.10
       '@unhead/vue': 1.8.10(vue@3.4.15)
@@ -9475,9 +9620,9 @@ packages:
       uncrypto: 0.1.3
       unctx: 2.3.1
       unenv: 1.9.0
-      unimport: 3.7.1(rollup@4.9.4)
+      unimport: 3.7.1(rollup@4.9.6)
       unplugin: 1.6.0
-      unplugin-vue-router: 0.7.0(rollup@4.9.4)(vue-router@4.2.5)(vue@3.4.15)
+      unplugin-vue-router: 0.7.0(rollup@4.9.6)(vue-router@4.2.5)(vue@3.4.15)
       untyped: 1.4.2
       vue: 3.4.15(typescript@5.2.2)
       vue-bundle-renderer: 2.0.0
@@ -10782,6 +10927,22 @@ packages:
       source-map: 0.7.4
       yargs: 17.7.2
 
+  /rollup-plugin-visualizer@5.12.0(rollup@4.9.6):
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      rollup: 4.9.6
+      source-map: 0.7.4
+      yargs: 17.7.2
+
   /rollup@4.9.4:
     resolution: {integrity: sha512-2ztU7pY/lrQyXSCnnoU4ICjT/tCG9cdH3/G25ERqE3Lst6vl2BCM5hL2Nw+sslAvAf+ccKsAq1SkKQALyqhR7g==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -10804,6 +10965,28 @@ packages:
       '@rollup/rollup-win32-x64-msvc': 4.9.4
       fsevents: 2.3.3
 
+  /rollup@4.9.6:
+    resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.9.6
+      '@rollup/rollup-android-arm64': 4.9.6
+      '@rollup/rollup-darwin-arm64': 4.9.6
+      '@rollup/rollup-darwin-x64': 4.9.6
+      '@rollup/rollup-linux-arm-gnueabihf': 4.9.6
+      '@rollup/rollup-linux-arm64-gnu': 4.9.6
+      '@rollup/rollup-linux-arm64-musl': 4.9.6
+      '@rollup/rollup-linux-riscv64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-musl': 4.9.6
+      '@rollup/rollup-win32-arm64-msvc': 4.9.6
+      '@rollup/rollup-win32-ia32-msvc': 4.9.6
+      '@rollup/rollup-win32-x64-msvc': 4.9.6
+      fsevents: 2.3.3
+
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
@@ -11504,7 +11687,7 @@ packages:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
-  /terser-webpack-plugin@5.3.10(webpack@5.89.0):
+  /terser-webpack-plugin@5.3.10(webpack@5.90.1):
     resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -11520,12 +11703,12 @@ packages:
       uglify-js:
         optional: true
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.20
+      '@jridgewell/trace-mapping': 0.3.22
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
-      terser: 5.26.0
-      webpack: 5.89.0
+      terser: 5.27.0
+      webpack: 5.90.1
     dev: false
 
   /terser@5.26.0:
@@ -11538,6 +11721,17 @@ packages:
       commander: 2.20.3
       source-map-support: 0.5.21
 
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.11.3
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: false
+
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
@@ -11876,6 +12070,25 @@ packages:
     transitivePeerDependencies:
       - rollup
 
+  /unimport@3.7.1(rollup@4.9.6):
+    resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      acorn: 8.11.2
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.5
+      mlly: 1.4.2
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      scule: 1.1.1
+      strip-literal: 1.3.0
+      unplugin: 1.6.0
+    transitivePeerDependencies:
+      - rollup
+
   /unique-filename@3.0.0:
     resolution: {integrity: sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -11900,7 +12113,7 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  /unocss@0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.4)(vite@5.0.12):
+  /unocss@0.58.3(@unocss/webpack@0.58.3)(postcss@8.4.33)(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-2rnvghfiIDRQ2cOrmN4P7J7xV2p3yBK+bPAt1aoUxCXcszkLczAnQzh9c7IZ+p70kSVstK45cJTYV6TMzOLF7Q==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -11912,8 +12125,8 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.58.3(rollup@4.9.4)(vite@5.0.12)
-      '@unocss/cli': 0.58.3(rollup@4.9.4)
+      '@unocss/astro': 0.58.3(rollup@4.9.6)(vite@5.0.12)
+      '@unocss/cli': 0.58.3(rollup@4.9.6)
       '@unocss/core': 0.58.3
       '@unocss/extractor-arbitrary-variants': 0.58.3
       '@unocss/postcss': 0.58.3(postcss@8.4.33)
@@ -11931,8 +12144,8 @@ packages:
       '@unocss/transformer-compile-class': 0.58.3
       '@unocss/transformer-directives': 0.58.3
       '@unocss/transformer-variant-group': 0.58.3
-      '@unocss/vite': 0.58.3(rollup@4.9.4)(vite@5.0.12)
-      '@unocss/webpack': 0.58.3(rollup@4.9.4)(webpack@5.89.0)
+      '@unocss/vite': 0.58.3(rollup@4.9.6)(vite@5.0.12)
+      '@unocss/webpack': 0.58.3(rollup@4.9.6)(webpack@5.90.1)
       vite: 5.0.12
     transitivePeerDependencies:
       - postcss
@@ -11940,7 +12153,7 @@ packages:
       - supports-color
     dev: false
 
-  /unplugin-vue-router@0.7.0(rollup@4.9.4)(vue-router@4.2.5)(vue@3.4.15):
+  /unplugin-vue-router@0.7.0(rollup@4.9.6)(vue-router@4.2.5)(vue@3.4.15):
     resolution: {integrity: sha512-ddRreGq0t5vlSB7OMy4e4cfU1w2AwBQCwmvW3oP/0IHQiokzbx4hd3TpwBu3eIAFVuhX2cwNQwp1U32UybTVCw==}
     peerDependencies:
       vue-router: ^4.1.0
@@ -11949,9 +12162,9 @@ packages:
         optional: true
     dependencies:
       '@babel/types': 7.23.6
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
-      '@vue-macros/common': 1.10.0(rollup@4.9.4)(vue@3.4.15)
-      ast-walker-scope: 0.5.0(rollup@4.9.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
+      '@vue-macros/common': 1.10.0(rollup@4.9.6)(vue@3.4.15)
+      ast-walker-scope: 0.5.0(rollup@4.9.6)
       chokidar: 3.5.3
       fast-glob: 3.3.2
       json5: 2.2.3
@@ -12079,6 +12292,17 @@ packages:
       escalade: 3.1.1
       picocolors: 1.0.0
 
+  /update-browserslist-db@1.0.13(browserslist@4.22.3):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.22.3
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: false
+
   /uqr@0.1.2:
     resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
 
@@ -12236,7 +12460,7 @@ packages:
       vscode-uri: 3.0.8
       vue-tsc: 1.8.27(typescript@5.2.2)
 
-  /vite-plugin-inspect@0.8.1(@nuxt/kit@3.10.0)(rollup@4.9.4)(vite@5.0.12):
+  /vite-plugin-inspect@0.8.1(@nuxt/kit@3.10.0)(rollup@4.9.6)(vite@5.0.12):
     resolution: {integrity: sha512-oPBPVGp6tBd5KdY/qY6lrbLXqrbHRG0hZLvEaJfiZ/GQfDB+szRuLHblQh1oi1Hhh8GeLit/50l4xfs2SA+TCA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -12247,8 +12471,8 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.7
-      '@nuxt/kit': 3.10.0(rollup@4.9.4)
-      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
+      '@nuxt/kit': 3.10.0(rollup@4.9.6)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.6)
       debug: 4.3.4
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
@@ -12361,10 +12585,10 @@ packages:
       vitest: 1.2.0(@vitest/ui@1.2.0)(jsdom@23.2.0)
     dev: true
 
-  /vitest-environment-nuxt@1.0.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.4)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15):
+  /vitest-environment-nuxt@1.0.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.6)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15):
     resolution: {integrity: sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==}
     dependencies:
-      '@nuxt/test-utils': 3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.4)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
+      '@nuxt/test-utils': 3.9.0(@testing-library/vue@8.0.1)(@vitest/ui@1.2.0)(@vue/test-utils@2.4.3)(h3@1.10.1)(jsdom@23.2.0)(rollup@4.9.6)(vite@5.0.12)(vitest@1.2.0)(vue-router@4.2.5)(vue@3.4.15)
     transitivePeerDependencies:
       - '@jest/globals'
       - '@testing-library/vue'
@@ -12521,14 +12745,14 @@ packages:
       - supports-color
     dev: false
 
-  /vue-i18n@9.9.0(vue@3.4.15):
-    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
+  /vue-i18n@9.9.1(vue@3.4.15):
+    resolution: {integrity: sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.9.0
-      '@intlify/shared': 9.9.0
+      '@intlify/core-base': 9.9.1
+      '@intlify/shared': 9.9.1
       '@vue/devtools-api': 6.5.1
       vue: 3.4.15(typescript@5.2.2)
     dev: true
@@ -12616,8 +12840,8 @@ packages:
   /webpack-virtual-modules@0.6.1:
     resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
 
-  /webpack@5.89.0:
-    resolution: {integrity: sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==}
+  /webpack@5.90.1:
+    resolution: {integrity: sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -12633,7 +12857,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.11.6
       acorn: 8.11.3
       acorn-import-assertions: 1.9.0(acorn@8.11.3)
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.15.0
       es-module-lexer: 1.4.1
@@ -12647,7 +12871,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.89.0)
+      terser-webpack-plugin: 5.3.10(webpack@5.90.1)
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
