From 1186767d88de9a17e0bb7e0d1085873d7cd8c208 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 19 Aug 2024 18:26:49 +0300
Subject: [PATCH] Move the script sections to the top of the components (#4762)

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/LoadingIcon.vue       |  12 +-
 frontend/src/components/TableSortIcon.vue     |  28 +-
 .../VAudioThumbnail/VAudioThumbnail.vue       |  74 ++---
 .../components/VAudioTrack/VAudioControl.vue  |  66 ++--
 .../components/VAudioTrack/VAudioTrack.vue    | 100 +++---
 .../VAudioTrack/VGlobalAudioTrack.vue         |  62 ++--
 .../src/components/VAudioTrack/VWaveform.vue  | 292 +++++++++---------
 .../VAudioTrack/layouts/VBoxLayout.vue        |  92 +++---
 .../VAudioTrack/layouts/VFullLayout.vue       |  70 ++---
 .../VAudioTrack/layouts/VGlobalLayout.vue     |  50 +--
 .../VAudioTrack/layouts/VRowLayout.vue        | 126 ++++----
 .../components/VBackToSearchResultsLink.vue   |  32 +-
 .../components/VBanner/VAnalyticsNotice.vue   |  34 +-
 frontend/src/components/VBanner/VBanners.vue  |  36 +--
 .../VBanner/VNotificationBanner.vue           |  54 ++--
 .../VBanner/VTranslationStatusBanner.vue      |  42 +--
 frontend/src/components/VBrand/VBrand.vue     |  22 +-
 frontend/src/components/VButton.vue           |  60 ++--
 .../src/components/VCheckbox/VCheckbox.vue    | 120 +++----
 .../VCollectionHeader/VCollectionHeader.vue   | 128 ++++----
 .../components/VContentLink/VContentLink.vue  |  46 +--
 frontend/src/components/VContentPage.vue      |  30 +-
 .../VContentReport/VContentReportButton.vue   |  24 +-
 .../VContentReport/VContentReportPopover.vue  |  60 ++--
 .../components/VContentReport/VDmcaNotice.vue |  48 +--
 .../VContentReport/VReportDescForm.vue        |  40 +--
 .../VContentSwitcher/VSearchTypeButton.vue    |  44 +--
 .../VContentSwitcher/VSearchTypeItem.vue      |  34 +-
 .../VContentSwitcher/VSearchTypePopover.vue   |  50 +--
 .../VContentSwitcher/VSearchTypes.vue         |  74 ++---
 frontend/src/components/VCopyButton.vue       |  38 +--
 .../components/VFilters/VSearchGridFilter.vue |  66 ++--
 frontend/src/components/VFooter/VFooter.vue   |  68 ++--
 frontend/src/components/VFourOhFour.vue       |  76 ++---
 .../VGlobalAudioSection.vue                   |  38 +--
 .../src/components/VHeader/VFilterButton.vue  |  40 +--
 .../VHeader/VFilterIconOrCounter.vue          |  22 +-
 .../src/components/VHeader/VHeaderDesktop.vue |  86 +++---
 .../VHeaderMobile/VContentSettingsButton.vue  |  42 +--
 .../VHeader/VHeaderMobile/VFilterTab.vue      |  28 +-
 .../VHeaderMobile/VSearchBarButton.vue        |  36 +--
 .../VHeaderMobile/VShowResultsButton.vue      |  86 +++---
 frontend/src/components/VHeader/VHomeLink.vue |  44 +--
 .../src/components/VHeader/VLogoButton.vue    |  28 +-
 .../src/components/VHeader/VPageLinks.vue     | 104 +++----
 .../VHeader/VSearchBar/VSearchBar.vue         | 112 +++----
 .../VHeader/VSearchBar/VSearchButton.vue      |  42 +--
 .../VSearchBar/VStandaloneSearchBar.vue       |  70 ++---
 .../src/components/VHeader/VWordPressLink.vue |  36 +--
 frontend/src/components/VHideButton.vue       |  52 ++--
 .../components/VHomeGallery/VHomeGallery.vue  |  92 +++---
 .../components/VIconButton/VIconButton.vue    |  38 +--
 .../components/VInputField/VInputField.vue    |  64 ++--
 frontend/src/components/VItemGroup/VItem.vue  | 126 ++++----
 .../src/components/VItemGroup/VItemGroup.vue  |  42 +--
 frontend/src/components/VLicense/VLicense.vue |  36 +--
 .../components/VLicense/VLicenseElements.vue  |  44 +--
 frontend/src/components/VLoadMore.vue         |  32 +-
 .../components/VLogoLoader/VLogoLoader.vue    |  42 +--
 .../components/VMediaInfo/VByLine/VByLine.vue |  32 +-
 .../VMediaInfo/VByLine/VScroller.vue          |  24 +-
 .../VByLine/VSourceCreatorButton.vue          |  28 +-
 .../VMediaInfo/VCollapsibleTagSection.vue     |  66 ++--
 .../components/VMediaInfo/VCopyLicense.vue    | 114 +++----
 .../components/VMediaInfo/VGetMediaButton.vue |  34 +-
 .../VMediaInfo/VLicenseTabPanel.vue           |  34 +-
 .../src/components/VMediaInfo/VMediaInfo.vue  |  14 +-
 .../components/VMediaInfo/VMediaLicense.vue   |  96 +++---
 .../src/components/VMediaInfo/VMediaReuse.vue |  40 +--
 .../src/components/VMediaInfo/VMediaTags.vue  |  54 ++--
 .../src/components/VMediaInfo/VMetadata.vue   |  86 +++---
 .../components/VMediaInfo/VMetadataValue.vue  |  40 +--
 .../components/VMediaInfo/VRelatedMedia.vue   |  46 +--
 .../VMediaInfo/VSourceProviderTooltip.vue     |  30 +-
 frontend/src/components/VPill.vue             |  16 +-
 .../components/VPopover/VPopoverContent.vue   |  36 +--
 frontend/src/components/VRadio/VRadio.vue     |  44 +--
 .../VRecentSearches/VRecentSearches.vue       | 130 ++++----
 .../VSafeBrowsing/VSafeBrowsing.vue           |  94 +++---
 .../components/VSafetyWall/VSafetyWall.vue    | 110 +++----
 frontend/src/components/VScrollButton.vue     |  42 +--
 frontend/src/components/VScrollableLine.vue   |  90 +++---
 .../VSearchResultsGrid/VAllResultsGrid.vue    |  68 ++--
 .../VSearchResultsGrid/VAudioCollection.vue   |  46 +--
 .../VSearchResultsGrid/VAudioInstructions.vue |  28 +-
 .../VSearchResultsGrid/VAudioResult.vue       |  28 +-
 .../VSearchResultsGrid/VCollectionResults.vue |  66 ++--
 .../VSearchResultsGrid/VImageCollection.vue   |  28 +-
 .../VSearchResultsGrid/VMediaCollection.vue   |  54 ++--
 .../VSearchResultsGrid/VSearchResults.vue     | 108 +++----
 .../src/components/VSearchResultsTitle.vue    |  28 +-
 .../src/components/VSingleResultControls.vue  |  32 +-
 .../VSkeleton/VAudioTrackSkeleton.vue         |  26 +-
 frontend/src/components/VSkeleton/VBone.vue   |   8 +-
 .../components/VSkeleton/VGridSkeleton.vue    |  58 ++--
 frontend/src/components/VSketchFabViewer.vue  |  32 +-
 .../src/components/VSkipToContentButton.vue   |  22 +-
 frontend/src/components/VSnackbar.vue         |  36 +--
 frontend/src/components/VSourcesTable.vue     | 176 +++++------
 frontend/src/components/VTabs/VTab.vue        |  40 +--
 frontend/src/components/VTabs/VTabPanel.vue   |  28 +-
 frontend/src/components/VTabs/VTabs.vue       |  28 +-
 frontend/src/components/VTag/VTag.vue         |  22 +-
 frontend/src/components/VTooltip/VTooltip.vue |  80 ++---
 frontend/src/pages/search/model-3d.vue        |   8 +-
 frontend/src/pages/search/video.vue           |   8 +-
 packages/js/eslint-plugin/src/configs/vue.ts  |   2 +-
 107 files changed, 2970 insertions(+), 2970 deletions(-)

diff --git a/frontend/src/components/LoadingIcon.vue b/frontend/src/components/LoadingIcon.vue
index 5bb4afdaf4a..1b413aa7561 100644
--- a/frontend/src/components/LoadingIcon.vue
+++ b/frontend/src/components/LoadingIcon.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "LoadingIcon",
+}
+</script>
+
 <template>
   <div class="lds-ring" data-testid="lds-ring">
     <div />
@@ -7,12 +13,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  name: "LoadingIcon",
-}
-</script>
-
 <style scoped>
 .lds-ring {
   display: inline-block;
diff --git a/frontend/src/components/TableSortIcon.vue b/frontend/src/components/TableSortIcon.vue
index f8383651774..2ed89da6418 100644
--- a/frontend/src/components/TableSortIcon.vue
+++ b/frontend/src/components/TableSortIcon.vue
@@ -1,3 +1,17 @@
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "TableSortIcon",
+  props: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
+  },
+})
+</script>
+
 <template>
   <div class="flex flex-col" :class="[active ? 'text-default' : 'text-gray']">
     <svg
@@ -23,17 +37,3 @@
     </svg>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "TableSortIcon",
-  props: {
-    active: {
-      type: Boolean,
-      required: true,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue
index c1aa85a0e8a..85dbd97fe20 100644
--- a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue
+++ b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue
@@ -1,40 +1,3 @@
-<template>
-  <!-- Should be wrapped by a fixed-width parent -->
-  <div
-    class="relative h-0 w-full overflow-hidden bg-complementary pt-full"
-    :title="helpText"
-  >
-    <!-- Programmatic thumbnail -->
-    <svg
-      class="absolute inset-0"
-      :class="{ hidden: shouldBlur && isOk }"
-      :viewBox="`0 0 ${canvasSize} ${canvasSize}`"
-    >
-      <template v-for="i in dotCount">
-        <circle
-          v-for="j in dotCount"
-          :key="`${i}-${j}`"
-          class="fill-gray-12"
-          :cx="offset(j)"
-          :cy="offset(i)"
-          :r="radius(i, j)"
-        />
-      </template>
-    </svg>
-
-    <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">
-      <img
-        ref="imgEl"
-        class="h-full w-full overflow-clip object-cover object-center duration-200 motion-safe:transition-[filter,transform]"
-        :class="{ 'scale-150 blur-image': shouldBlur }"
-        :src="audio.thumbnail"
-        :alt="helpText"
-        @load="handleLoad"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -125,3 +88,40 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Should be wrapped by a fixed-width parent -->
+  <div
+    class="relative h-0 w-full overflow-hidden bg-complementary pt-full"
+    :title="helpText"
+  >
+    <!-- Programmatic thumbnail -->
+    <svg
+      class="absolute inset-0"
+      :class="{ hidden: shouldBlur && isOk }"
+      :viewBox="`0 0 ${canvasSize} ${canvasSize}`"
+    >
+      <template v-for="i in dotCount">
+        <circle
+          v-for="j in dotCount"
+          :key="`${i}-${j}`"
+          class="fill-gray-12"
+          :cx="offset(j)"
+          :cy="offset(i)"
+          :r="radius(i, j)"
+        />
+      </template>
+    </svg>
+
+    <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">
+      <img
+        ref="imgEl"
+        class="h-full w-full overflow-clip object-cover object-center duration-200 motion-safe:transition-[filter,transform]"
+        :class="{ 'scale-150 blur-image': shouldBlur }"
+        :src="audio.thumbnail"
+        :alt="helpText"
+        @load="handleLoad"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
index 2bb6777e462..0e3842dc9ae 100644
--- a/frontend/src/components/VAudioTrack/VAudioControl.vue
+++ b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -1,36 +1,3 @@
-<template>
-  <VIconButton
-    :tabindex="isTabbable ? 0 : -1"
-    class="audio-control"
-    :size="buttonSize"
-    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
-    :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
-    :label="$t(label)"
-    :connections="connections"
-    :disabled="!doneHydrating"
-    @click.stop.prevent="handleClick"
-    @mousedown="handleMouseDown"
-  >
-    <template #default>
-      <svg
-        v-if="isLoading"
-        class="loading p-2"
-        :class="`w-${iSize} h-${iSize}`"
-        xmlns="http://www.w3.org/2000/svg"
-        overflow="visible"
-        viewBox="0 0 12 12"
-      >
-        <circle cx="6" cy="6" r="6" vector-effect="non-scaling-stroke" />
-        <path
-          d="m 6 0 a 6 6 0 0 1 6 6"
-          stroke="white"
-          vector-effect="non-scaling-stroke"
-        />
-      </svg>
-    </template>
-  </VIconButton>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -178,6 +145,39 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <VIconButton
+    :tabindex="isTabbable ? 0 : -1"
+    class="audio-control"
+    :size="buttonSize"
+    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
+    :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
+    :label="$t(label)"
+    :connections="connections"
+    :disabled="!doneHydrating"
+    @click.stop.prevent="handleClick"
+    @mousedown="handleMouseDown"
+  >
+    <template #default>
+      <svg
+        v-if="isLoading"
+        class="loading p-2"
+        :class="`w-${iSize} h-${iSize}`"
+        xmlns="http://www.w3.org/2000/svg"
+        overflow="visible"
+        viewBox="0 0 12 12"
+      >
+        <circle cx="6" cy="6" r="6" vector-effect="non-scaling-stroke" />
+        <path
+          d="m 6 0 a 6 6 0 0 1 6 6"
+          stroke="white"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    </template>
+  </VIconButton>
+</template>
+
 <style scoped>
 @keyframes spinAnimation {
   from {
diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index d1855e33e57..b61a5fb9f1b 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -1,53 +1,3 @@
-<template>
-  <!-- eslint-disable vue/use-v-on-exact -->
-  <Component
-    :is="isComposite ? VLink : 'div'"
-    v-bind="containerAttributes"
-    class="audio-track group block overflow-hidden rounded-sm ring-pink-8 hover:no-underline"
-    :aria-label="ariaLabel"
-    :role="isComposite ? 'application' : undefined"
-    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
-    @keydown="handleKeydown"
-    @blur="handleBlur"
-    @mousedown="handleMousedown"
-    @focus="handleFocus"
-  >
-    <Component
-      :is="layoutComponent"
-      :audio="audio"
-      :size="layoutSize"
-      :status="status"
-      :current-time="currentTime"
-    >
-      <template #controller="waveformProps">
-        <VWaveform
-          ref="waveformRef"
-          v-bind="waveformProps"
-          :is-parent-seeking="isSeeking"
-          :peaks="audio.peaks"
-          :audio-id="audio.id"
-          :current-time="currentTime"
-          :duration="duration"
-          :message="message"
-          @seeked="handleSeeked"
-          @toggle-playback="handleToggle"
-          @blur="handleWaveformBlur"
-          @focus="handleWaveformFocus"
-        />
-      </template>
-
-      <template #audio-control="audioControlProps">
-        <VAudioControl
-          ref="audioControlRef"
-          :status="status"
-          v-bind="audioControlProps"
-          @toggle="handleToggle"
-        />
-      </template>
-    </Component>
-  </Component>
-</template>
-
 <script lang="ts">
 import { firstParam, useI18n, useRoute } from "#imports"
 
@@ -607,3 +557,53 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- eslint-disable vue/use-v-on-exact -->
+  <Component
+    :is="isComposite ? VLink : 'div'"
+    v-bind="containerAttributes"
+    class="audio-track group block overflow-hidden rounded-sm ring-pink-8 hover:no-underline"
+    :aria-label="ariaLabel"
+    :role="isComposite ? 'application' : undefined"
+    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
+    @keydown="handleKeydown"
+    @blur="handleBlur"
+    @mousedown="handleMousedown"
+    @focus="handleFocus"
+  >
+    <Component
+      :is="layoutComponent"
+      :audio="audio"
+      :size="layoutSize"
+      :status="status"
+      :current-time="currentTime"
+    >
+      <template #controller="waveformProps">
+        <VWaveform
+          ref="waveformRef"
+          v-bind="waveformProps"
+          :is-parent-seeking="isSeeking"
+          :peaks="audio.peaks"
+          :audio-id="audio.id"
+          :current-time="currentTime"
+          :duration="duration"
+          :message="message"
+          @seeked="handleSeeked"
+          @toggle-playback="handleToggle"
+          @blur="handleWaveformBlur"
+          @focus="handleWaveformFocus"
+        />
+      </template>
+
+      <template #audio-control="audioControlProps">
+        <VAudioControl
+          ref="audioControlRef"
+          :status="status"
+          v-bind="audioControlProps"
+          @toggle="handleToggle"
+        />
+      </template>
+    </Component>
+  </Component>
+</template>
diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
index dccd0b7d9d4..ed0358bf995 100644
--- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="audio-track relative rounded"
-    :aria-label="ariaLabel"
-    role="region"
-  >
-    <VGlobalLayout :audio="audio">
-      <template #controller="waveformProps">
-        <VWaveform
-          v-bind="waveformProps"
-          :peaks="audio.peaks"
-          :audio-id="audio.id"
-          :current-time="currentTime"
-          :duration="duration"
-          :message="message"
-          @seeked="handleSeeked"
-          @toggle-playback="handleToggle"
-        />
-      </template>
-
-      <template #audio-control="audioControlProps">
-        <VAudioControl
-          v-bind="audioControlProps"
-          :status="status"
-          @toggle="handleToggle"
-        />
-      </template>
-    </VGlobalLayout>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
@@ -268,3 +237,34 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div
+    class="audio-track relative rounded"
+    :aria-label="ariaLabel"
+    role="region"
+  >
+    <VGlobalLayout :audio="audio">
+      <template #controller="waveformProps">
+        <VWaveform
+          v-bind="waveformProps"
+          :peaks="audio.peaks"
+          :audio-id="audio.id"
+          :current-time="currentTime"
+          :duration="duration"
+          :message="message"
+          @seeked="handleSeeked"
+          @toggle-playback="handleToggle"
+        />
+      </template>
+
+      <template #audio-control="audioControlProps">
+        <VAudioControl
+          v-bind="audioControlProps"
+          :status="status"
+          @toggle="handleToggle"
+        />
+      </template>
+    </VGlobalLayout>
+  </div>
+</template>
diff --git a/frontend/src/components/VAudioTrack/VWaveform.vue b/frontend/src/components/VAudioTrack/VWaveform.vue
index b194e1a9607..9cc4a9363c5 100644
--- a/frontend/src/components/VAudioTrack/VWaveform.vue
+++ b/frontend/src/components/VAudioTrack/VWaveform.vue
@@ -1,149 +1,3 @@
-<template>
-  <div
-    v-bind="waveformAttributes"
-    ref="el"
-    class="waveform bg-background-var group/waveform relative overflow-hidden text-default focus-visible:outline-none"
-    :style="heightProperties"
-    :tabIndex="isTabbable && isInteractive ? 0 : -1"
-    :aria-disabled="!isInteractive"
-    :aria-label="$t('waveform.label')"
-    v-on="eventHandlers"
-  >
-    <!-- Focus ring -->
-    <svg
-      v-if="isInteractive"
-      class="shadow-ring-1 absolute inset-0 z-20 hidden h-full w-full group-focus/waveform:block"
-      xmlns="http://www.w3.org/2000/svg"
-      :viewBox="viewBox"
-      preserveAspectRatio="none"
-    >
-      <!-- Stroke is calculated from the centre of the path -->
-      <rect
-        v-if="waveformDimens.width && waveformDimens.height"
-        class="stroke-pink-8"
-        x="0.75"
-        y="0.75"
-        :width="waveformDimens.width - 1.5"
-        :height="waveformDimens.height - 1.5"
-        rx="2"
-        fill="none"
-        stroke-width="1.5"
-      />
-      <rect
-        v-if="waveformDimens.width && waveformDimens.height"
-        class="stroke-white"
-        x="2"
-        y="2"
-        :width="waveformDimens.width - 4"
-        :height="waveformDimens.height - 4"
-        fill="none"
-        stroke-width="1"
-        rx="0.75"
-      />
-    </svg>
-
-    <!-- Progress bar -->
-    <svg
-      class="absolute inset-0 h-full w-full"
-      xmlns="http://www.w3.org/2000/svg"
-      :viewBox="viewBox"
-      preserveAspectRatio="none"
-    >
-      <rect
-        v-if="isReady"
-        class="progress-bar"
-        x="0"
-        y="0"
-        :width="progressBarWidth"
-        height="100%"
-      />
-    </svg>
-
-    <!-- Bars -->
-    <svg
-      class="bars absolute bottom-0 w-full"
-      :class="{ 'with-space': showDuration || showTimestamps }"
-      xmlns="http://www.w3.org/2000/svg"
-      :viewBox="viewBox"
-      preserveAspectRatio="none"
-    >
-      <rect
-        v-for="(peak, index) in normalizedPeaks"
-        :key="index"
-        class="origin-bottom transform transition-transform duration-500"
-        :class="[
-          isReady ? 'scale-y-100' : 'scale-y-0',
-          index <= seekIndex ? 'fill-wave-active' : 'fill-wave-inactive',
-        ]"
-        :x="spaceBefore(index)"
-        :y="spaceAbove(index)"
-        :width="barWidth"
-        :height="peak"
-      />
-    </svg>
-
-    <!-- Focus bar -->
-    <div
-      v-if="isInteractive && isSeeking"
-      class="absolute top-0 z-20 hidden h-full flex-col items-center justify-between bg-black group-focus/waveform:flex group-focus:flex"
-      :style="{ width: `${barWidth}px`, left: `${progressBarWidth}px` }"
-    >
-      <div
-        v-for="(classes, name) in {
-          top: ['-translate-y-1/2'],
-          bottom: ['translate-y-1/2'],
-        }"
-        :key="name"
-        class="h-2 w-2 transform rounded-full bg-black"
-        :class="classes"
-      >
-        &nbsp;
-      </div>
-    </div>
-
-    <!-- Timestamps -->
-    <template v-if="isReady">
-      <template v-if="showTimestamps">
-        <div
-          ref="progressTimestampEl"
-          class="progress timestamp z-10 transform"
-          :class="[
-            ...(isProgressTimestampCutoff
-              ? ['bg-background-var']
-              : ['bg-complementary', '-translate-x-full']),
-          ]"
-          :style="progressTimeLeft"
-        >
-          {{ timeFmt(progressTimestamp) }}
-        </div>
-        <div
-          v-if="seekFrac"
-          ref="seekTimestampEl"
-          class="seek timestamp transform"
-          :class="{ '-translate-x-full': !isSeekTimestampCutoff }"
-          :style="seekTimeLeft"
-        >
-          {{ timeFmt(seekTimestamp) }}
-        </div>
-      </template>
-      <div
-        v-if="showDuration"
-        class="duration timestamp bg-background-var right-0"
-      >
-        {{ timeFmt(duration) }}
-      </div>
-    </template>
-
-    <!-- Message overlay -->
-    <div
-      v-else
-      class="loading absolute inset-0 flex items-center justify-center text-xs font-bold"
-    >
-      {{ message }}
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, toRef } from "vue"
 
@@ -563,6 +417,152 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    v-bind="waveformAttributes"
+    ref="el"
+    class="waveform bg-background-var group/waveform relative overflow-hidden text-default focus-visible:outline-none"
+    :style="heightProperties"
+    :tabIndex="isTabbable && isInteractive ? 0 : -1"
+    :aria-disabled="!isInteractive"
+    :aria-label="$t('waveform.label')"
+    v-on="eventHandlers"
+  >
+    <!-- Focus ring -->
+    <svg
+      v-if="isInteractive"
+      class="shadow-ring-1 absolute inset-0 z-20 hidden h-full w-full group-focus/waveform:block"
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="viewBox"
+      preserveAspectRatio="none"
+    >
+      <!-- Stroke is calculated from the centre of the path -->
+      <rect
+        v-if="waveformDimens.width && waveformDimens.height"
+        class="stroke-pink-8"
+        x="0.75"
+        y="0.75"
+        :width="waveformDimens.width - 1.5"
+        :height="waveformDimens.height - 1.5"
+        rx="2"
+        fill="none"
+        stroke-width="1.5"
+      />
+      <rect
+        v-if="waveformDimens.width && waveformDimens.height"
+        class="stroke-white"
+        x="2"
+        y="2"
+        :width="waveformDimens.width - 4"
+        :height="waveformDimens.height - 4"
+        fill="none"
+        stroke-width="1"
+        rx="0.75"
+      />
+    </svg>
+
+    <!-- Progress bar -->
+    <svg
+      class="absolute inset-0 h-full w-full"
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="viewBox"
+      preserveAspectRatio="none"
+    >
+      <rect
+        v-if="isReady"
+        class="progress-bar"
+        x="0"
+        y="0"
+        :width="progressBarWidth"
+        height="100%"
+      />
+    </svg>
+
+    <!-- Bars -->
+    <svg
+      class="bars absolute bottom-0 w-full"
+      :class="{ 'with-space': showDuration || showTimestamps }"
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="viewBox"
+      preserveAspectRatio="none"
+    >
+      <rect
+        v-for="(peak, index) in normalizedPeaks"
+        :key="index"
+        class="origin-bottom transform transition-transform duration-500"
+        :class="[
+          isReady ? 'scale-y-100' : 'scale-y-0',
+          index <= seekIndex ? 'fill-wave-active' : 'fill-wave-inactive',
+        ]"
+        :x="spaceBefore(index)"
+        :y="spaceAbove(index)"
+        :width="barWidth"
+        :height="peak"
+      />
+    </svg>
+
+    <!-- Focus bar -->
+    <div
+      v-if="isInteractive && isSeeking"
+      class="absolute top-0 z-20 hidden h-full flex-col items-center justify-between bg-black group-focus/waveform:flex group-focus:flex"
+      :style="{ width: `${barWidth}px`, left: `${progressBarWidth}px` }"
+    >
+      <div
+        v-for="(classes, name) in {
+          top: ['-translate-y-1/2'],
+          bottom: ['translate-y-1/2'],
+        }"
+        :key="name"
+        class="h-2 w-2 transform rounded-full bg-black"
+        :class="classes"
+      >
+        &nbsp;
+      </div>
+    </div>
+
+    <!-- Timestamps -->
+    <template v-if="isReady">
+      <template v-if="showTimestamps">
+        <div
+          ref="progressTimestampEl"
+          class="progress timestamp z-10 transform"
+          :class="[
+            ...(isProgressTimestampCutoff
+              ? ['bg-background-var']
+              : ['bg-complementary', '-translate-x-full']),
+          ]"
+          :style="progressTimeLeft"
+        >
+          {{ timeFmt(progressTimestamp) }}
+        </div>
+        <div
+          v-if="seekFrac"
+          ref="seekTimestampEl"
+          class="seek timestamp transform"
+          :class="{ '-translate-x-full': !isSeekTimestampCutoff }"
+          :style="seekTimeLeft"
+        >
+          {{ timeFmt(seekTimestamp) }}
+        </div>
+      </template>
+      <div
+        v-if="showDuration"
+        class="duration timestamp bg-background-var right-0"
+      >
+        {{ timeFmt(duration) }}
+      </div>
+    </template>
+
+    <!-- Message overlay -->
+    <div
+      v-else
+      class="loading absolute inset-0 flex items-center justify-center text-xs font-bold"
+    >
+      {{ message }}
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .waveform {
   --v-background-color: var(
diff --git a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
index ba897f91c98..23b94940925 100644
--- a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
@@ -1,3 +1,49 @@
+<script lang="ts">
+import { useI18n } from "#imports"
+
+import { computed, defineComponent, type PropType } from "vue"
+
+import type { AudioDetail } from "~/types/media"
+import type { AudioSize } from "~/constants/audio"
+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 { t } = useI18n({ useScope: "global" })
+
+    const isSmall = computed(() => props.size === "s")
+
+    const categoryLabel = computed(() =>
+      t(`filters.audioCategories.${props.audio.category}`)
+    )
+
+    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
+    return {
+      isSmall,
+      shouldBlur,
+
+      categoryLabel,
+    }
+  },
+})
+</script>
+
 <template>
   <div
     class="box-track group relative h-0 w-full rounded-sm bg-complementary pt-full text-default"
@@ -45,52 +91,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useI18n } from "#imports"
-
-import { computed, defineComponent, type PropType } from "vue"
-
-import type { AudioDetail } from "~/types/media"
-import type { AudioSize } from "~/constants/audio"
-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 { t } = useI18n({ useScope: "global" })
-
-    const isSmall = computed(() => props.size === "s")
-
-    const categoryLabel = computed(() =>
-      t(`filters.audioCategories.${props.audio.category}`)
-    )
-
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
-    return {
-      isSmall,
-      shouldBlur,
-
-      categoryLabel,
-    }
-  },
-})
-</script>
-
 <style scoped>
 :deep(.waveform) {
   @apply h-10 flex-grow;
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
index 254fe5f19f0..9cdee10c094 100644
--- a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="full-track w-full">
-    <div class="relative border-b border-default">
-      <span
-        v-if="currentTime > 0"
-        class="pointer-events-none absolute left-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
-        aria-hidden
-      />
-      <span
-        v-if="status === 'played'"
-        class="pointer-events-none absolute right-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
-        aria-hidden
-      />
-      <div class="md:mx-4 lg:mx-10">
-        <slot name="controller" :features="audioFeatures" :usable-frac="0.8" />
-      </div>
-    </div>
-    <div
-      class="mx-auto grid grid-cols-1 grid-rows-[auto,1fr] gap-y-6 p-6 pb-0 sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6 lg:mb-6 lg:max-w-5xl"
-    >
-      <div
-        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2 sm:mt-1"
-      >
-        <slot name="audio-control" layout="full" size="medium" />
-        <VGetMediaButton
-          :media="audio"
-          media-type="audio"
-          class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
-        />
-      </div>
-      <VMediaInfo :media="audio" class="min-w-0" />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -69,6 +34,41 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div class="full-track w-full">
+    <div class="relative border-b border-default">
+      <span
+        v-if="currentTime > 0"
+        class="pointer-events-none absolute left-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
+        aria-hidden
+      />
+      <span
+        v-if="status === 'played'"
+        class="pointer-events-none absolute right-0 hidden h-full w-4 bg-complementary md:block lg:w-10"
+        aria-hidden
+      />
+      <div class="md:mx-4 lg:mx-10">
+        <slot name="controller" :features="audioFeatures" :usable-frac="0.8" />
+      </div>
+    </div>
+    <div
+      class="mx-auto grid grid-cols-1 grid-rows-[auto,1fr] gap-y-6 p-6 pb-0 sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6 lg:mb-6 lg:max-w-5xl"
+    >
+      <div
+        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2 sm:mt-1"
+      >
+        <slot name="audio-control" layout="full" size="medium" />
+        <VGetMediaButton
+          :media="audio"
+          media-type="audio"
+          class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
+        />
+      </div>
+      <VMediaInfo :media="audio" class="min-w-0" />
+    </div>
+  </div>
+</template>
+
 <style>
 .full-track .waveform {
   @apply h-[185px] rounded-sm;
diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index 9f1835833c8..6ae7744120f 100644
--- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-gray-3 ring-opacity-20"
-  >
-    <div class="h-12 w-12 rounded-ss">
-      <VAudioThumbnail class="rounded-ss" :audio="audio" />
-    </div>
-
-    <div class="flex h-12 items-center justify-between rounded-se bg-default">
-      <VLink
-        :href="`/audio/${audio.id}`"
-        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-default"
-        :class="{ 'blur-text': shouldBlur }"
-      >
-        {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
-      </VLink>
-    </div>
-    <slot
-      name="audio-control"
-      v-bind="{ size: 'medium', layout: 'global' } as const"
-    />
-    <slot name="controller" :usable-frac="1" />
-  </div>
-</template>
-
 <script lang="ts">
 import { toRefs, defineComponent, PropType } from "vue"
 
@@ -56,6 +31,31 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-gray-3 ring-opacity-20"
+  >
+    <div class="h-12 w-12 rounded-ss">
+      <VAudioThumbnail class="rounded-ss" :audio="audio" />
+    </div>
+
+    <div class="flex h-12 items-center justify-between rounded-se bg-default">
+      <VLink
+        :href="`/audio/${audio.id}`"
+        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-default"
+        :class="{ 'blur-text': shouldBlur }"
+      >
+        {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
+      </VLink>
+    </div>
+    <slot
+      name="audio-control"
+      v-bind="{ size: 'medium', layout: 'global' } as const"
+    />
+    <slot name="controller" :usable-frac="1" />
+  </div>
+</template>
+
 <style scoped>
 .global-track .thumbnail {
   @apply h-12 w-12 rounded-ss;
diff --git a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
index fb5168bd1ec..44ebd2dc565 100644
--- a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -1,3 +1,66 @@
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import { timeFmt } from "~/utils/time-fmt"
+import type { AudioDetail } from "~/types/media"
+import { audioFeatures, AudioSize } from "~/constants/audio"
+
+import { useSensitiveMedia } from "~/composables/use-sensitive-media"
+
+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,
+    }
+  },
+})
+</script>
+
 <template>
   <!-- `pages/search/audio` has negative margin `-mx-4` to compensate for this padding. -->
   <article
@@ -96,69 +159,6 @@
   </article>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import { timeFmt } from "~/utils/time-fmt"
-import type { AudioDetail } from "~/types/media"
-import { audioFeatures, AudioSize } from "~/constants/audio"
-
-import { useSensitiveMedia } from "~/composables/use-sensitive-media"
-
-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,
-    }
-  },
-})
-</script>
-
 <style scoped>
 :deep(.audio-control) {
   @apply flex-none rounded-es-sm rounded-ss-sm;
diff --git a/frontend/src/components/VBackToSearchResultsLink.vue b/frontend/src/components/VBackToSearchResultsLink.vue
index 062c3710054..ff8f78bc704 100644
--- a/frontend/src/components/VBackToSearchResultsLink.vue
+++ b/frontend/src/components/VBackToSearchResultsLink.vue
@@ -1,19 +1,3 @@
-<template>
-  <!-- @todo: Separate the absolute container from the link itself. -->
-  <VButton
-    as="VLink"
-    :href="href"
-    has-icon-start
-    variant="transparent-gray"
-    size="small"
-    class="label-bold inline-flex"
-    @mousedown="handleClick"
-  >
-    <VIcon name="chevron-back" :rtl-flip="true" />
-    {{ $t("singleResult.back") }}
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -62,3 +46,19 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- @todo: Separate the absolute container from the link itself. -->
+  <VButton
+    as="VLink"
+    :href="href"
+    has-icon-start
+    variant="transparent-gray"
+    size="small"
+    class="label-bold inline-flex"
+    @mousedown="handleClick"
+  >
+    <VIcon name="chevron-back" :rtl-flip="true" />
+    {{ $t("singleResult.back") }}
+  </VButton>
+</template>
diff --git a/frontend/src/components/VBanner/VAnalyticsNotice.vue b/frontend/src/components/VBanner/VAnalyticsNotice.vue
index 0da2cc9fbbe..64c1c24d61a 100644
--- a/frontend/src/components/VBanner/VAnalyticsNotice.vue
+++ b/frontend/src/components/VBanner/VAnalyticsNotice.vue
@@ -1,20 +1,3 @@
-<template>
-  <VNotificationBanner
-    id="analytics"
-    nature="info"
-    :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")
-        }}</VLink>
-      </template>
-    </i18n-t>
-  </VNotificationBanner>
-</template>
-
 <script lang="ts">
 import { useLocalePath } from "#imports"
 
@@ -41,3 +24,20 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VNotificationBanner
+    id="analytics"
+    nature="info"
+    :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")
+        }}</VLink>
+      </template>
+    </i18n-t>
+  </VNotificationBanner>
+</template>
diff --git a/frontend/src/components/VBanner/VBanners.vue b/frontend/src/components/VBanner/VBanners.vue
index 0faa4671752..41582ecdb84 100644
--- a/frontend/src/components/VBanner/VBanners.vue
+++ b/frontend/src/components/VBanner/VBanners.vue
@@ -1,21 +1,3 @@
-<template>
-  <div>
-    <div v-show="showBanners" class="flex flex-col gap-2 p-2 pb-0">
-      <VAnalyticsNotice
-        v-if="shouldShowAnalyticsBanner"
-        :variant="variant"
-        @close="dismissBanner('analytics')"
-      />
-      <VTranslationStatusBanner
-        v-if="shouldShowTranslationBanner"
-        :variant="variant"
-        :banner-key="translationBannerId"
-        @close="dismissBanner(translationBannerId)"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, useNuxtApp } from "#imports"
 
@@ -81,3 +63,21 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <div v-show="showBanners" class="flex flex-col gap-2 p-2 pb-0">
+      <VAnalyticsNotice
+        v-if="shouldShowAnalyticsBanner"
+        :variant="variant"
+        @close="dismissBanner('analytics')"
+      />
+      <VTranslationStatusBanner
+        v-if="shouldShowTranslationBanner"
+        :variant="variant"
+        :banner-key="translationBannerId"
+        @close="dismissBanner(translationBannerId)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index e9667685314..87315394b48 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -1,30 +1,3 @@
-<template>
-  <section
-    class="flex flex-row items-center gap-2 rounded-sm p-2 lg:p-3"
-    :class="classNames"
-    :data-testid="`banner-${id}`"
-  >
-    <slot name="start">
-      <VIcon :name="nature" :class="iconClassNames" />
-    </slot>
-
-    <p class="caption-regular lg:paragraph-small flex-grow">
-      <slot />
-    </p>
-
-    <slot name="end">
-      <VIconButton
-        :variant="variant === 'dark' ? 'transparent-tx' : 'transparent-gray'"
-        :icon-props="{ name: 'close-small' }"
-        size="small"
-        :label="closeButtonLabel || $t('modal.closeBanner')"
-        :class="closeButtonClassNames"
-        @click="$emit('close')"
-      />
-    </slot>
-  </section>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType, computed } from "vue"
 
@@ -122,3 +95,30 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <section
+    class="flex flex-row items-center gap-2 rounded-sm p-2 lg:p-3"
+    :class="classNames"
+    :data-testid="`banner-${id}`"
+  >
+    <slot name="start">
+      <VIcon :name="nature" :class="iconClassNames" />
+    </slot>
+
+    <p class="caption-regular lg:paragraph-small flex-grow">
+      <slot />
+    </p>
+
+    <slot name="end">
+      <VIconButton
+        :variant="variant === 'dark' ? 'transparent-tx' : 'transparent-gray'"
+        :icon-props="{ name: 'close-small' }"
+        size="small"
+        :label="closeButtonLabel || $t('modal.closeBanner')"
+        :class="closeButtonClassNames"
+        @click="$emit('close')"
+      />
+    </slot>
+  </section>
+</template>
diff --git a/frontend/src/components/VBanner/VTranslationStatusBanner.vue b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
index 13191f4736c..93b5cc3c6c9 100644
--- a/frontend/src/components/VBanner/VTranslationStatusBanner.vue
+++ b/frontend/src/components/VBanner/VTranslationStatusBanner.vue
@@ -1,24 +1,3 @@
-<template>
-  <VNotificationBanner
-    :id="bannerKey"
-    nature="warning"
-    data-testid="banner-translation"
-    :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")
-        }}</VLink>
-      </template>
-      <template #locale>
-        {{ currentLocale.name }}
-      </template>
-    </i18n-t>
-  </VNotificationBanner>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -71,3 +50,24 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VNotificationBanner
+    :id="bannerKey"
+    nature="warning"
+    data-testid="banner-translation"
+    :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")
+        }}</VLink>
+      </template>
+      <template #locale>
+        {{ currentLocale.name }}
+      </template>
+    </i18n-t>
+  </VNotificationBanner>
+</template>
diff --git a/frontend/src/components/VBrand/VBrand.vue b/frontend/src/components/VBrand/VBrand.vue
index 24a53fe7463..2d56bfcad8f 100644
--- a/frontend/src/components/VBrand/VBrand.vue
+++ b/frontend/src/components/VBrand/VBrand.vue
@@ -1,14 +1,3 @@
-<template>
-  <!-- Using `flex` to place two SVGs side by side, centered. -->
-  <span
-    class="flex h-[1em] flex-row items-center gap-x-[0.4em]"
-    aria-hidden="true"
-  >
-    <VSvg class="h-full w-auto" viewBox="0 0 50 42" name="logo" />
-    <VSvg class="h-full w-auto" viewBox="0 0 215 42" name="brand" />
-  </span>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -25,3 +14,14 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Using `flex` to place two SVGs side by side, centered. -->
+  <span
+    class="flex h-[1em] flex-row items-center gap-x-[0.4em]"
+    aria-hidden="true"
+  >
+    <VSvg class="h-full w-auto" viewBox="0 0 50 42" name="logo" />
+    <VSvg class="h-full w-auto" viewBox="0 0 215 42" name="brand" />
+  </span>
+</template>
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index ee905cfd15a..93f4e6a8c81 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -1,33 +1,3 @@
-<template>
-  <Component
-    :is="as"
-    :type="typeAttribute"
-    class="group/button button flex appearance-none items-center justify-center rounded-sm no-underline"
-    :class="[
-      variantClass,
-      connectionStyles,
-      size,
-      {
-        'icon-only': iconOnly,
-        'icon-start': hasIconStart,
-        'icon-end': hasIconEnd,
-        border: !isPlainDangerous,
-        'focus-visible:outline-tx': isPlainDangerous,
-        'focus-slim-filled': isFocusSlimFilled,
-        'focus-slim-tx': isFocusSlimTx,
-      },
-    ]"
-    :aria-pressed="pressed"
-    :aria-disabled="ariaDisabled"
-    :disabled="disabledAttribute"
-  >
-    <!--
-      @slot The content of the button
-    -->
-    <slot />
-  </Component>
-</template>
-
 <script lang="ts">
 import { defineComponent, watch, computed, PropType } from "vue"
 
@@ -271,6 +241,36 @@ const VButton = defineComponent({
 export default VButton
 </script>
 
+<template>
+  <Component
+    :is="as"
+    :type="typeAttribute"
+    class="group/button button flex appearance-none items-center justify-center rounded-sm no-underline"
+    :class="[
+      variantClass,
+      connectionStyles,
+      size,
+      {
+        'icon-only': iconOnly,
+        'icon-start': hasIconStart,
+        'icon-end': hasIconEnd,
+        border: !isPlainDangerous,
+        'focus-visible:outline-tx': isPlainDangerous,
+        'focus-slim-filled': isFocusSlimFilled,
+        'focus-slim-tx': isFocusSlimTx,
+      },
+    ]"
+    :aria-pressed="pressed"
+    :aria-disabled="ariaDisabled"
+    :disabled="disabledAttribute"
+  >
+    <!--
+      @slot The content of the button
+    -->
+    <slot />
+  </Component>
+</template>
+
 <style scoped>
 .button[disabled="disabled"],
 .button[aria-disabled="true"] {
diff --git a/frontend/src/components/VCheckbox/VCheckbox.vue b/frontend/src/components/VCheckbox/VCheckbox.vue
index 87b39808724..8dc34f8b18a 100644
--- a/frontend/src/components/VCheckbox/VCheckbox.vue
+++ b/frontend/src/components/VCheckbox/VCheckbox.vue
@@ -1,63 +1,3 @@
-<template>
-  <label
-    :for="id"
-    class="relative flex text-sm leading-5"
-    :class="labelClasses"
-  >
-    <span class="relative block">
-      <!--
-      The checkbox focus style is a slight variation on the `focus-slim-tx` style.
-      Because it becomes filled when checked, it also needs the
-      `checked:focus-visible:border-bg-ring` class.
-      -->
-      <input
-        :id="id"
-        type="checkbox"
-        class="me-3 block appearance-none border border-tertiary bg-default transition-colors duration-100 checked:bg-tertiary disabled:border-disabled disabled:bg-secondary checked:disabled:border-disabled checked:disabled:bg-disabled"
-        :class="
-          isSwitch
-            ? ['h-4.5', 'w-9', 'rounded-full', 'focus-slim-offset']
-            : [
-                'h-5',
-                'w-5',
-                'rounded-sm',
-                'focus-slim-tx',
-                'checked:focus-visible:border-bg-ring',
-              ]
-        "
-        v-bind="inputAttrs"
-        :disabled="disabled ? true : undefined"
-        @click="onChange"
-      />
-
-      <!-- Knob, for when `ifSwitch` is `true` -->
-      <span
-        v-if="isSwitch"
-        class="absolute left-0.75 top-0.75 block h-3 w-3 rounded-full transition-transform duration-100"
-        :class="
-          localCheckedState
-            ? ['bg-default', 'translate-x-[1.125rem]']
-            : disabled
-              ? ['bg-disabled']
-              : ['bg-tertiary']
-        "
-        aria-hidden="true"
-      />
-
-      <!-- Checkmark, for when `ifSwitch` is `false` -->
-      <VIcon
-        v-else
-        v-show="localCheckedState"
-        class="pointer-events-none absolute inset-0 transform text-over-dark"
-        name="check"
-        :size="5"
-      />
-    </span>
-
-    <!--  @slot The checkbox label  --><slot />
-  </label>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from "vue"
 
@@ -186,3 +126,63 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <label
+    :for="id"
+    class="relative flex text-sm leading-5"
+    :class="labelClasses"
+  >
+    <span class="relative block">
+      <!--
+      The checkbox focus style is a slight variation on the `focus-slim-tx` style.
+      Because it becomes filled when checked, it also needs the
+      `checked:focus-visible:border-bg-ring` class.
+      -->
+      <input
+        :id="id"
+        type="checkbox"
+        class="me-3 block appearance-none border border-tertiary bg-default transition-colors duration-100 checked:bg-tertiary disabled:border-disabled disabled:bg-secondary checked:disabled:border-disabled checked:disabled:bg-disabled"
+        :class="
+          isSwitch
+            ? ['h-4.5', 'w-9', 'rounded-full', 'focus-slim-offset']
+            : [
+                'h-5',
+                'w-5',
+                'rounded-sm',
+                'focus-slim-tx',
+                'checked:focus-visible:border-bg-ring',
+              ]
+        "
+        v-bind="inputAttrs"
+        :disabled="disabled ? true : undefined"
+        @click="onChange"
+      />
+
+      <!-- Knob, for when `ifSwitch` is `true` -->
+      <span
+        v-if="isSwitch"
+        class="absolute left-0.75 top-0.75 block h-3 w-3 rounded-full transition-transform duration-100"
+        :class="
+          localCheckedState
+            ? ['bg-default', 'translate-x-[1.125rem]']
+            : disabled
+              ? ['bg-disabled']
+              : ['bg-tertiary']
+        "
+        aria-hidden="true"
+      />
+
+      <!-- Checkmark, for when `ifSwitch` is `false` -->
+      <VIcon
+        v-else
+        v-show="localCheckedState"
+        class="pointer-events-none absolute inset-0 transform text-over-dark"
+        name="check"
+        :size="5"
+      />
+    </span>
+
+    <!--  @slot The checkbox label  --><slot />
+  </label>
+</template>
diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
index 11f7e079b78..825c366662c 100644
--- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
+++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -1,67 +1,3 @@
-<template>
-  <div
-    class="collection-header grid gap-2 sm:grid-cols-[1fr,auto]"
-    :class="{ 'no-link': !showCollectionExternalLink }"
-  >
-    <h1 class="title flex flex-col gap-2 sm:flex-row">
-      <VIcon
-        :name="iconName"
-        :title="collection"
-        :size="10"
-        class="icon hidden sm:flex"
-      />
-      <span class="label-regular flex text-secondary sm:hidden">{{
-        $t(`collection.heading.${collection}`)
-      }}</span>
-      <span class="text-3xl font-semibold leading-snug sm:text-6xl">{{
-        title
-      }}</span>
-    </h1>
-    <VButton
-      v-if="showCollectionExternalLink"
-      as="VLink"
-      variant="filled-dark"
-      size="medium"
-      class="link label-bold mt-1 !w-full"
-      has-icon-end
-      show-external-icon
-      :external-icon-size="6"
-      :href="url"
-      @click="sendAnalyticsEvent"
-      >{{ $t(`collection.link.${collection}`) }}</VButton
-    >
-    <div
-      class="results mt-6 flex w-full min-w-0 flex-col items-start gap-1 sm:mt-0 sm:flex-row sm:items-center"
-    >
-      <p
-        class="label-regular w-max text-secondary sm:whitespace-nowrap"
-        :class="{ 'pb-2 sm:pb-0': collection !== 'creator' }"
-      >
-        {{ resultsLabel }}
-      </p>
-      <VScrollableLine
-        v-if="collection === 'creator'"
-        class="-ms-2 -mt-1.5px h-8 w-[calc(100%+theme(space.4))] sm:ms-0"
-      >
-        <VButton
-          as="VLink"
-          size="disabled"
-          variant="transparent-gray"
-          class="label-bold m-1.5px h-8 w-max gap-x-1 whitespace-nowrap p-1"
-          :href="sourceCollectionLink"
-          has-icon-start
-          ><VIcon
-            name="institution"
-            :title="$t('collection.link.source')"
-          /><span class="w-max whitespace-nowrap">{{
-            source.name
-          }}</span></VButton
-        >
-      </VScrollableLine>
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
@@ -213,6 +149,70 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    class="collection-header grid gap-2 sm:grid-cols-[1fr,auto]"
+    :class="{ 'no-link': !showCollectionExternalLink }"
+  >
+    <h1 class="title flex flex-col gap-2 sm:flex-row">
+      <VIcon
+        :name="iconName"
+        :title="collection"
+        :size="10"
+        class="icon hidden sm:flex"
+      />
+      <span class="label-regular flex text-secondary sm:hidden">{{
+        $t(`collection.heading.${collection}`)
+      }}</span>
+      <span class="text-3xl font-semibold leading-snug sm:text-6xl">{{
+        title
+      }}</span>
+    </h1>
+    <VButton
+      v-if="showCollectionExternalLink"
+      as="VLink"
+      variant="filled-dark"
+      size="medium"
+      class="link label-bold mt-1 !w-full"
+      has-icon-end
+      show-external-icon
+      :external-icon-size="6"
+      :href="url"
+      @click="sendAnalyticsEvent"
+      >{{ $t(`collection.link.${collection}`) }}</VButton
+    >
+    <div
+      class="results mt-6 flex w-full min-w-0 flex-col items-start gap-1 sm:mt-0 sm:flex-row sm:items-center"
+    >
+      <p
+        class="label-regular w-max text-secondary sm:whitespace-nowrap"
+        :class="{ 'pb-2 sm:pb-0': collection !== 'creator' }"
+      >
+        {{ resultsLabel }}
+      </p>
+      <VScrollableLine
+        v-if="collection === 'creator'"
+        class="-ms-2 -mt-1.5px h-8 w-[calc(100%+theme(space.4))] sm:ms-0"
+      >
+        <VButton
+          as="VLink"
+          size="disabled"
+          variant="transparent-gray"
+          class="label-bold m-1.5px h-8 w-max gap-x-1 whitespace-nowrap p-1"
+          :href="sourceCollectionLink"
+          has-icon-start
+          ><VIcon
+            name="institution"
+            :title="$t('collection.link.source')"
+          /><span class="w-max whitespace-nowrap">{{
+            source.name
+          }}</span></VButton
+        >
+      </VScrollableLine>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .collection-header {
   grid-template-areas: "title" "link" "results";
diff --git a/frontend/src/components/VContentLink/VContentLink.vue b/frontend/src/components/VContentLink/VContentLink.vue
index 26d52659357..f708b52fcda 100644
--- a/frontend/src/components/VContentLink/VContentLink.vue
+++ b/frontend/src/components/VContentLink/VContentLink.vue
@@ -1,26 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    :href="to"
-    :aria-label="resultsAriaLabel"
-    variant="bordered-gray"
-    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)"
-    @mousedown="handleClick"
-  >
-    <VIcon :name="mediaType" />
-    <p class="label-bold sm:description-bold mt-1 sm:mt-0">
-      {{ $t(`searchType.${mediaType}`) }}
-    </p>
-    <span
-      class="label-regular sm:description-regular text-secondary group-hover/button:text-default sm:ms-auto"
-      >{{ resultsCountLabel }}</span
-    >
-  </VButton>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -109,3 +86,26 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    :href="to"
+    :aria-label="resultsAriaLabel"
+    variant="bordered-gray"
+    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)"
+    @mousedown="handleClick"
+  >
+    <VIcon :name="mediaType" />
+    <p class="label-bold sm:description-bold mt-1 sm:mt-0">
+      {{ $t(`searchType.${mediaType}`) }}
+    </p>
+    <span
+      class="label-regular sm:description-regular text-secondary group-hover/button:text-default sm:ms-auto"
+      >{{ resultsCountLabel }}</span
+    >
+  </VButton>
+</template>
diff --git a/frontend/src/components/VContentPage.vue b/frontend/src/components/VContentPage.vue
index 68a8b6cd260..2cb907e2f86 100644
--- a/frontend/src/components/VContentPage.vue
+++ b/frontend/src/components/VContentPage.vue
@@ -1,18 +1,3 @@
-<template>
-  <main
-    :id="skipToContentTargetId"
-    tabindex="-1"
-    class="flex-grow pt-5 md:pt-10"
-    dir="ltr"
-  >
-    <div
-      class="prose-h1:text-bold prose-body:text-default prose-sm mx-auto mb-10 max-w-none px-6 text-default md:prose-base prose-headings:font-bold prose-headings:text-default prose-h1:text-4xl prose-h2:text-2xl prose-h2:font-semibold prose-h3:text-2xl prose-h3:font-semibold prose-a:font-medium md:max-w-4xl md:prose-h1:mb-10 md:prose-h2:mt-10 md:prose-h3:mt-10 lg:mb-30 lg:px-0 lg:prose-headings:text-3xl lg:prose-h1:text-6xl xl:max-w-5xl"
-    >
-      <slot default />
-    </div>
-  </main>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -27,3 +12,18 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <main
+    :id="skipToContentTargetId"
+    tabindex="-1"
+    class="flex-grow pt-5 md:pt-10"
+    dir="ltr"
+  >
+    <div
+      class="prose-h1:text-bold prose-body:text-default prose-sm mx-auto mb-10 max-w-none px-6 text-default md:prose-base prose-headings:font-bold prose-headings:text-default prose-h1:text-4xl prose-h2:text-2xl prose-h2:font-semibold prose-h3:text-2xl prose-h3:font-semibold prose-a:font-medium md:max-w-4xl md:prose-h1:mb-10 md:prose-h2:mt-10 md:prose-h3:mt-10 lg:mb-30 lg:px-0 lg:prose-headings:text-3xl lg:prose-h1:text-6xl xl:max-w-5xl"
+    >
+      <slot default />
+    </div>
+  </main>
+</template>
diff --git a/frontend/src/components/VContentReport/VContentReportButton.vue b/frontend/src/components/VContentReport/VContentReportButton.vue
index cfb76653bf0..33582ccd5da 100644
--- a/frontend/src/components/VContentReport/VContentReportButton.vue
+++ b/frontend/src/components/VContentReport/VContentReportButton.vue
@@ -1,3 +1,15 @@
+<script>
+import { defineComponent } from "vue"
+
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VButton from "~/components/VButton.vue"
+
+export default defineComponent({
+  name: "VContentReportButton",
+  components: { VButton, VIcon },
+})
+</script>
+
 <template>
   <VButton
     variant="transparent-gray"
@@ -12,15 +24,3 @@
     <VIcon name="flag" />
   </VButton>
 </template>
-
-<script>
-import { defineComponent } from "vue"
-
-import VIcon from "~/components/VIcon/VIcon.vue"
-import VButton from "~/components/VButton.vue"
-
-export default defineComponent({
-  name: "VContentReportButton",
-  components: { VButton, VIcon },
-})
-</script>
diff --git a/frontend/src/components/VContentReport/VContentReportPopover.vue b/frontend/src/components/VContentReport/VContentReportPopover.vue
index e664e5fb7c5..4fe32d18dfa 100644
--- a/frontend/src/components/VContentReport/VContentReportPopover.vue
+++ b/frontend/src/components/VContentReport/VContentReportPopover.vue
@@ -1,3 +1,33 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+import type { AudioDetail, ImageDetail } from "~/types/media"
+
+import VContentReportButton from "~/components/VContentReport/VContentReportButton.vue"
+import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
+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,
+    },
+  },
+})
+</script>
+
 <template>
   <VPopover
     ref="popoverEl"
@@ -28,33 +58,3 @@
     </template>
   </VPopover>
 </template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import type { AudioDetail, ImageDetail } from "~/types/media"
-
-import VContentReportButton from "~/components/VContentReport/VContentReportButton.vue"
-import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
-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,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/components/VContentReport/VDmcaNotice.vue b/frontend/src/components/VContentReport/VDmcaNotice.vue
index c50d495e68f..6f44105cd96 100644
--- a/frontend/src/components/VContentReport/VDmcaNotice.vue
+++ b/frontend/src/components/VContentReport/VDmcaNotice.vue
@@ -1,27 +1,3 @@
-<template>
-  <i18n-t
-    scope="global"
-    class="dmca-notice"
-    keypath="mediaDetails.contentReport.form.dmca.note"
-    tag="p"
-  >
-    <template #form>
-      <VLink
-        :aria-label="$t('mediaDetails.contentReport.form.dmca.form')"
-        :href="DMCA_FORM_URL"
-        class="text-link hover:underline"
-        @click="$emit('click')"
-        >{{ $t("mediaDetails.contentReport.form.dmca.form") }}</VLink
-      >
-    </template>
-    <template #source>
-      <VLink :href="foreignLandingUrl" class="text-link hover:underline">{{
-        provider
-      }}</VLink>
-    </template>
-  </i18n-t>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -59,3 +35,27 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <i18n-t
+    scope="global"
+    class="dmca-notice"
+    keypath="mediaDetails.contentReport.form.dmca.note"
+    tag="p"
+  >
+    <template #form>
+      <VLink
+        :aria-label="$t('mediaDetails.contentReport.form.dmca.form')"
+        :href="DMCA_FORM_URL"
+        class="text-link hover:underline"
+        @click="$emit('click')"
+        >{{ $t("mediaDetails.contentReport.form.dmca.form") }}</VLink
+      >
+    </template>
+    <template #source>
+      <VLink :href="foreignLandingUrl" class="text-link hover:underline">{{
+        provider
+      }}</VLink>
+    </template>
+  </i18n-t>
+</template>
diff --git a/frontend/src/components/VContentReport/VReportDescForm.vue b/frontend/src/components/VContentReport/VReportDescForm.vue
index ddc03e17cb5..c8150edbd51 100644
--- a/frontend/src/components/VContentReport/VReportDescForm.vue
+++ b/frontend/src/components/VContentReport/VReportDescForm.vue
@@ -1,23 +1,3 @@
-<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>
-    <textarea
-      id="description"
-      v-model="text"
-      class="mt-2 h-20 w-full border border-default p-2 placeholder-gray-8"
-      :placeholder="$t(`mediaDetails.contentReport.form.${reason}.placeholder`)"
-      :required="isRequired"
-      :minlength="isRequired ? 20 : 0"
-      maxlength="500"
-    />
-  </label>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -64,3 +44,23 @@ export default defineComponent({
   },
 })
 </script>
+
+<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>
+    <textarea
+      id="description"
+      v-model="text"
+      class="mt-2 h-20 w-full border border-default p-2 placeholder-gray-8"
+      :placeholder="$t(`mediaDetails.contentReport.form.${reason}.placeholder`)"
+      :required="isRequired"
+      :minlength="isRequired ? 20 : 0"
+      maxlength="500"
+    />
+  </label>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
index 240dcbf4af8..228ae4bf5d7 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -1,25 +1,3 @@
-<template>
-  <VButton
-    class="min-w-12 gap-x-2"
-    :class="{ '!px-3': showLabel }"
-    variant="bordered-white"
-    :icon-only="!showLabel"
-    :disabled="!doneHydrating"
-    size="large"
-    :aria-label="$t('searchType.selectLabel', { type: label })"
-    @click="$emit('click')"
-  >
-    <VIcon :name="searchType" />
-    <template v-if="showLabel">
-      <span
-        class="label-regular block max-w-30 flex-none truncate text-start"
-        >{{ label }}</span
-      >
-      <VIcon name="caret-down" />
-    </template>
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -78,3 +56,25 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    class="min-w-12 gap-x-2"
+    :class="{ '!px-3': showLabel }"
+    variant="bordered-white"
+    :icon-only="!showLabel"
+    :disabled="!doneHydrating"
+    size="large"
+    :aria-label="$t('searchType.selectLabel', { type: label })"
+    @click="$emit('click')"
+  >
+    <VIcon :name="searchType" />
+    <template v-if="showLabel">
+      <span
+        class="label-regular block max-w-30 flex-none truncate text-start"
+        >{{ label }}</span
+      >
+      <VIcon name="caret-down" />
+    </template>
+  </VButton>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
index 806b98f0996..ef2f6f1837a 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -1,20 +1,3 @@
-<template>
-  <VItem
-    :selected="selected"
-    :is-first="isFirst"
-    :as="component"
-    class="label-regular"
-    v-bind="{ href }"
-    @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")
-    }}</VPill>
-  </VItem>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -105,3 +88,20 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VItem
+    :selected="selected"
+    :is-first="isFirst"
+    :as="component"
+    class="label-regular"
+    v-bind="{ href }"
+    @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")
+    }}</VPill>
+  </VItem>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index 89838ffe5c3..f9d914234a5 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -1,28 +1,3 @@
-<template>
-  <VPopover
-    ref="contentMenuPopover"
-    :label="$t('searchType.label')"
-    placement="bottom-end"
-    :clippable="true"
-    :trap-focus="false"
-  >
-    <template #trigger="{ a11yProps }">
-      <VSearchTypeButton
-        id="search-type-button"
-        v-bind="{ ...a11yProps, ...searchTypeProps }"
-        :show-label="showLabel"
-        aria-controls="content-switcher-popover"
-      />
-    </template>
-    <VSearchTypes
-      id="content-switcher-popover"
-      size="small"
-      :use-links="placement === 'header'"
-      @select="handleSelect"
-    />
-  </VPopover>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue"
 
@@ -76,3 +51,28 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VPopover
+    ref="contentMenuPopover"
+    :label="$t('searchType.label')"
+    placement="bottom-end"
+    :clippable="true"
+    :trap-focus="false"
+  >
+    <template #trigger="{ a11yProps }">
+      <VSearchTypeButton
+        id="search-type-button"
+        v-bind="{ ...a11yProps, ...searchTypeProps }"
+        :show-label="showLabel"
+        aria-controls="content-switcher-popover"
+      />
+    </template>
+    <VSearchTypes
+      id="content-switcher-popover"
+      size="small"
+      :use-links="placement === 'header'"
+      @select="handleSelect"
+    />
+  </VPopover>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
index d457f813214..567b97d8b70 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -1,40 +1,3 @@
-<template>
-  <VItemGroup
-    direction="vertical"
-    :size="size"
-    :bordered="bordered"
-    type="radiogroup"
-  >
-    <div
-      v-for="(category, index) in contentTypeGroups"
-      :key="category.heading"
-      class="flex flex-col"
-      :class="{
-        'border-t border-default bg-surface': index > 0 && !bordered,
-        'w-66 gap-1 py-2': size === 'small',
-      }"
-    >
-      <h4
-        v-if="index !== 0"
-        :class="bordered ? 'ps-0' : 'ps-6'"
-        class="category pb-4 pt-6"
-      >
-        {{ $t(`searchType.${category.heading}`) }}
-      </h4>
-      <VSearchTypeItem
-        v-for="(item, idx) in category.items"
-        :key="item"
-        :item="item"
-        :is-first="index === 0 && idx === 0"
-        :icon="content.icons[item]"
-        :use-links="useLinks"
-        :selected="isActive(item)"
-        @click="selectItem(item)"
-      />
-    </div>
-  </VItemGroup>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
@@ -112,3 +75,40 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VItemGroup
+    direction="vertical"
+    :size="size"
+    :bordered="bordered"
+    type="radiogroup"
+  >
+    <div
+      v-for="(category, index) in contentTypeGroups"
+      :key="category.heading"
+      class="flex flex-col"
+      :class="{
+        'border-t border-default bg-surface': index > 0 && !bordered,
+        'w-66 gap-1 py-2': size === 'small',
+      }"
+    >
+      <h4
+        v-if="index !== 0"
+        :class="bordered ? 'ps-0' : 'ps-6'"
+        class="category pb-4 pt-6"
+      >
+        {{ $t(`searchType.${category.heading}`) }}
+      </h4>
+      <VSearchTypeItem
+        v-for="(item, idx) in category.items"
+        :key="item"
+        :item="item"
+        :is-first="index === 0 && idx === 0"
+        :icon="content.icons[item]"
+        :use-links="useLinks"
+        :selected="isActive(item)"
+        @click="selectItem(item)"
+      />
+    </div>
+  </VItemGroup>
+</template>
diff --git a/frontend/src/components/VCopyButton.vue b/frontend/src/components/VCopyButton.vue
index f2e5876b4ba..4f040c095d9 100644
--- a/frontend/src/components/VCopyButton.vue
+++ b/frontend/src/components/VCopyButton.vue
@@ -1,22 +1,3 @@
-<template>
-  <VButton
-    :id="id"
-    type="button"
-    variant="filled-dark"
-    size="small"
-    class="label-bold flex-shrink-0"
-    :disabled="!doneHydrating"
-    :data-clipboard-target="el"
-  >
-    <span v-if="!success">
-      {{ $t("mediaDetails.reuse.copyLicense.copyText") }}
-    </span>
-    <span v-else>
-      {{ $t("mediaDetails.reuse.copyLicense.copied") }}
-    </span>
-  </VButton>
-</template>
-
 <script lang="ts">
 import Clipboard from "clipboard"
 
@@ -90,3 +71,22 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    :id="id"
+    type="button"
+    variant="filled-dark"
+    size="small"
+    class="label-bold flex-shrink-0"
+    :disabled="!doneHydrating"
+    :data-clipboard-target="el"
+  >
+    <span v-if="!success">
+      {{ $t("mediaDetails.reuse.copyLicense.copyText") }}
+    </span>
+    <span v-else>
+      {{ $t("mediaDetails.reuse.copyLicense.copied") }}
+    </span>
+  </VButton>
+</template>
diff --git a/frontend/src/components/VFilters/VSearchGridFilter.vue b/frontend/src/components/VFilters/VSearchGridFilter.vue
index 92b0fe1e58c..571ca9f6ef9 100644
--- a/frontend/src/components/VFilters/VSearchGridFilter.vue
+++ b/frontend/src/components/VFilters/VSearchGridFilter.vue
@@ -1,36 +1,3 @@
-<template>
-  <section id="filters" aria-labelledby="filters-heading" class="filters">
-    <header
-      v-if="showFilterHeader"
-      class="relative mb-6 flex items-center justify-between"
-    >
-      <h4 id="filters-heading" class="caption-bold uppercase">
-        {{ $t("filterList.filterBy") }}
-      </h4>
-      <VButton
-        v-show="isAnyFilterApplied"
-        id="clear-filter-button"
-        variant="transparent-gray"
-        size="small"
-        class="label-bold absolute end-0 !text-link"
-        @click="clearFilters"
-      >
-        {{ $t("filterList.clear") }}
-      </VButton>
-    </header>
-    <form class="filters-form">
-      <VFilterChecklist
-        v-for="filterType in filterTypes"
-        :key="filterType"
-        :options="filters[filterType]"
-        :title="filterTypeTitle(filterType)"
-        :filter-type="filterType"
-        @toggle-filter="toggleFilter"
-      />
-    </form>
-  </section>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -119,3 +86,36 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <section id="filters" aria-labelledby="filters-heading" class="filters">
+    <header
+      v-if="showFilterHeader"
+      class="relative mb-6 flex items-center justify-between"
+    >
+      <h4 id="filters-heading" class="caption-bold uppercase">
+        {{ $t("filterList.filterBy") }}
+      </h4>
+      <VButton
+        v-show="isAnyFilterApplied"
+        id="clear-filter-button"
+        variant="transparent-gray"
+        size="small"
+        class="label-bold absolute end-0 !text-link"
+        @click="clearFilters"
+      >
+        {{ $t("filterList.clear") }}
+      </VButton>
+    </header>
+    <form class="filters-form">
+      <VFilterChecklist
+        v-for="filterType in filterTypes"
+        :key="filterType"
+        :options="filters[filterType]"
+        :title="filterTypeTitle(filterType)"
+        :filter-type="filterType"
+        @toggle-filter="toggleFilter"
+      />
+    </form>
+  </section>
+</template>
diff --git a/frontend/src/components/VFooter/VFooter.vue b/frontend/src/components/VFooter/VFooter.vue
index 69b65886f9f..ca326f8f41f 100644
--- a/frontend/src/components/VFooter/VFooter.vue
+++ b/frontend/src/components/VFooter/VFooter.vue
@@ -1,37 +1,3 @@
-<template>
-  <footer
-    ref="footerEl"
-    class="footer flex flex-col gap-10 px-6"
-    :class="[
-      ...variantNames,
-      isContentMode ? 'footer-content' : 'footer-internal',
-    ]"
-  >
-    <!-- Logo and links -->
-    <div v-if="isContentMode" class="logo-and-links flex flex-col gap-y-10">
-      <VLink href="/" class="logo text-default" aria-label="Openverse">
-        <VBrand class="text-[18px]" />
-      </VLink>
-      <nav>
-        <VPageLinks
-          class="nav-list label-regular"
-          :style="linkColumnHeight"
-          nav-link-classes="py-2"
-        />
-      </nav>
-    </div>
-
-    <!-- Locale chooser and WordPress affiliation graphic -->
-    <div class="locale-and-wp flex flex-col justify-between">
-      <VLanguageSelect
-        v-bind="languageProps"
-        class="language max-w-full border-secondary"
-      />
-      <VWordPressLink mode="light" />
-    </div>
-  </footer>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue"
 
@@ -119,6 +85,40 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <footer
+    ref="footerEl"
+    class="footer flex flex-col gap-10 px-6"
+    :class="[
+      ...variantNames,
+      isContentMode ? 'footer-content' : 'footer-internal',
+    ]"
+  >
+    <!-- Logo and links -->
+    <div v-if="isContentMode" class="logo-and-links flex flex-col gap-y-10">
+      <VLink href="/" class="logo text-default" aria-label="Openverse">
+        <VBrand class="text-[18px]" />
+      </VLink>
+      <nav>
+        <VPageLinks
+          class="nav-list label-regular"
+          :style="linkColumnHeight"
+          nav-link-classes="py-2"
+        />
+      </nav>
+    </div>
+
+    <!-- Locale chooser and WordPress affiliation graphic -->
+    <div class="locale-and-wp flex flex-col justify-between">
+      <VLanguageSelect
+        v-bind="languageProps"
+        class="language max-w-full border-secondary"
+      />
+      <VWordPressLink mode="light" />
+    </div>
+  </footer>
+</template>
+
 <style>
 /* wrapper element styles */
 .footer-lg {
diff --git a/frontend/src/components/VFourOhFour.vue b/frontend/src/components/VFourOhFour.vue
index 6f250a589b9..80ac6ff796d 100644
--- a/frontend/src/components/VFourOhFour.vue
+++ b/frontend/src/components/VFourOhFour.vue
@@ -1,41 +1,3 @@
-<template>
-  <div class="error grid overflow-x-hidden">
-    <VSvg
-      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20"
-      viewBox="0 0 1320 569"
-      name="oops"
-    />
-    <div
-      class="page-404 col-start-1 row-start-1 flex flex-col justify-self-stretch px-6 lg:max-w-2xl lg:justify-self-center lg:px-0"
-    >
-      <!-- Push content by 1/4th height without absolute positioning. -->
-      <div class="spacer grow" />
-      <main
-        :id="skipToContentTargetId"
-        tabindex="-1"
-        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") }}
-        </h1>
-        <p class="sr-only">{{ error }}</p>
-        <p class="label-bold lg:heading-6">
-          <i18n-t scope="global" keypath="404.main" tag="span">
-            <template #link>
-              <VLink
-                class="text-current underline hover:text-current active:text-current"
-                href="/"
-                >Openverse</VLink
-              >
-            </template>
-          </i18n-t>
-        </p>
-        <VStandaloneSearchBar route="404" @submit="handleSearch" />
-      </main>
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { navigateTo, useHead } from "#imports"
 
@@ -87,3 +49,41 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="error grid overflow-x-hidden">
+    <VSvg
+      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20"
+      viewBox="0 0 1320 569"
+      name="oops"
+    />
+    <div
+      class="page-404 col-start-1 row-start-1 flex flex-col justify-self-stretch px-6 lg:max-w-2xl lg:justify-self-center lg:px-0"
+    >
+      <!-- Push content by 1/4th height without absolute positioning. -->
+      <div class="spacer grow" />
+      <main
+        :id="skipToContentTargetId"
+        tabindex="-1"
+        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") }}
+        </h1>
+        <p class="sr-only">{{ error }}</p>
+        <p class="label-bold lg:heading-6">
+          <i18n-t scope="global" keypath="404.main" tag="span">
+            <template #link>
+              <VLink
+                class="text-current underline hover:text-current active:text-current"
+                href="/"
+                >Openverse</VLink
+              >
+            </template>
+          </i18n-t>
+        </p>
+        <VStandaloneSearchBar route="404" @submit="handleSearch" />
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
index 7064badf850..097b9a82068 100644
--- a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
+++ b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
@@ -1,22 +1,3 @@
-<template>
-  <div
-    class="global-audio sticky z-global-audio sm:hidden"
-    :class="{ 'bottom-2 mx-2': !!audio }"
-  >
-    <template v-if="audio">
-      <VGlobalAudioTrack :audio="audio" />
-      <VIconButton
-        class="!absolute end-0 top-0 z-30 m-2"
-        variant="transparent-gray"
-        :icon-props="{ name: 'close-small' }"
-        size="small"
-        :label="$t('audioTrack.close')"
-        @click="handleClose"
-      />
-    </template>
-  </div>
-</template>
-
 <script lang="ts">
 import { useRoute } from "#imports"
 
@@ -161,3 +142,22 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div
+    class="global-audio sticky z-global-audio sm:hidden"
+    :class="{ 'bottom-2 mx-2': !!audio }"
+  >
+    <template v-if="audio">
+      <VGlobalAudioTrack :audio="audio" />
+      <VIconButton
+        class="!absolute end-0 top-0 z-30 m-2"
+        variant="transparent-gray"
+        :icon-props="{ name: 'close-small' }"
+        size="small"
+        :label="$t('audioTrack.close')"
+        @click="handleClose"
+      />
+    </template>
+  </div>
+</template>
diff --git a/frontend/src/components/VHeader/VFilterButton.vue b/frontend/src/components/VHeader/VFilterButton.vue
index e18c19af101..705588bd7fa 100644
--- a/frontend/src/components/VHeader/VFilterButton.vue
+++ b/frontend/src/components/VHeader/VFilterButton.vue
@@ -1,23 +1,3 @@
-<template>
-  <VButton
-    id="filter-button"
-    :variant="pressed ? 'filled-dark' : 'bordered-white'"
-    size="disabled"
-    class="label-regular h-12 w-12 gap-x-2 self-center xl:w-auto xl:pe-4 xl:ps-3"
-    :pressed="pressed"
-    :disabled="disabled"
-    aria-controls="filters"
-    :aria-label="ariaLabel"
-    @click="$emit('toggle')"
-  >
-    <VFilterIconOrCounter
-      :applied-filter-count="filterCount"
-      :pressed="pressed"
-    />
-    <span class="hidden xl:inline-block">{{ textLabel }}</span>
-  </VButton>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -68,3 +48,23 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    id="filter-button"
+    :variant="pressed ? 'filled-dark' : 'bordered-white'"
+    size="disabled"
+    class="label-regular h-12 w-12 gap-x-2 self-center xl:w-auto xl:pe-4 xl:ps-3"
+    :pressed="pressed"
+    :disabled="disabled"
+    aria-controls="filters"
+    :aria-label="ariaLabel"
+    @click="$emit('toggle')"
+  >
+    <VFilterIconOrCounter
+      :applied-filter-count="filterCount"
+      :pressed="pressed"
+    />
+    <span class="hidden xl:inline-block">{{ textLabel }}</span>
+  </VButton>
+</template>
diff --git a/frontend/src/components/VHeader/VFilterIconOrCounter.vue b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
index 2fadc8a51be..459f14f527d 100644
--- a/frontend/src/components/VHeader/VFilterIconOrCounter.vue
+++ b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
@@ -1,14 +1,3 @@
-<template>
-  <VIcon v-if="showIcon" name="filter" />
-  <p
-    v-else
-    class="flex h-6 w-6 items-center justify-center rounded-sm"
-    :class="pressed ? 'bg-tx' : 'bg-secondary'"
-  >
-    {{ appliedFilterCount }}
-  </p>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
@@ -36,3 +25,14 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VIcon v-if="showIcon" name="filter" />
+  <p
+    v-else
+    class="flex h-6 w-6 items-center justify-center rounded-sm"
+    :class="pressed ? 'bg-tx' : 'bg-secondary'"
+  >
+    {{ appliedFilterCount }}
+  </p>
+</template>
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index e2a2f13e417..707e8b1d3f1 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -1,46 +1,3 @@
-<template>
-  <header
-    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 bg-default px-6 py-4"
-  >
-    <VLogoButton :is-fetching="isFetching" />
-
-    <VSearchBar
-      ref="searchBarRef"
-      v-model.trim="searchTerm"
-      class="me-4 flex-grow"
-      @submit="handleSearch"
-      @recent-hidden="handleSearch"
-    >
-      <VSearchBarButton
-        v-show="searchTerm !== ''"
-        icon="close-small"
-        :label="$t('browsePage.searchForm.clear')"
-        variant="filled-white"
-        class="hidden group-focus-within:flex"
-        @click="clearSearchTerm"
-      />
-      <span
-        v-show="Boolean(searchStatus)"
-        class="info mx-4 hidden whitespace-nowrap text-xs text-secondary group-focus-within:hidden group-hover:text-default group-focus:text-default lg:block"
-      >
-        {{ searchStatus }}
-      </span>
-    </VSearchBar>
-
-    <VSearchTypePopover :show-label="isXl" placement="header" />
-
-    <VFilterButton
-      ref="filterButtonRef"
-      class="flex self-stretch"
-      :pressed="isSidebarVisible"
-      :disabled="!doneHydrating || areFiltersDisabled"
-      aria-haspopup="dialog"
-      :aria-expanded="isSidebarVisible"
-      @toggle="toggleSidebar"
-    />
-  </header>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, inject, ref } from "vue"
 
@@ -143,3 +100,46 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <header
+    class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 bg-default px-6 py-4"
+  >
+    <VLogoButton :is-fetching="isFetching" />
+
+    <VSearchBar
+      ref="searchBarRef"
+      v-model.trim="searchTerm"
+      class="me-4 flex-grow"
+      @submit="handleSearch"
+      @recent-hidden="handleSearch"
+    >
+      <VSearchBarButton
+        v-show="searchTerm !== ''"
+        icon="close-small"
+        :label="$t('browsePage.searchForm.clear')"
+        variant="filled-white"
+        class="hidden group-focus-within:flex"
+        @click="clearSearchTerm"
+      />
+      <span
+        v-show="Boolean(searchStatus)"
+        class="info mx-4 hidden whitespace-nowrap text-xs text-secondary group-focus-within:hidden group-hover:text-default group-focus:text-default lg:block"
+      >
+        {{ searchStatus }}
+      </span>
+    </VSearchBar>
+
+    <VSearchTypePopover :show-label="isXl" placement="header" />
+
+    <VFilterButton
+      ref="filterButtonRef"
+      class="flex self-stretch"
+      :pressed="isSidebarVisible"
+      :disabled="!doneHydrating || areFiltersDisabled"
+      aria-haspopup="dialog"
+      :aria-expanded="isSidebarVisible"
+      @toggle="toggleSidebar"
+    />
+  </header>
+</template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
index c9dd5c72ed7..99b6271afb9 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
@@ -1,3 +1,24 @@
+<script lang="ts">
+import { defineComponent } from "vue"
+
+import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
+
+export default defineComponent({
+  name: "VContentSettingsButton",
+  components: { VSearchBarButton },
+  props: {
+    isPressed: {
+      type: Boolean,
+      default: false,
+    },
+    appliedFilterCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+})
+</script>
+
 <template>
   <VSearchBarButton
     id="content-settings-button"
@@ -22,24 +43,3 @@
     </template>
   </VSearchBarButton>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
-
-export default defineComponent({
-  name: "VContentSettingsButton",
-  components: { VSearchBarButton },
-  props: {
-    isPressed: {
-      type: Boolean,
-      default: false,
-    },
-    appliedFilterCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
index 0a65d389f88..25ea8e2d053 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -1,17 +1,3 @@
-<template>
-  <VTab
-    id="filters"
-    size="medium"
-    class="gap-x-2"
-    :aria-label="
-      $t('header.filterButton.withCount', { count: appliedFilterCount })
-    "
-  >
-    <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
-    <h2 class="label-regular">{{ $t("filters.title") }}</h2>
-  </VTab>
-</template>
-
 <script lang="ts">
 import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 import VTab from "~/components/VTabs/VTab.vue"
@@ -27,3 +13,17 @@ export default {
   },
 }
 </script>
+
+<template>
+  <VTab
+    id="filters"
+    size="medium"
+    class="gap-x-2"
+    :aria-label="
+      $t('header.filterButton.withCount', { count: appliedFilterCount })
+    "
+  >
+    <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
+    <h2 class="label-regular">{{ $t("filters.title") }}</h2>
+  </VTab>
+</template>
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index bcd9dd92f4e..5fa5a4c0d09 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -1,21 +1,3 @@
-<template>
-  <VButton :aria-label="label" size="large" variant="plain--avoid" icon-only>
-    <span
-      class="relative flex h-8 w-8 flex-none items-center justify-center rounded-sm border border-tx group-focus-visible/button:ring group-focus-visible/button:ring-pink-8 group-active/button:ring group-active/button:ring-pink-8"
-      :class="variant"
-    >
-      <VIcon
-        :name="icon"
-        :rtl-flip="rtlFlip"
-        class="pointer-events-none"
-        :size="6"
-      />
-      <!--  @slot The element that can show a notification label for the button, can be absolutely positioned  -->
-      <slot name="notification" />
-    </span>
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -68,6 +50,24 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <VButton :aria-label="label" size="large" variant="plain--avoid" icon-only>
+    <span
+      class="relative flex h-8 w-8 flex-none items-center justify-center rounded-sm border border-tx group-focus-visible/button:ring group-focus-visible/button:ring-pink-8 group-active/button:ring group-active/button:ring-pink-8"
+      :class="variant"
+    >
+      <VIcon
+        :name="icon"
+        :rtl-flip="rtlFlip"
+        class="pointer-events-none"
+        :size="6"
+      />
+      <!--  @slot The element that can show a notification label for the button, can be absolutely positioned  -->
+      <slot name="notification" />
+    </span>
+  </VButton>
+</template>
+
 <style scoped>
 .button {
   accent-color: transparent;
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
index 36a53f91dab..66d9863a330 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue
@@ -1,3 +1,46 @@
+<script lang="ts">
+import { computed, defineComponent } from "vue"
+
+import { defineEvent } from "~/types/emits"
+
+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: {
+    /**
+     * whether the results are being updated behind the open modal
+     */
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    click: defineEvent(),
+  },
+  setup() {
+    const diameter = 8 // px
+    const spacing = 8 // px
+
+    const radius = computed(() => diameter / 2)
+    const width = computed(() => diameter * 3 + spacing * 2)
+
+    return {
+      diameter,
+      spacing,
+      radius,
+      width,
+    }
+  },
+})
+</script>
+
 <template>
   <VButton
     variant="filled-pink-8"
@@ -42,49 +85,6 @@
   </VButton>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue"
-
-import { defineEvent } from "~/types/emits"
-
-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: {
-    /**
-     * whether the results are being updated behind the open modal
-     */
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    const diameter = 8 // px
-    const spacing = 8 // px
-
-    const radius = computed(() => diameter / 2)
-    const width = computed(() => diameter * 3 + spacing * 2)
-
-    return {
-      diameter,
-      spacing,
-      radius,
-      width,
-    }
-  },
-})
-</script>
-
 <style>
 /*
   Dot #2 becomes visible as soon as dot #3 as passed over it. This avoids the
diff --git a/frontend/src/components/VHeader/VHomeLink.vue b/frontend/src/components/VHeader/VHomeLink.vue
index b53589fad99..3c689a6f8cf 100644
--- a/frontend/src/components/VHeader/VHomeLink.vue
+++ b/frontend/src/components/VHeader/VHomeLink.vue
@@ -1,25 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    href="/"
-    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
-    variant="transparent-tx"
-    size="disabled"
-    :class="
-      variant === 'dark'
-        ? 'text-default hover:bg-complementary'
-        : 'focus-slim-tx-bg-complementary text-white'
-    "
-    class="h-12 px-4 text-[1.125rem]"
-  >
-    <VSvg
-      name="logo_and_wordmark"
-      class="h-[1em] w-auto"
-      viewBox="0 0 226 34"
-    />
-  </VButton>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from "vue"
 
@@ -50,3 +28,25 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    href="/"
+    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
+    variant="transparent-tx"
+    size="disabled"
+    :class="
+      variant === 'dark'
+        ? 'text-default hover:bg-complementary'
+        : 'focus-slim-tx-bg-complementary text-white'
+    "
+    class="h-12 px-4 text-[1.125rem]"
+  >
+    <VSvg
+      name="logo_and_wordmark"
+      class="h-[1em] w-auto"
+      viewBox="0 0 226 34"
+    />
+  </VButton>
+</template>
diff --git a/frontend/src/components/VHeader/VLogoButton.vue b/frontend/src/components/VHeader/VLogoButton.vue
index 6001af385e2..328f757fa15 100644
--- a/frontend/src/components/VHeader/VLogoButton.vue
+++ b/frontend/src/components/VHeader/VLogoButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    href="/"
-    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
-    variant="transparent-tx"
-    size="large"
-    icon-only
-    class="text-default hover:bg-complementary"
-  >
-    <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -33,3 +19,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    href="/"
+    :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
+    variant="transparent-tx"
+    size="large"
+    icon-only
+    class="text-default hover:bg-complementary"
+  >
+    <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
+  </VButton>
+</template>
diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
index fd18d8465fa..ac10618bce1 100644
--- a/frontend/src/components/VHeader/VPageLinks.vue
+++ b/frontend/src/components/VHeader/VPageLinks.vue
@@ -1,55 +1,3 @@
-<template>
-  <VItemGroup
-    v-if="variant === 'itemgroup'"
-    class="my-2 min-w-50 gap-y-2"
-    :bordered="false"
-    :show-check="false"
-  >
-    <VItem
-      v-for="(page, i) of allPages"
-      :key="i"
-      as="VLink"
-      :is-first="i === 0"
-      :selected="currentPage === page.id"
-      :href="page.link"
-      class="w-full"
-      @click="onClick"
-    >
-      <div class="flex w-full flex-row justify-between">
-        <span class="pe-2">{{ $t(page.name) }}</span>
-        <VIcon
-          v-if="isLinkExternal(page)"
-          name="external-link"
-          :size="4"
-          class="self-center"
-          rtl-flip
-        />
-      </div>
-    </VItem>
-  </VItemGroup>
-  <ul v-else>
-    <li v-for="page in allPages" :key="page.id">
-      <VLink
-        class="flex flex-row rounded-sm hover:underline focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-tx disabled:text-disabled"
-        :class="[
-          { 'font-semibold': currentPage === page.id },
-          { 'focus-visible:ring-border-focus text-default': mode === 'light' },
-          navLinkClasses,
-        ]"
-        :href="page.link"
-        @click="onClick"
-        >{{ $t(page.name)
-        }}<VIcon
-          v-if="isLinkExternal(page)"
-          name="external-link"
-          :size="externalIconSize"
-          class="ms-2 self-center"
-          rtl-flip
-      /></VLink>
-    </li>
-  </ul>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent, computed } from "vue"
 
@@ -125,3 +73,55 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VItemGroup
+    v-if="variant === 'itemgroup'"
+    class="my-2 min-w-50 gap-y-2"
+    :bordered="false"
+    :show-check="false"
+  >
+    <VItem
+      v-for="(page, i) of allPages"
+      :key="i"
+      as="VLink"
+      :is-first="i === 0"
+      :selected="currentPage === page.id"
+      :href="page.link"
+      class="w-full"
+      @click="onClick"
+    >
+      <div class="flex w-full flex-row justify-between">
+        <span class="pe-2">{{ $t(page.name) }}</span>
+        <VIcon
+          v-if="isLinkExternal(page)"
+          name="external-link"
+          :size="4"
+          class="self-center"
+          rtl-flip
+        />
+      </div>
+    </VItem>
+  </VItemGroup>
+  <ul v-else>
+    <li v-for="page in allPages" :key="page.id">
+      <VLink
+        class="flex flex-row rounded-sm hover:underline focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-tx disabled:text-disabled"
+        :class="[
+          { 'font-semibold': currentPage === page.id },
+          { 'focus-visible:ring-border-focus text-default': mode === 'light' },
+          navLinkClasses,
+        ]"
+        :href="page.link"
+        @click="onClick"
+        >{{ $t(page.name)
+        }}<VIcon
+          v-if="isLinkExternal(page)"
+          name="external-link"
+          :size="externalIconSize"
+          class="ms-2 self-center"
+          rtl-flip
+      /></VLink>
+    </li>
+  </ul>
+</template>
diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
index fc304594105..f39a04bacb9 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -1,59 +1,3 @@
-<template>
-  <div ref="searchBarEl" class="relative" :class="$attrs.class">
-    <!-- Form action is a fallback for when JavaScript is disabled. -->
-    <form
-      action="/search"
-      role="search"
-      class="search-bar group flex h-12 flex-row items-center rounded-sm border-tx bg-default"
-      @submit.prevent="handleSearch"
-    >
-      <VInputField
-        ref="inputFieldRef"
-        v-bind="nonClassAttrs"
-        v-model="modelMedium"
-        :placeholder="placeholder || $t('hero.search.placeholder')"
-        class="search-field flex-grow border-tx bg-secondary text-secondary focus-within:bg-default focus:border-focus group-hover:bg-secondary group-hover:text-default group-hover:focus-within:bg-default"
-        :label-text="$t('search.searchBarLabel', { openverse: 'Openverse' })"
-        :connection-sides="['end']"
-        :size="size"
-        field-id="search-bar"
-        type="search"
-        autocomplete="off"
-        name="q"
-        role="combobox"
-        aria-autocomplete="none"
-        :aria-expanded="isRecentVisible"
-        aria-controls="recent-searches-list"
-        :aria-activedescendant="
-          selectedIdx !== undefined ? `option-${selectedIdx}` : undefined
-        "
-        @focus="showRecentSearches"
-        @keydown="handleKeydown"
-      >
-        <!-- @slot Extra information such as loading message or result count goes here. -->
-        <slot />
-      </VInputField>
-      <VSearchButton
-        type="submit"
-        route="search"
-        @keydown.tab.exact="handleSearchBlur"
-      />
-    </form>
-    <ClientOnly>
-      <VRecentSearches
-        v-show="isRecentVisible"
-        :selected-idx="selectedIdx"
-        :entries="entries"
-        class="absolute inset-x-0 z-popover lg:flex"
-        :class="recentClasses"
-        @select="handleSelect"
-        @clear="handleClear($event)"
-        @keydown.tab="hideRecentSearches"
-      />
-    </ClientOnly>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from "vue"
 
@@ -183,3 +127,59 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div ref="searchBarEl" class="relative" :class="$attrs.class">
+    <!-- Form action is a fallback for when JavaScript is disabled. -->
+    <form
+      action="/search"
+      role="search"
+      class="search-bar group flex h-12 flex-row items-center rounded-sm border-tx bg-default"
+      @submit.prevent="handleSearch"
+    >
+      <VInputField
+        ref="inputFieldRef"
+        v-bind="nonClassAttrs"
+        v-model="modelMedium"
+        :placeholder="placeholder || $t('hero.search.placeholder')"
+        class="search-field flex-grow border-tx bg-secondary text-secondary focus-within:bg-default focus:border-focus group-hover:bg-secondary group-hover:text-default group-hover:focus-within:bg-default"
+        :label-text="$t('search.searchBarLabel', { openverse: 'Openverse' })"
+        :connection-sides="['end']"
+        :size="size"
+        field-id="search-bar"
+        type="search"
+        autocomplete="off"
+        name="q"
+        role="combobox"
+        aria-autocomplete="none"
+        :aria-expanded="isRecentVisible"
+        aria-controls="recent-searches-list"
+        :aria-activedescendant="
+          selectedIdx !== undefined ? `option-${selectedIdx}` : undefined
+        "
+        @focus="showRecentSearches"
+        @keydown="handleKeydown"
+      >
+        <!-- @slot Extra information such as loading message or result count goes here. -->
+        <slot />
+      </VInputField>
+      <VSearchButton
+        type="submit"
+        route="search"
+        @keydown.tab.exact="handleSearchBlur"
+      />
+    </form>
+    <ClientOnly>
+      <VRecentSearches
+        v-show="isRecentVisible"
+        :selected-idx="selectedIdx"
+        :entries="entries"
+        class="absolute inset-x-0 z-popover lg:flex"
+        :class="recentClasses"
+        @select="handleSelect"
+        @clear="handleClear($event)"
+        @keydown.tab="hideRecentSearches"
+      />
+    </ClientOnly>
+  </div>
+</template>
diff --git a/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue b/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
index 4079478ef7d..9295433f8b2 100644
--- a/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VSearchButton.vue
@@ -1,24 +1,3 @@
-<template>
-  <VButton
-    type="submit"
-    :aria-label="$t('search.search')"
-    size="disabled"
-    :disabled="!doneHydrating"
-    variant="plain"
-    :class="[
-      'h-full flex-shrink-0 rounded-s-none border-s-0 p-0.5px ps-1.5px focus-slim-filled hover:text-over-dark focus-visible:border-s group-focus-within:border-tx group-focus-within:bg-primary group-focus-within:text-over-dark group-focus-within:hover:bg-primary-hover group-hover:border-tx group-hover:bg-primary group-hover:text-over-dark',
-      route === 'search' ? 'w-12' : 'w-14 sm:w-16',
-      {
-        'border-tx bg-secondary hover:bg-primary': route === 'search',
-        'border-tx bg-primary text-over-dark hover:!bg-primary-hover':
-          route === 'home',
-      },
-    ]"
-  >
-    <VIcon name="search" />
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -50,3 +29,24 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    type="submit"
+    :aria-label="$t('search.search')"
+    size="disabled"
+    :disabled="!doneHydrating"
+    variant="plain"
+    :class="[
+      'h-full flex-shrink-0 rounded-s-none border-s-0 p-0.5px ps-1.5px focus-slim-filled hover:text-over-dark focus-visible:border-s group-focus-within:border-tx group-focus-within:bg-primary group-focus-within:text-over-dark group-focus-within:hover:bg-primary-hover group-hover:border-tx group-hover:bg-primary group-hover:text-over-dark',
+      route === 'search' ? 'w-12' : 'w-14 sm:w-16',
+      {
+        'border-tx bg-secondary hover:bg-primary': route === 'search',
+        'border-tx bg-primary text-over-dark hover:!bg-primary-hover':
+          route === 'home',
+      },
+    ]"
+  >
+    <VIcon name="search" />
+  </VButton>
+</template>
diff --git a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
index 922e30f4dd2..652a47e341b 100644
--- a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
+++ b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -1,38 +1,3 @@
-<template>
-  <!-- Form action is a fallback for when JavaScript is disabled. -->
-  <form
-    action="/search"
-    role="search"
-    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16"
-    @submit.prevent="handleSearch"
-  >
-    <div
-      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2 focus-within:border-1.5 focus-within:border-e-0 focus-within:p-0 focus-within:pe-2"
-      :class="[
-        route === 'home' ? 'border-tx' : 'border-black',
-        hasPopover ? 'focus-within:border-tx' : 'focus-within:border-focus',
-      ]"
-    >
-      <input
-        id="search-bar"
-        ref="inputRef"
-        type="search"
-        name="q"
-        :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-default placeholder-gray-8 focus-visible:outline-none"
-        :aria-label="
-          $t('search.searchBarLabel', {
-            openverse: 'Openverse',
-          })
-        "
-      />
-      <!-- @slot Extra information goes here -->
-      <slot />
-    </div>
-    <VSearchButton :route="route" />
-  </form>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType, ref } from "vue"
 
@@ -91,3 +56,38 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Form action is a fallback for when JavaScript is disabled. -->
+  <form
+    action="/search"
+    role="search"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16"
+    @submit.prevent="handleSearch"
+  >
+    <div
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2 focus-within:border-1.5 focus-within:border-e-0 focus-within:p-0 focus-within:pe-2"
+      :class="[
+        route === 'home' ? 'border-tx' : 'border-black',
+        hasPopover ? 'focus-within:border-tx' : 'focus-within:border-focus',
+      ]"
+    >
+      <input
+        id="search-bar"
+        ref="inputRef"
+        type="search"
+        name="q"
+        :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-default placeholder-gray-8 focus-visible:outline-none"
+        :aria-label="
+          $t('search.searchBarLabel', {
+            openverse: 'Openverse',
+          })
+        "
+      />
+      <!-- @slot Extra information goes here -->
+      <slot />
+    </div>
+    <VSearchButton :route="route" />
+  </form>
+</template>
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index 3cd630d3dd2..0a4febd1184 100644
--- a/frontend/src/components/VHeader/VWordPressLink.vue
+++ b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -1,3 +1,21 @@
+<script lang="ts">
+import VLink from "~/components/VLink.vue"
+import VSvg from "~/components/VSvg/VSvg.vue"
+
+import type { PropType } from "vue"
+
+export default {
+  name: "VWordPressLink",
+  components: { VLink, VSvg },
+  props: {
+    mode: {
+      type: String as PropType<"dark" | "light">,
+      default: "light",
+    },
+  },
+}
+</script>
+
 <template>
   <VLink
     href="https://wordpress.org"
@@ -16,21 +34,3 @@
     </i18n-t>
   </VLink>
 </template>
-
-<script lang="ts">
-import VLink from "~/components/VLink.vue"
-import VSvg from "~/components/VSvg/VSvg.vue"
-
-import type { PropType } from "vue"
-
-export default {
-  name: "VWordPressLink",
-  components: { VLink, VSvg },
-  props: {
-    mode: {
-      type: String as PropType<"dark" | "light">,
-      default: "light",
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/VHideButton.vue b/frontend/src/components/VHideButton.vue
index ecddc866d4f..02389e80c12 100644
--- a/frontend/src/components/VHideButton.vue
+++ b/frontend/src/components/VHideButton.vue
@@ -1,29 +1,3 @@
-<template>
-  <div>
-    <VButton
-      v-if="isMd"
-      variant="transparent-gray"
-      class="label-bold"
-      size="small"
-      has-icon-end
-      @click="$emit('click')"
-    >
-      <span class="hidden md:block">{{
-        $t("sensitiveContent.singleResult.hide")
-      }}</span>
-      <VIcon name="eye-closed" />
-    </VButton>
-    <VIconButton
-      v-else
-      variant="transparent-gray"
-      :icon-props="{ name: 'eye-closed' }"
-      size="small"
-      :label="$t('sensitiveContent.singleResult.hide')"
-      @click="$emit('click')"
-    />
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
@@ -54,3 +28,29 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <VButton
+      v-if="isMd"
+      variant="transparent-gray"
+      class="label-bold"
+      size="small"
+      has-icon-end
+      @click="$emit('click')"
+    >
+      <span class="hidden md:block">{{
+        $t("sensitiveContent.singleResult.hide")
+      }}</span>
+      <VIcon name="eye-closed" />
+    </VButton>
+    <VIconButton
+      v-else
+      variant="transparent-gray"
+      :icon-props="{ name: 'eye-closed' }"
+      size="small"
+      :label="$t('sensitiveContent.singleResult.hide')"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/VHomeGallery/VHomeGallery.vue b/frontend/src/components/VHomeGallery/VHomeGallery.vue
index 032755da50f..9fb8e5743e8 100644
--- a/frontend/src/components/VHomeGallery/VHomeGallery.vue
+++ b/frontend/src/components/VHomeGallery/VHomeGallery.vue
@@ -1,49 +1,3 @@
-<template>
-  <!-- Wrapper element to center the grid if space is more than 5 columns. -->
-  <div
-    ref="el"
-    class="mx-10 me-12 flex flex-row items-center justify-end 2xl:justify-center"
-  >
-    <!-- Image grid only occupies as much width as needed. -->
-    <div
-      class="home-gallery inline-grid grid-flow-col grid-rows-3 gap-8"
-      :style="{
-        gap: `${space}px`,
-        gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
-      }"
-    >
-      <ClientOnly>
-        <Transition
-          v-for="(image, idx) in imageList"
-          :key="idx"
-          enter-active-class="transition-opacity delay-[var(--delay)] duration-500"
-          leave-active-class="transition-opacity delay-[var(--delay)] duration-500"
-          enter-from-class="opacity-0"
-          leave-to-class="opacity-0"
-          mode="out-in"
-          appear
-        >
-          <VLink
-            class="home-cell rounded-full p-1 focus-visible:bg-default"
-            :class="idx >= imageCount ? 'hidden' : 'block'"
-            :style="{ '--delay': `${idx * 0.05}s` }"
-            :href="image.url"
-            @click="handleClick(image.id)"
-          >
-            <img
-              :height="dimens"
-              :width="dimens"
-              :src="image.src"
-              :alt="image.title"
-              :title="image.title"
-            />
-          </VLink>
-        </Transition>
-      </ClientOnly>
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { useLocalePath, useRouter } from "#imports"
 
@@ -148,3 +102,49 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Wrapper element to center the grid if space is more than 5 columns. -->
+  <div
+    ref="el"
+    class="mx-10 me-12 flex flex-row items-center justify-end 2xl:justify-center"
+  >
+    <!-- Image grid only occupies as much width as needed. -->
+    <div
+      class="home-gallery inline-grid grid-flow-col grid-rows-3 gap-8"
+      :style="{
+        gap: `${space}px`,
+        gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+      }"
+    >
+      <ClientOnly>
+        <Transition
+          v-for="(image, idx) in imageList"
+          :key="idx"
+          enter-active-class="transition-opacity delay-[var(--delay)] duration-500"
+          leave-active-class="transition-opacity delay-[var(--delay)] duration-500"
+          enter-from-class="opacity-0"
+          leave-to-class="opacity-0"
+          mode="out-in"
+          appear
+        >
+          <VLink
+            class="home-cell rounded-full p-1 focus-visible:bg-default"
+            :class="idx >= imageCount ? 'hidden' : 'block'"
+            :style="{ '--delay': `${idx * 0.05}s` }"
+            :href="image.url"
+            @click="handleClick(image.id)"
+          >
+            <img
+              :height="dimens"
+              :width="dimens"
+              :src="image.src"
+              :alt="image.title"
+              :title="image.title"
+            />
+          </VLink>
+        </Transition>
+      </ClientOnly>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VIconButton/VIconButton.vue b/frontend/src/components/VIconButton/VIconButton.vue
index a466802ac7b..b35e1161485 100644
--- a/frontend/src/components/VIconButton/VIconButton.vue
+++ b/frontend/src/components/VIconButton/VIconButton.vue
@@ -1,22 +1,3 @@
-<template>
-  <VButton
-    :aria-label="label"
-    :size="size"
-    :variant="variant"
-    :connections="connections"
-    class="icon-button"
-    icon-only
-  >
-    <slot name="default" :icon-size="iconSize" />
-    <VIcon
-      v-if="iconProps"
-      class="pointer-events-none"
-      :size="iconSize"
-      v-bind="iconProps"
-    />
-  </VButton>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -83,3 +64,22 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    :aria-label="label"
+    :size="size"
+    :variant="variant"
+    :connections="connections"
+    class="icon-button"
+    icon-only
+  >
+    <slot name="default" :icon-size="iconSize" />
+    <VIcon
+      v-if="iconProps"
+      class="pointer-events-none"
+      :size="iconSize"
+      v-bind="iconProps"
+    />
+  </VButton>
+</template>
diff --git a/frontend/src/components/VInputField/VInputField.vue b/frontend/src/components/VInputField/VInputField.vue
index c1aa7fff940..564bf837aba 100644
--- a/frontend/src/components/VInputField/VInputField.vue
+++ b/frontend/src/components/VInputField/VInputField.vue
@@ -1,35 +1,3 @@
-<template>
-  <div
-    class="input-field group flex flex-row items-center overflow-hidden rounded-sm border p-0.5px focus-within:border-1.5 focus-within:border-focus focus-within:bg-surface focus-within:p-0 group-hover:bg-surface"
-    :class="[
-      {
-        // Padding is set to 1.5px to accommodate the border that will appear later.
-        'rounded-s-none border-s-0 ps-1.5px focus-within:rounded-s-none focus-within:border-s-0 focus-within:ps-1.5px':
-          connectionSides.includes('start'),
-        'rounded-e-none border-e-0 pe-1.5px focus-within:rounded-e-none focus-within:border-e-0 focus-within:pe-1.5px':
-          connectionSides.includes('end'),
-      },
-      sizeClass,
-      $attrs.class,
-    ]"
-  >
-    <input
-      :id="fieldId"
-      v-bind="nonClassAttrs"
-      ref="inputEl"
-      :placeholder="placeholder"
-      :type="type"
-      class="ms-4 h-full w-full appearance-none rounded-none bg-tx text-2xl font-semibold leading-none placeholder-gray-8 focus-visible:outline-none md:text-base"
-      :value="modelValue"
-      :aria-label="labelText"
-      @input="updateModelValue"
-    />
-
-    <!-- @slot Extra information goes here -->
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 import {
   ref,
@@ -144,6 +112,38 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    class="input-field group flex flex-row items-center overflow-hidden rounded-sm border p-0.5px focus-within:border-1.5 focus-within:border-focus focus-within:bg-surface focus-within:p-0 group-hover:bg-surface"
+    :class="[
+      {
+        // Padding is set to 1.5px to accommodate the border that will appear later.
+        'rounded-s-none border-s-0 ps-1.5px focus-within:rounded-s-none focus-within:border-s-0 focus-within:ps-1.5px':
+          connectionSides.includes('start'),
+        'rounded-e-none border-e-0 pe-1.5px focus-within:rounded-e-none focus-within:border-e-0 focus-within:pe-1.5px':
+          connectionSides.includes('end'),
+      },
+      sizeClass,
+      $attrs.class,
+    ]"
+  >
+    <input
+      :id="fieldId"
+      v-bind="nonClassAttrs"
+      ref="inputEl"
+      :placeholder="placeholder"
+      :type="type"
+      class="ms-4 h-full w-full appearance-none rounded-none bg-tx text-2xl font-semibold leading-none placeholder-gray-8 focus-visible:outline-none md:text-base"
+      :value="modelValue"
+      :aria-label="labelText"
+      @input="updateModelValue"
+    />
+
+    <!-- @slot Extra information goes here -->
+    <slot />
+  </div>
+</template>
+
 <style scoped>
 .input-field:focus-within .info {
   @apply text-default;
diff --git a/frontend/src/components/VItemGroup/VItem.vue b/frontend/src/components/VItemGroup/VItem.vue
index 37e9bc26dba..89bb6911d77 100644
--- a/frontend/src/components/VItemGroup/VItem.vue
+++ b/frontend/src/components/VItemGroup/VItem.vue
@@ -1,66 +1,3 @@
-<template>
-  <div
-    class="flex"
-    :class="[
-      contextProps.direction,
-      splitAttrs.class,
-      {
-        [`${contextProps.direction}-bordered`]: contextProps.bordered,
-        [`${contextProps.direction}-popover-item`]: isInPopover,
-        'border border-default': contextProps.bordered,
-        'has-check': contextProps.showCheck,
-        'font-semibold': selected && !contextProps.showCheck,
-        'bg-transparent':
-          selected && contextProps.bordered && contextProps.showCheck,
-      },
-      isInPopover ? 'px-2' : '',
-    ]"
-  >
-    <VButton
-      data-item-group-item
-      :as="as"
-      class="relative min-w-full justify-between border-0 hover:bg-transparent-hover focus-visible:z-10"
-      :class="{
-        'w-max': contextProps.direction === 'horizontal',
-        '!p-3': contextProps.size === 'small',
-        '!p-5 !ps-6': contextProps.size === 'medium',
-        'bg-transparent-hover ring-offset-gray-2':
-          selected && contextProps.showCheck,
-        'text-default': as === 'VLink',
-        '!px-2': !contextProps.showCheck,
-      }"
-      variant="transparent-tx"
-      size="disabled"
-      :pressed="selected"
-      :role="contextProps.type === 'radiogroup' ? 'radio' : 'menuitemcheckbox'"
-      :aria-checked="selected"
-      :tabindex="tabIndex"
-      v-bind="splitAttrs.vButtonAttrs"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-      @keydown="focusContext.onItemKeyPress"
-      @click="$emit('click')"
-    >
-      <div
-        class="flex w-full flex-grow gap-x-2 whitespace-nowrap rounded-sm"
-        :class="[`${contextProps.direction}-content`]"
-      >
-        <slot name="default" />
-      </div>
-      <VIcon
-        v-if="
-          selected &&
-          contextProps.direction === 'vertical' &&
-          contextProps.showCheck
-        "
-        class="absolute"
-        :class="contextProps.size === 'small' ? 'end-3' : 'end-5'"
-        name="item-indicator"
-      />
-    </VButton>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, inject, ref, computed, watch, PropType } from "vue"
 
@@ -177,6 +114,69 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    class="flex"
+    :class="[
+      contextProps.direction,
+      splitAttrs.class,
+      {
+        [`${contextProps.direction}-bordered`]: contextProps.bordered,
+        [`${contextProps.direction}-popover-item`]: isInPopover,
+        'border border-default': contextProps.bordered,
+        'has-check': contextProps.showCheck,
+        'font-semibold': selected && !contextProps.showCheck,
+        'bg-transparent':
+          selected && contextProps.bordered && contextProps.showCheck,
+      },
+      isInPopover ? 'px-2' : '',
+    ]"
+  >
+    <VButton
+      data-item-group-item
+      :as="as"
+      class="relative min-w-full justify-between border-0 hover:bg-transparent-hover focus-visible:z-10"
+      :class="{
+        'w-max': contextProps.direction === 'horizontal',
+        '!p-3': contextProps.size === 'small',
+        '!p-5 !ps-6': contextProps.size === 'medium',
+        'bg-transparent-hover ring-offset-gray-2':
+          selected && contextProps.showCheck,
+        'text-default': as === 'VLink',
+        '!px-2': !contextProps.showCheck,
+      }"
+      variant="transparent-tx"
+      size="disabled"
+      :pressed="selected"
+      :role="contextProps.type === 'radiogroup' ? 'radio' : 'menuitemcheckbox'"
+      :aria-checked="selected"
+      :tabindex="tabIndex"
+      v-bind="splitAttrs.vButtonAttrs"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+      @keydown="focusContext.onItemKeyPress"
+      @click="$emit('click')"
+    >
+      <div
+        class="flex w-full flex-grow gap-x-2 whitespace-nowrap rounded-sm"
+        :class="[`${contextProps.direction}-content`]"
+      >
+        <slot name="default" />
+      </div>
+      <VIcon
+        v-if="
+          selected &&
+          contextProps.direction === 'vertical' &&
+          contextProps.showCheck
+        "
+        class="absolute"
+        :class="contextProps.size === 'small' ? 'end-3' : 'end-5'"
+        name="item-indicator"
+      />
+    </VButton>
+  </div>
+</template>
+
 <style scoped>
 .vertical {
   @apply min-w-max;
diff --git a/frontend/src/components/VItemGroup/VItemGroup.vue b/frontend/src/components/VItemGroup/VItemGroup.vue
index 896564d7dbe..f26656fa00d 100644
--- a/frontend/src/components/VItemGroup/VItemGroup.vue
+++ b/frontend/src/components/VItemGroup/VItemGroup.vue
@@ -1,24 +1,3 @@
-<template>
-  <div
-    ref="nodeRef"
-    class="flex w-full"
-    :role="type"
-    :class="{
-      'flex-col': direction === 'vertical',
-      'flex-row': direction !== 'vertical',
-      'flex-wrap': direction === 'columns',
-    }"
-    @focusin="isFocused = true"
-    @focusout="isFocused = false"
-  >
-    <!--
-      @slot The items in the item group. Must include some `VItem`s but can
-      include additional elements as-needed.
-    -->
-    <slot name="default" />
-  </div>
-</template>
-
 <script lang="ts">
 import { useNuxtApp } from "#imports"
 
@@ -198,3 +177,24 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div
+    ref="nodeRef"
+    class="flex w-full"
+    :role="type"
+    :class="{
+      'flex-col': direction === 'vertical',
+      'flex-row': direction !== 'vertical',
+      'flex-wrap': direction === 'columns',
+    }"
+    @focusin="isFocused = true"
+    @focusout="isFocused = false"
+  >
+    <!--
+      @slot The items in the item group. Must include some `VItem`s but can
+      include additional elements as-needed.
+    -->
+    <slot name="default" />
+  </div>
+</template>
diff --git a/frontend/src/components/VLicense/VLicense.vue b/frontend/src/components/VLicense/VLicense.vue
index 62811aa7009..9bafaee275f 100644
--- a/frontend/src/components/VLicense/VLicense.vue
+++ b/frontend/src/components/VLicense/VLicense.vue
@@ -1,21 +1,3 @@
-<template>
-  <div class="license flex flex-row items-center gap-2">
-    <div class="flex gap-1">
-      <VIcon
-        v-for="name in iconNames"
-        :key="name"
-        :class="{ 'license-bg text-black': bgFilled }"
-        view-box="0 0 30 30"
-        :name="`licenses/${name}`"
-        :size="4"
-      />
-    </div>
-    <span v-show="!hideName" class="name" :aria-label="licenseName.readable">
-      {{ licenseName.full }}
-    </span>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -79,6 +61,24 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div class="license flex flex-row items-center gap-2">
+    <div class="flex gap-1">
+      <VIcon
+        v-for="name in iconNames"
+        :key="name"
+        :class="{ 'license-bg text-black': bgFilled }"
+        view-box="0 0 30 30"
+        :name="`licenses/${name}`"
+        :size="4"
+      />
+    </div>
+    <span v-show="!hideName" class="name" :aria-label="licenseName.readable">
+      {{ licenseName.full }}
+    </span>
+  </div>
+</template>
+
 <style scoped>
 .license-bg {
   background-image: radial-gradient(circle, #ffffff 60%, transparent 60%);
diff --git a/frontend/src/components/VLicense/VLicenseElements.vue b/frontend/src/components/VLicense/VLicenseElements.vue
index 0b5bfd5ea58..e88a9d756a4 100644
--- a/frontend/src/components/VLicense/VLicenseElements.vue
+++ b/frontend/src/components/VLicense/VLicenseElements.vue
@@ -1,25 +1,3 @@
-<template>
-  <ul>
-    <li
-      v-for="element in elementNames"
-      :key="element"
-      class="mb-2 flex items-center gap-3 text-sm md:mb-4 md:text-base"
-    >
-      <VIcon
-        view-box="0 0 30 30"
-        :size="isSmall || isMobile ? 5 : 6"
-        :name="`licenses/${element}`"
-      />
-      <span v-if="elementNames.length > 1" class="sr-only">{{
-        element.toUpperCase()
-      }}</span>
-      <p class="label-regular" :class="{ 'md:description-regular': !isSmall }">
-        {{ getLicenseDescription(element) }}
-      </p>
-    </li>
-  </ul>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -76,3 +54,25 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <ul>
+    <li
+      v-for="element in elementNames"
+      :key="element"
+      class="mb-2 flex items-center gap-3 text-sm md:mb-4 md:text-base"
+    >
+      <VIcon
+        view-box="0 0 30 30"
+        :size="isSmall || isMobile ? 5 : 6"
+        :name="`licenses/${element}`"
+      />
+      <span v-if="elementNames.length > 1" class="sr-only">{{
+        element.toUpperCase()
+      }}</span>
+      <p class="label-regular" :class="{ 'md:description-regular': !isSmall }">
+        {{ getLicenseDescription(element) }}
+      </p>
+    </li>
+  </ul>
+</template>
diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
index 14d18023feb..e25bfdb74ec 100644
--- a/frontend/src/components/VLoadMore.vue
+++ b/frontend/src/components/VLoadMore.vue
@@ -1,19 +1,3 @@
-<template>
-  <div ref="loadMoreSectionRef" class="w-full">
-    <VButton
-      v-show="canLoadMore"
-      class="label-bold lg:description-bold h-16 w-full lg:h-18"
-      variant="filled-gray"
-      size="disabled"
-      :disabled="isFetching"
-      data-testid="load-more"
-      @click="onLoadMore"
-    >
-      {{ buttonLabel }}
-    </VButton>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n, useNuxtApp, useRoute } from "#imports"
 
@@ -163,3 +147,19 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div ref="loadMoreSectionRef" class="w-full">
+    <VButton
+      v-show="canLoadMore"
+      class="label-bold lg:description-bold h-16 w-full lg:h-18"
+      variant="filled-gray"
+      size="disabled"
+      :disabled="isFetching"
+      data-testid="load-more"
+      @click="onLoadMore"
+    >
+      {{ buttonLabel }}
+    </VButton>
+  </div>
+</template>
diff --git a/frontend/src/components/VLogoLoader/VLogoLoader.vue b/frontend/src/components/VLogoLoader/VLogoLoader.vue
index b439db4524f..088097ddb34 100644
--- a/frontend/src/components/VLogoLoader/VLogoLoader.vue
+++ b/frontend/src/components/VLogoLoader/VLogoLoader.vue
@@ -1,3 +1,24 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+import { useReducedMotion } from "~/composables/use-reduced-motion"
+
+export default defineComponent({
+  name: "VLogoLoader",
+  props: {
+    status: {
+      type: String as PropType<"loading" | "idle">,
+      default: "idle",
+    },
+  },
+  setup() {
+    const prefersReducedMotion = useReducedMotion()
+
+    return { prefersReducedMotion }
+  },
+})
+</script>
+
 <template>
   <svg
     viewBox="0 0 34 32"
@@ -38,27 +59,6 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import { useReducedMotion } from "~/composables/use-reduced-motion"
-
-export default defineComponent({
-  name: "VLogoLoader",
-  props: {
-    status: {
-      type: String as PropType<"loading" | "idle">,
-      default: "idle",
-    },
-  },
-  setup() {
-    const prefersReducedMotion = useReducedMotion()
-
-    return { prefersReducedMotion }
-  },
-})
-</script>
-
 <style scoped>
 /**
   Openverse Logo Loader
diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
index 016d68a7f25..3ae2441f0d6 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -1,19 +1,3 @@
-<template>
-  <VScrollableLine>
-    <VSourceCreatorButton
-      v-if="creator"
-      :title="creator.name"
-      :href="creator.href"
-      icon-name="person"
-    />
-    <VSourceCreatorButton
-      :href="sourceHref"
-      icon-name="institution"
-      :title="media.sourceName"
-    />
-  </VScrollableLine>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
@@ -73,3 +57,19 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VScrollableLine>
+    <VSourceCreatorButton
+      v-if="creator"
+      :title="creator.name"
+      :href="creator.href"
+      icon-name="person"
+    />
+    <VSourceCreatorButton
+      :href="sourceHref"
+      icon-name="institution"
+      :title="media.sourceName"
+    />
+  </VScrollableLine>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
index 8a216202a63..a169d7568ac 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
@@ -1,15 +1,3 @@
-<template>
-  <div class="absolute z-10 h-8 w-8 flex-none">
-    <VIconButton
-      :icon-props="{ name: iconName, rtlFlip: true }"
-      :label="label"
-      variant="transparent-gray"
-      size="small"
-      @click="$emit('click')"
-    />
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -51,3 +39,15 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="absolute z-10 h-8 w-8 flex-none">
+    <VIconButton
+      :icon-props="{ name: iconName, rtlFlip: true }"
+      :label="label"
+      variant="transparent-gray"
+      size="small"
+      @click="$emit('click')"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
index 4dd77a3a71a..0d07ac6c7e9 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -1,17 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    size="small"
-    has-icon-start
-    class="label-bold !bg-secondary hover:!bg-tertiary hover:!text-over-dark sm:!bg-tx"
-    variant="transparent-gray"
-    :href="href"
-  >
-    <VIcon :name="iconName" />
-    <span class="w-max">{{ title }}</span>
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -37,3 +23,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    size="small"
+    has-icon-start
+    class="label-bold !bg-secondary hover:!bg-tertiary hover:!text-over-dark sm:!bg-tx"
+    variant="transparent-gray"
+    :href="href"
+  >
+    <VIcon :name="iconName" />
+    <span class="w-max">{{ title }}</span>
+  </VButton>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
index ef16bb48023..7d133f5544a 100644
--- a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
+++ b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
@@ -1,36 +1,3 @@
-<template>
-  <div class="-my-1.5px">
-    <ul
-      ref="tagsContainerRef"
-      class="flex flex-wrap gap-3 overflow-y-hidden p-1.5px"
-      :class="heightClass"
-    >
-      <li v-for="tag in visibleTags" :key="tag">
-        <VTag :href="localizedTagPath(tag)">{{ tag }}</VTag>
-      </li>
-    </ul>
-    <VButton
-      v-if="hasOverflow"
-      size="small"
-      variant="transparent-tx"
-      has-icon-end
-      class="label-bold -ms-2 mt-4 hover:underline"
-      :aria-expanded="buttonStatus === 'show' ? 'false' : 'true'"
-      @click="handleClick"
-      >{{
-        $t(
-          buttonStatus === "show"
-            ? "mediaDetails.tags.showMore"
-            : "mediaDetails.tags.showLess"
-        )
-      }}<VIcon
-        name="caret-down"
-        :size="4"
-        :class="{ '-scale-y-100 transform': buttonStatus === 'hide' }"
-    /></VButton>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
@@ -228,3 +195,36 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="-my-1.5px">
+    <ul
+      ref="tagsContainerRef"
+      class="flex flex-wrap gap-3 overflow-y-hidden p-1.5px"
+      :class="heightClass"
+    >
+      <li v-for="tag in visibleTags" :key="tag">
+        <VTag :href="localizedTagPath(tag)">{{ tag }}</VTag>
+      </li>
+    </ul>
+    <VButton
+      v-if="hasOverflow"
+      size="small"
+      variant="transparent-tx"
+      has-icon-end
+      class="label-bold -ms-2 mt-4 hover:underline"
+      :aria-expanded="buttonStatus === 'show' ? 'false' : 'true'"
+      @click="handleClick"
+      >{{
+        $t(
+          buttonStatus === "show"
+            ? "mediaDetails.tags.showMore"
+            : "mediaDetails.tags.showLess"
+        )
+      }}<VIcon
+        name="caret-down"
+        :size="4"
+        :class="{ '-scale-y-100 transform': buttonStatus === 'hide' }"
+    /></VButton>
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VCopyLicense.vue b/frontend/src/components/VMediaInfo/VCopyLicense.vue
index 375fbd77a7c..49d863508e8 100644
--- a/frontend/src/components/VMediaInfo/VCopyLicense.vue
+++ b/frontend/src/components/VMediaInfo/VCopyLicense.vue
@@ -1,60 +1,3 @@
-<template>
-  <div>
-    <h3 id="copy-license-title" class="description-bold md:heading-6 mb-4">
-      {{ $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}`) }}
-        </VTab>
-      </template>
-      <VLicenseTabPanel
-        :tab="tabs[0]"
-        :media-id="media.id"
-        :media-type="media.frontendMediaType"
-      >
-        <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          ref="richRef"
-          v-html="getAttributionMarkup({ includeIcons: false })"
-        />
-        <!-- eslint-enable vue/no-v-html -->
-      </VLicenseTabPanel>
-      <VLicenseTabPanel
-        :tab="tabs[1]"
-        :media-id="media.id"
-        :media-type="media.frontendMediaType"
-      >
-        <!-- Ignore reason: the interpolated string cannot have any whitespace around it when inside <p>, else there will be unwanted whitespace -->
-        <!-- prettier-ignore -->
-        <p id="attribution-html" class="break-all font-mono" dir="ltr">{{ getAttributionMarkup() }}</p>
-      </VLicenseTabPanel>
-      <VLicenseTabPanel
-        :tab="tabs[2]"
-        :media-id="media.id"
-        :media-type="media.frontendMediaType"
-      >
-        <p>{{ getAttributionMarkup({ isPlaintext: true }) }}</p>
-      </VLicenseTabPanel>
-      <VLicenseTabPanel
-        :tab="tabs[3]"
-        :media-id="media.id"
-        :media-type="media.frontendMediaType"
-      >
-        <pre
-          id="attribution-xml"
-          class="whitespace-pre-wrap break-all"
-          dir="ltr"
-          >{{ getAttributionMarkup({ isXml: true }) }}</pre
-        >
-      </VLicenseTabPanel>
-    </VTabs>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -119,3 +62,60 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <h3 id="copy-license-title" class="description-bold md:heading-6 mb-4">
+      {{ $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}`) }}
+        </VTab>
+      </template>
+      <VLicenseTabPanel
+        :tab="tabs[0]"
+        :media-id="media.id"
+        :media-type="media.frontendMediaType"
+      >
+        <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          ref="richRef"
+          v-html="getAttributionMarkup({ includeIcons: false })"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+      </VLicenseTabPanel>
+      <VLicenseTabPanel
+        :tab="tabs[1]"
+        :media-id="media.id"
+        :media-type="media.frontendMediaType"
+      >
+        <!-- Ignore reason: the interpolated string cannot have any whitespace around it when inside <p>, else there will be unwanted whitespace -->
+        <!-- prettier-ignore -->
+        <p id="attribution-html" class="break-all font-mono" dir="ltr">{{ getAttributionMarkup() }}</p>
+      </VLicenseTabPanel>
+      <VLicenseTabPanel
+        :tab="tabs[2]"
+        :media-id="media.id"
+        :media-type="media.frontendMediaType"
+      >
+        <p>{{ getAttributionMarkup({ isPlaintext: true }) }}</p>
+      </VLicenseTabPanel>
+      <VLicenseTabPanel
+        :tab="tabs[3]"
+        :media-id="media.id"
+        :media-type="media.frontendMediaType"
+      >
+        <pre
+          id="attribution-xml"
+          class="whitespace-pre-wrap break-all"
+          dir="ltr"
+          >{{ getAttributionMarkup({ isXml: true }) }}</pre
+        >
+      </VLicenseTabPanel>
+    </VTabs>
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VGetMediaButton.vue b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
index 2b75ca01e42..daaa58f068f 100644
--- a/frontend/src/components/VMediaInfo/VGetMediaButton.vue
+++ b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
@@ -1,20 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    :href="media.foreign_landing_url"
-    size="large"
-    variant="filled-pink-8"
-    has-icon-end
-    show-external-icon
-    :external-icon-size="6"
-    class="description-bold"
-    :send-external-link-click-event="false"
-    @click="sendGetMediaEvent"
-  >
-    {{ $t(`${mediaType}Details.weblink`) }}
-  </VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -53,3 +36,20 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    :href="media.foreign_landing_url"
+    size="large"
+    variant="filled-pink-8"
+    has-icon-end
+    show-external-icon
+    :external-icon-size="6"
+    class="description-bold"
+    :send-external-link-click-event="false"
+    @click="sendGetMediaEvent"
+  >
+    {{ $t(`${mediaType}Details.weblink`) }}
+  </VButton>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue b/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
index 852fcdc7b62..d95095ec0b4 100644
--- a/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
+++ b/frontend/src/components/VMediaInfo/VLicenseTabPanel.vue
@@ -1,20 +1,3 @@
-<template>
-  <VTabPanel
-    :id="tab"
-    class="flex h-[190px] flex-col items-start justify-between text-sm md:text-base"
-  >
-    <div :id="`panel-slot-${tab}`" class="overflow-y-auto">
-      <slot />
-    </div>
-    <VCopyButton
-      :id="`copyattr-${tab}`"
-      :el="`#panel-slot-${tab}`"
-      class="mt-6"
-      @copied="handleCopy"
-    />
-  </VTabPanel>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -71,3 +54,20 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VTabPanel
+    :id="tab"
+    class="flex h-[190px] flex-col items-start justify-between text-sm md:text-base"
+  >
+    <div :id="`panel-slot-${tab}`" class="overflow-y-auto">
+      <slot />
+    </div>
+    <VCopyButton
+      :id="`copyattr-${tab}`"
+      :el="`#panel-slot-${tab}`"
+      class="mt-6"
+      @copied="handleCopy"
+    />
+  </VTabPanel>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VMediaInfo.vue b/frontend/src/components/VMediaInfo/VMediaInfo.vue
index 14fe439b22c..80ebd4c0436 100644
--- a/frontend/src/components/VMediaInfo/VMediaInfo.vue
+++ b/frontend/src/components/VMediaInfo/VMediaInfo.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="w-full lg:w-auto">
-    <h1 class="heading-6 mb-3 sm:mb-1">{{ media.title }}</h1>
-    <VByLine :media="media" />
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -25,3 +18,10 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="w-full lg:w-auto">
+    <h1 class="heading-6 mb-3 sm:mb-1">{{ media.title }}</h1>
+    <VByLine :media="media" />
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VMediaLicense.vue b/frontend/src/components/VMediaInfo/VMediaLicense.vue
index 74ecc23bd6d..b846cbd61f2 100644
--- a/frontend/src/components/VMediaInfo/VMediaLicense.vue
+++ b/frontend/src/components/VMediaInfo/VMediaLicense.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="media-attribution">
-    <h3 class="description-bold md:heading-6 mb-4">
-      {{ headerText }}
-    </h3>
-
-    <template v-if="isLicense">
-      <i18n-t
-        scope="global"
-        keypath="mediaDetails.reuse.attribution"
-        tag="span"
-        class="mb-2 block text-sm md:mb-4 md:text-base"
-      >
-        <template #link>
-          <VLink
-            :href="licenseUrl"
-            :send-external-link-click-event="false"
-            @click="sendVisitLicensePage"
-          >
-            {{ fullLicenseName }}
-          </VLink>
-        </template>
-      </i18n-t>
-      <VLicenseElements :license="license" />
-    </template>
-
-    <template v-else>
-      <VLicenseElements :license="license" />
-      <i18n-t
-        scope="global"
-        keypath="mediaDetails.reuse.tool.content"
-        tag="span"
-        class="description-bold"
-      >
-        <template #link>
-          <VLink
-            :aria-label="$t('mediaDetails.aria.attribution.tool')"
-            :href="licenseUrl"
-            :send-external-link-click-event="false"
-            @click="sendVisitLicensePage"
-            >{{ $t("mediaDetails.reuse.tool.link") }}</VLink
-          >
-        </template>
-      </i18n-t>
-    </template>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -105,3 +57,51 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="media-attribution">
+    <h3 class="description-bold md:heading-6 mb-4">
+      {{ headerText }}
+    </h3>
+
+    <template v-if="isLicense">
+      <i18n-t
+        scope="global"
+        keypath="mediaDetails.reuse.attribution"
+        tag="span"
+        class="mb-2 block text-sm md:mb-4 md:text-base"
+      >
+        <template #link>
+          <VLink
+            :href="licenseUrl"
+            :send-external-link-click-event="false"
+            @click="sendVisitLicensePage"
+          >
+            {{ fullLicenseName }}
+          </VLink>
+        </template>
+      </i18n-t>
+      <VLicenseElements :license="license" />
+    </template>
+
+    <template v-else>
+      <VLicenseElements :license="license" />
+      <i18n-t
+        scope="global"
+        keypath="mediaDetails.reuse.tool.content"
+        tag="span"
+        class="description-bold"
+      >
+        <template #link>
+          <VLink
+            :aria-label="$t('mediaDetails.aria.attribution.tool')"
+            :href="licenseUrl"
+            :send-external-link-click-event="false"
+            @click="sendVisitLicensePage"
+            >{{ $t("mediaDetails.reuse.tool.link") }}</VLink
+          >
+        </template>
+      </i18n-t>
+    </template>
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VMediaReuse.vue b/frontend/src/components/VMediaInfo/VMediaReuse.vue
index ca070685300..31cdc2ed003 100644
--- a/frontend/src/components/VMediaInfo/VMediaReuse.vue
+++ b/frontend/src/components/VMediaInfo/VMediaReuse.vue
@@ -1,3 +1,23 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+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,
+    },
+  },
+})
+</script>
+
 <template>
   <section :aria-label="$t('mediaDetails.reuse.title')" class="media-reuse">
     <h2 class="heading-6 md:heading-5 mb-4">
@@ -26,23 +46,3 @@
     </div>
   </section>
 </template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-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,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index caf5637e386..aac042c97f5 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,30 +1,3 @@
-<template>
-  <div class="flex flex-col gap-6 sm:gap-8">
-    <div v-if="hasSourceTags">
-      <h3 v-if="hasGeneratedTags" class="label-regular mb-2">
-        {{ $t("mediaDetails.tags.source.heading") }}
-      </h3>
-      <h3 v-else class="sr-only">{{ $t("mediaDetails.tags.title") }}</h3>
-      <VCollapsibleTagSection
-        :media-type="mediaType"
-        :tags="tagsByType.source"
-      />
-    </div>
-    <div v-if="hasGeneratedTags">
-      <div class="label-regular mb-2 flex gap-2">
-        <h3>{{ $t("mediaDetails.tags.generated.heading") }}</h3>
-        <VLink :href="tagsPagePath">{{
-          $t("mediaDetails.tags.generated.pageTitle")
-        }}</VLink>
-      </div>
-      <VCollapsibleTagSection
-        :media-type="mediaType"
-        :tags="tagsByType.generated"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { useLocalePath } from "#imports"
 
@@ -83,3 +56,30 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="flex flex-col gap-6 sm:gap-8">
+    <div v-if="hasSourceTags">
+      <h3 v-if="hasGeneratedTags" class="label-regular mb-2">
+        {{ $t("mediaDetails.tags.source.heading") }}
+      </h3>
+      <h3 v-else class="sr-only">{{ $t("mediaDetails.tags.title") }}</h3>
+      <VCollapsibleTagSection
+        :media-type="mediaType"
+        :tags="tagsByType.source"
+      />
+    </div>
+    <div v-if="hasGeneratedTags">
+      <div class="label-regular mb-2 flex gap-2">
+        <h3>{{ $t("mediaDetails.tags.generated.heading") }}</h3>
+        <VLink :href="tagsPagePath">{{
+          $t("mediaDetails.tags.generated.pageTitle")
+        }}</VLink>
+      </div>
+      <VCollapsibleTagSection
+        :media-type="mediaType"
+        :tags="tagsByType.generated"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index 0726ec474cd..6cc8509ce20 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -1,46 +1,3 @@
-<template>
-  <dl v-if="isSm" class="metadata grid gap-8" :style="columnCount">
-    <div v-for="datum in metadata" :key="datum.label">
-      <VSourceProviderTooltip
-        v-if="tooltipId(datum)"
-        :described-by="tooltipId(datum)"
-        class="label-regular -ms-1 mb-1 flex flex-row items-center ps-1"
-        :datum="datum"
-      />
-      <dt v-else class="label-regular mb-1 flex flex-row ps-1">
-        {{ $t(datum.label) }}
-      </dt>
-      <VMetadataValue
-        :datum="datum"
-        :class="{ '-ms-1': Boolean(tooltipId(datum)) }"
-        @click="sendVisitSourceLinkEvent(datum.source)"
-      />
-    </div>
-  </dl>
-  <dl v-else class="grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
-    <template v-for="datum in metadata" :key="datum.label">
-      <VSourceProviderTooltip
-        v-if="tooltipId(datum)"
-        :described-by="tooltipId(datum)"
-        class="label-regular -ms-1 flex flex-row items-center p-1 sm:ms-0 sm:py-0 sm:pe-0"
-        :datum="datum"
-      />
-      <dt
-        v-else
-        :id="datum.label"
-        :key="datum.label"
-        class="label-regular flex flex-row pt-1"
-      >
-        {{ $t(datum.label) }}
-      </dt>
-      <VMetadataValue
-        :datum="datum"
-        @click="sendVisitSourceLinkEvent(datum.source)"
-      />
-    </template>
-  </dl>
-</template>
-
 <script lang="ts">
 import { firstParam, useNuxtApp, useRoute } from "#imports"
 
@@ -102,6 +59,49 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <dl v-if="isSm" class="metadata grid gap-8" :style="columnCount">
+    <div v-for="datum in metadata" :key="datum.label">
+      <VSourceProviderTooltip
+        v-if="tooltipId(datum)"
+        :described-by="tooltipId(datum)"
+        class="label-regular -ms-1 mb-1 flex flex-row items-center ps-1"
+        :datum="datum"
+      />
+      <dt v-else class="label-regular mb-1 flex flex-row ps-1">
+        {{ $t(datum.label) }}
+      </dt>
+      <VMetadataValue
+        :datum="datum"
+        :class="{ '-ms-1': Boolean(tooltipId(datum)) }"
+        @click="sendVisitSourceLinkEvent(datum.source)"
+      />
+    </div>
+  </dl>
+  <dl v-else class="grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
+    <template v-for="datum in metadata" :key="datum.label">
+      <VSourceProviderTooltip
+        v-if="tooltipId(datum)"
+        :described-by="tooltipId(datum)"
+        class="label-regular -ms-1 flex flex-row items-center p-1 sm:ms-0 sm:py-0 sm:pe-0"
+        :datum="datum"
+      />
+      <dt
+        v-else
+        :id="datum.label"
+        :key="datum.label"
+        class="label-regular flex flex-row pt-1"
+      >
+        {{ $t(datum.label) }}
+      </dt>
+      <VMetadataValue
+        :datum="datum"
+        @click="sendVisitSourceLinkEvent(datum.source)"
+      />
+    </template>
+  </dl>
+</template>
+
 <style scoped>
 @screen sm {
   .metadata {
diff --git a/frontend/src/components/VMediaInfo/VMetadataValue.vue b/frontend/src/components/VMediaInfo/VMetadataValue.vue
index 466ccd23dac..077abb86dac 100644
--- a/frontend/src/components/VMediaInfo/VMetadataValue.vue
+++ b/frontend/src/components/VMediaInfo/VMetadataValue.vue
@@ -1,23 +1,3 @@
-<template>
-  <dd class="label-bold flex justify-start overflow-hidden break-words p-1">
-    <VLink
-      v-if="datum.url"
-      :href="datum.url"
-      class="focus-visible:ring-border-focus flex text-link focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-1"
-      :send-external-link-click-event="false"
-      @click="$emit('click', datum.source)"
-      ><span
-        >{{ datum.value
-        }}<VIcon
-          name="external-link"
-          :size="4"
-          class="ms-1 inline-flex"
-          rtl-flip /></span
-    ></VLink>
-    <template v-else>{{ datum.value }}</template>
-  </dd>
-</template>
-
 <script lang="ts">
 import type { Metadata } from "~/types/media"
 
@@ -43,3 +23,23 @@ export default {
   },
 }
 </script>
+
+<template>
+  <dd class="label-bold flex justify-start overflow-hidden break-words p-1">
+    <VLink
+      v-if="datum.url"
+      :href="datum.url"
+      class="focus-visible:ring-border-focus flex text-link focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-1"
+      :send-external-link-click-event="false"
+      @click="$emit('click', datum.source)"
+      ><span
+        >{{ datum.value
+        }}<VIcon
+          name="external-link"
+          :size="4"
+          class="ms-1 inline-flex"
+          rtl-flip /></span
+    ></VLink>
+    <template v-else>{{ datum.value }}</template>
+  </dd>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VRelatedMedia.vue b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
index cb0b9d5c933..4466a68f17a 100644
--- a/frontend/src/components/VMediaInfo/VRelatedMedia.vue
+++ b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
@@ -1,26 +1,3 @@
-<template>
-  <VMediaCollection
-    v-if="showRelated"
-    :results="results"
-    :is-fetching="isFetching"
-    :collection-label="collectionLabel"
-    kind="related"
-    :related-to="relatedTo"
-    :search-term="searchTerm"
-    :aria-label="collectionLabel"
-  >
-    <template #header>
-      <h2
-        id="related-heading"
-        class="heading-6 mb-6"
-        :class="results.type === 'image' ? 'md:heading-5' : 'lg:heading-6'"
-      >
-        {{ collectionLabel }}
-      </h2>
-    </template>
-  </VMediaCollection>
-</template>
-
 <script lang="ts">
 import { useRoute, useI18n, firstParam } from "#imports"
 
@@ -98,3 +75,26 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VMediaCollection
+    v-if="showRelated"
+    :results="results"
+    :is-fetching="isFetching"
+    :collection-label="collectionLabel"
+    kind="related"
+    :related-to="relatedTo"
+    :search-term="searchTerm"
+    :aria-label="collectionLabel"
+  >
+    <template #header>
+      <h2
+        id="related-heading"
+        class="heading-6 mb-6"
+        :class="results.type === 'image' ? 'md:heading-5' : 'lg:heading-6'"
+      >
+        {{ collectionLabel }}
+      </h2>
+    </template>
+  </VMediaCollection>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
index eedecb2ae2b..0e71054817d 100644
--- a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
+++ b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
@@ -1,18 +1,3 @@
-<template>
-  <dt>
-    {{ $t(datum.label) }}
-    <VTooltip placement="top" :described-by="describedBy" class="ms-1">
-      <template #default>
-        <p
-          class="caption-regular rounded-sm bg-tertiary px-2 py-1 text-over-dark"
-        >
-          {{ description }}
-        </p>
-      </template>
-    </VTooltip>
-  </dt>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -54,3 +39,18 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <dt>
+    {{ $t(datum.label) }}
+    <VTooltip placement="top" :described-by="describedBy" class="ms-1">
+      <template #default>
+        <p
+          class="caption-regular rounded-sm bg-tertiary px-2 py-1 text-over-dark"
+        >
+          {{ description }}
+        </p>
+      </template>
+    </VTooltip>
+  </dt>
+</template>
diff --git a/frontend/src/components/VPill.vue b/frontend/src/components/VPill.vue
index ce08b94b3d5..64714b8f4e3 100644
--- a/frontend/src/components/VPill.vue
+++ b/frontend/src/components/VPill.vue
@@ -1,11 +1,3 @@
-<template>
-  <div
-    class="w-min rounded-sm bg-complementary px-2 py-1 text-sm font-semibold uppercase"
-  >
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -13,3 +5,11 @@ export default defineComponent({
   name: "VPill",
 })
 </script>
+
+<template>
+  <div
+    class="w-min rounded-sm bg-complementary px-2 py-1 text-sm font-semibold uppercase"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/VPopover/VPopoverContent.vue b/frontend/src/components/VPopover/VPopoverContent.vue
index cb5c47a1ef3..2956309df30 100644
--- a/frontend/src/components/VPopover/VPopoverContent.vue
+++ b/frontend/src/components/VPopover/VPopoverContent.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    v-show="visible"
-    ref="popoverRef"
-    role="dialog"
-    aria-modal="true"
-    class="popover-content w-max-content absolute left-0 top-0 overflow-y-auto overflow-x-hidden rounded-sm border border-default bg-overlay shadow"
-    :class="`z-${zIndex}`"
-    :style="{ ...heightProperties, ...style }"
-    :tabindex="-1"
-    :aria-hidden="!visible"
-    @blur="onBlur"
-    @keydown="onKeyDown"
-  >
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 import {
   defineComponent,
@@ -118,6 +100,24 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    v-show="visible"
+    ref="popoverRef"
+    role="dialog"
+    aria-modal="true"
+    class="popover-content w-max-content absolute left-0 top-0 overflow-y-auto overflow-x-hidden rounded-sm border border-default bg-overlay shadow"
+    :class="`z-${zIndex}`"
+    :style="{ ...heightProperties, ...style }"
+    :tabindex="-1"
+    :aria-hidden="!visible"
+    @blur="onBlur"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </div>
+</template>
+
 <style>
 .popover-content {
   height: var(--popover-height, auto);
diff --git a/frontend/src/components/VRadio/VRadio.vue b/frontend/src/components/VRadio/VRadio.vue
index 447c1b760e1..677ff35663e 100644
--- a/frontend/src/components/VRadio/VRadio.vue
+++ b/frontend/src/components/VRadio/VRadio.vue
@@ -1,25 +1,3 @@
-<template>
-  <label :for="id" class="radio-label relative flex leading-5">
-    <input
-      :id="id"
-      v-bind="$attrs"
-      :value="value"
-      class="radio focus-visible:ring-border-focus relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-tertiary bg-default focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-2 disabled:border-disabled disabled:bg-secondary"
-      type="radio"
-      :checked="isChecked"
-      @input="handleInput"
-    />
-    <VSvg
-      name="radiomark"
-      class="radiomark absolute start-0 h-5 w-5 text-default opacity-0 transition-opacity"
-      width="20"
-      height="20"
-    />
-    <!--  @slot Label content goes here  -->
-    <slot />
-  </label>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
@@ -78,6 +56,28 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <label :for="id" class="radio-label relative flex leading-5">
+    <input
+      :id="id"
+      v-bind="$attrs"
+      :value="value"
+      class="radio focus-visible:ring-border-focus relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-tertiary bg-default focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-2 disabled:border-disabled disabled:bg-secondary"
+      type="radio"
+      :checked="isChecked"
+      @input="handleInput"
+    />
+    <VSvg
+      name="radiomark"
+      class="radiomark absolute start-0 h-5 w-5 text-default opacity-0 transition-opacity"
+      width="20"
+      height="20"
+    />
+    <!--  @slot Label content goes here  -->
+    <slot />
+  </label>
+</template>
+
 <style scoped>
 .radio:checked ~ .radiomark {
   @apply opacity-100;
diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
index 712b6fad5e9..a7d2495150e 100644
--- a/frontend/src/components/VRecentSearches/VRecentSearches.vue
+++ b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,3 +1,68 @@
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+
+import { defineEvent } from "~/types/emits"
+
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+/**
+ * List the recent searches of the user allowing them to go back to a previous
+ * search. These searches are saved locally and never shared with the server.
+ */
+export default defineComponent({
+  name: "VRecentSearches",
+  components: { VIconButton, VIcon, VButton },
+  props: {
+    /**
+     * the list of saved past searches
+     */
+    entries: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    /**
+     * the index of the currently selected entry
+     */
+    selectedIdx: {
+      type: Number,
+    },
+    /**
+     * the desktop popover is bordered, and the mobile element is not
+     */
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: {
+    select: defineEvent<[number]>(),
+    clear: defineEvent<[string?]>(),
+    "last-tab": defineEvent(),
+  },
+  setup(props, { emit }) {
+    const handleClick = (idx: number) => {
+      emit("select", idx)
+    }
+    const handleClear = (entry?: string) => {
+      emit("clear", entry)
+    }
+    const handleTab = (idx: number) => {
+      if (idx === props.entries.length - 1) {
+        emit("last-tab")
+      }
+    }
+
+    return {
+      handleClick,
+      handleClear,
+      handleTab,
+    }
+  },
+})
+</script>
+
 <template>
   <div
     class="flex flex-col rounded-sm bg-default"
@@ -72,68 +137,3 @@
     </span>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import { defineEvent } from "~/types/emits"
-
-import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
-/**
- * List the recent searches of the user allowing them to go back to a previous
- * search. These searches are saved locally and never shared with the server.
- */
-export default defineComponent({
-  name: "VRecentSearches",
-  components: { VIconButton, VIcon, VButton },
-  props: {
-    /**
-     * the list of saved past searches
-     */
-    entries: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    /**
-     * the index of the currently selected entry
-     */
-    selectedIdx: {
-      type: Number,
-    },
-    /**
-     * the desktop popover is bordered, and the mobile element is not
-     */
-    bordered: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: {
-    select: defineEvent<[number]>(),
-    clear: defineEvent<[string?]>(),
-    "last-tab": defineEvent(),
-  },
-  setup(props, { emit }) {
-    const handleClick = (idx: number) => {
-      emit("select", idx)
-    }
-    const handleClear = (entry?: string) => {
-      emit("clear", entry)
-    }
-    const handleTab = (idx: number) => {
-      if (idx === props.entries.length - 1) {
-        emit("last-tab")
-      }
-    }
-
-    return {
-      handleClick,
-      handleClear,
-      handleTab,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
index 3643098fc86..0953de715a3 100644
--- a/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
+++ b/frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue
@@ -1,50 +1,3 @@
-<template>
-  <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") }}
-      </h4>
-    </header>
-    <i18n-t
-      scope="global"
-      tag="p"
-      keypath="filters.safeBrowsing.desc"
-      class="label-regular"
-    >
-      <template #sensitive>
-        <VLink :href="sensitivityPath">{{
-          $t("filters.safeBrowsing.sensitive")
-        }}</VLink>
-      </template>
-    </i18n-t>
-    <form class="safe-browsing-form">
-      <fieldset class="mb-10 mt-8 flex flex-col gap-8">
-        <div v-for="toggle in toggles" :key="toggle.name">
-          <VCheckbox
-            :id="toggle.name"
-            class="flex-row-reverse justify-between"
-            :value="toggle.name"
-            :checked="toggle.state.value"
-            :disabled="isDisabled(toggle.name)"
-            is-switch
-            @change="toggle.switchFn"
-          >
-            <span class="label-bold">{{
-              $t(`filters.safeBrowsing.toggles.${toggle.name}.title`)
-            }}</span>
-          </VCheckbox>
-          <p
-            class="label-regular mt-2"
-            :class="{ 'text-disabled': isDisabled(toggle.name) }"
-          >
-            {{ $t(`filters.safeBrowsing.toggles.${toggle.name}.desc`) }}
-          </p>
-        </div>
-      </fieldset>
-    </form>
-  </section>
-</template>
-
 <script lang="ts">
 import { useLocalePath } from "#imports"
 
@@ -122,3 +75,50 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <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") }}
+      </h4>
+    </header>
+    <i18n-t
+      scope="global"
+      tag="p"
+      keypath="filters.safeBrowsing.desc"
+      class="label-regular"
+    >
+      <template #sensitive>
+        <VLink :href="sensitivityPath">{{
+          $t("filters.safeBrowsing.sensitive")
+        }}</VLink>
+      </template>
+    </i18n-t>
+    <form class="safe-browsing-form">
+      <fieldset class="mb-10 mt-8 flex flex-col gap-8">
+        <div v-for="toggle in toggles" :key="toggle.name">
+          <VCheckbox
+            :id="toggle.name"
+            class="flex-row-reverse justify-between"
+            :value="toggle.name"
+            :checked="toggle.state.value"
+            :disabled="isDisabled(toggle.name)"
+            is-switch
+            @change="toggle.switchFn"
+          >
+            <span class="label-bold">{{
+              $t(`filters.safeBrowsing.toggles.${toggle.name}.title`)
+            }}</span>
+          </VCheckbox>
+          <p
+            class="label-regular mt-2"
+            :class="{ 'text-disabled': isDisabled(toggle.name) }"
+          >
+            {{ $t(`filters.safeBrowsing.toggles.${toggle.name}.desc`) }}
+          </p>
+        </div>
+      </fieldset>
+    </form>
+  </section>
+</template>
diff --git a/frontend/src/components/VSafetyWall/VSafetyWall.vue b/frontend/src/components/VSafetyWall/VSafetyWall.vue
index 08c9b584dff..0b875626855 100644
--- a/frontend/src/components/VSafetyWall/VSafetyWall.vue
+++ b/frontend/src/components/VSafetyWall/VSafetyWall.vue
@@ -1,3 +1,58 @@
+<script lang="ts">
+import { PropType, computed, defineComponent } 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 { sendCustomEvent } = useAnalytics()
+    const handleBack = () => {
+      sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
+        id: props.media.id,
+        sensitivities: props.media.sensitivity.join(","),
+      })
+    }
+    const handleShow = () => {
+      emit("reveal")
+    }
+
+    return {
+      backToSearchPath,
+      handleBack,
+      handleShow,
+      camelCase,
+    }
+  },
+})
+</script>
+
 <template>
   <div
     id="safety-wall"
@@ -60,61 +115,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, computed, defineComponent } 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 { sendCustomEvent } = useAnalytics()
-    const handleBack = () => {
-      sendCustomEvent("GO_BACK_FROM_SENSITIVE_RESULT", {
-        id: props.media.id,
-        sensitivities: props.media.sensitivity.join(","),
-      })
-    }
-    const handleShow = () => {
-      emit("reveal")
-    }
-
-    return {
-      backToSearchPath,
-      handleBack,
-      handleShow,
-      camelCase,
-    }
-  },
-})
-</script>
-
 <style scoped>
 #safety-wall {
   background: no-repeat url(~/assets/safety-bg.png);
diff --git a/frontend/src/components/VScrollButton.vue b/frontend/src/components/VScrollButton.vue
index 92a00c4b575..16b136e94fb 100644
--- a/frontend/src/components/VScrollButton.vue
+++ b/frontend/src/components/VScrollButton.vue
@@ -1,24 +1,3 @@
-<template>
-  <button
-    :aria-label="$t('browsePage.aria.scroll')"
-    type="button"
-    class="scroll fixed bottom-4 mb-4 ms-auto h-14 w-14 rounded-full bg-primary text-center text-over-dark transition-all duration-100 ease-linear hover:bg-primary-hover hover:shadow-md"
-    :class="hClass"
-    @click="scrollToTop"
-    @keydown.tab.exact="$emit('tab', $event)"
-  >
-    <svg
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      class="h-full w-full fill-curr"
-    >
-      <path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" />
-    </svg>
-  </button>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
@@ -53,3 +32,24 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <button
+    :aria-label="$t('browsePage.aria.scroll')"
+    type="button"
+    class="scroll fixed bottom-4 mb-4 ms-auto h-14 w-14 rounded-full bg-primary text-center text-over-dark transition-all duration-100 ease-linear hover:bg-primary-hover hover:shadow-md"
+    :class="hClass"
+    @click="scrollToTop"
+    @keydown.tab.exact="$emit('tab', $event)"
+  >
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="h-full w-full fill-curr"
+    >
+      <path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" />
+    </svg>
+  </button>
+</template>
diff --git a/frontend/src/components/VScrollableLine.vue b/frontend/src/components/VScrollableLine.vue
index 5e920567252..2bd4b00472e 100644
--- a/frontend/src/components/VScrollableLine.vue
+++ b/frontend/src/components/VScrollableLine.vue
@@ -1,48 +1,3 @@
-<template>
-  <div
-    ref="containerRef"
-    class="container relative flex min-w-0"
-    :class="{ 'pointer-events-none': !isInteractive }"
-  >
-    <div
-      ref="innerContainerRef"
-      class="inner-container max-w-full"
-      :class="{
-        'faded-overflow-s': showScrollButton.start,
-        'faded-overflow-e': showScrollButton.end,
-      }"
-    >
-      <div
-        ref="buttonsRef"
-        class="buttons flex justify-start gap-x-3 overflow-x-scroll sm:gap-x-1"
-        :class="[
-          showScrollButton.start
-            ? showScrollButton.end
-              ? 'me-11 ms-11 w-[calc(100%_-_2_*_theme(spacing.11))]'
-              : 'ms-11 w-[calc(100%_-_theme(spacing.11))]'
-            : showScrollButton.end
-              ? 'me-11 w-[calc(100%_-_theme(spacing.11))]'
-              : '',
-        ]"
-      >
-        <slot />
-      </div>
-    </div>
-    <VScroller
-      v-show="showScrollButton.start"
-      class="start-0"
-      direction="back"
-      @click="scroll('start')"
-    />
-    <VScroller
-      v-show="showScrollButton.end"
-      class="end-0"
-      direction="forward"
-      @click="scroll('end')"
-    />
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -214,6 +169,51 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    ref="containerRef"
+    class="container relative flex min-w-0"
+    :class="{ 'pointer-events-none': !isInteractive }"
+  >
+    <div
+      ref="innerContainerRef"
+      class="inner-container max-w-full"
+      :class="{
+        'faded-overflow-s': showScrollButton.start,
+        'faded-overflow-e': showScrollButton.end,
+      }"
+    >
+      <div
+        ref="buttonsRef"
+        class="buttons flex justify-start gap-x-3 overflow-x-scroll sm:gap-x-1"
+        :class="[
+          showScrollButton.start
+            ? showScrollButton.end
+              ? 'me-11 ms-11 w-[calc(100%_-_2_*_theme(spacing.11))]'
+              : 'ms-11 w-[calc(100%_-_theme(spacing.11))]'
+            : showScrollButton.end
+              ? 'me-11 w-[calc(100%_-_theme(spacing.11))]'
+              : '',
+        ]"
+      >
+        <slot />
+      </div>
+    </div>
+    <VScroller
+      v-show="showScrollButton.start"
+      class="start-0"
+      direction="back"
+      @click="scroll('start')"
+    />
+    <VScroller
+      v-show="showScrollButton.end"
+      class="end-0"
+      direction="forward"
+      @click="scroll('end')"
+    />
+  </div>
+</template>
+
 <style scoped>
 .buttons::-webkit-scrollbar {
   width: 0 !important;
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index b4485f86f62..38ef7fbefae 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -1,37 +1,3 @@
-<template>
-  <div>
-    <VAudioInstructions kind="all" />
-    <ol
-      class="grid grid-cols-2 gap-4"
-      :class="
-        isSidebarVisible
-          ? '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="collectionLabel"
-    >
-      <template v-for="item in results">
-        <VImageCell
-          v-if="isDetail.image(item)"
-          :key="item.id"
-          :image="item"
-          :search-term="searchTerm"
-          aspect-ratio="square"
-        />
-        <VAudioResult
-          v-if="isDetail.audio(item)"
-          :key="item.id"
-          :audio="item"
-          :search-term="searchTerm"
-          layout="box"
-          :size="isSm ? 'l' : 's'"
-          kind="search"
-        />
-      </template>
-    </ol>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 import { storeToRefs } from "pinia"
@@ -80,3 +46,37 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <VAudioInstructions kind="all" />
+    <ol
+      class="grid grid-cols-2 gap-4"
+      :class="
+        isSidebarVisible
+          ? '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="collectionLabel"
+    >
+      <template v-for="item in results">
+        <VImageCell
+          v-if="isDetail.image(item)"
+          :key="item.id"
+          :image="item"
+          :search-term="searchTerm"
+          aspect-ratio="square"
+        />
+        <VAudioResult
+          v-if="isDetail.audio(item)"
+          :key="item.id"
+          :audio="item"
+          :search-term="searchTerm"
+          layout="box"
+          :size="isSm ? 'l' : 's'"
+          kind="search"
+        />
+      </template>
+    </ol>
+  </div>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
index 62e0d18ed6c..4239c5f2178 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
@@ -1,26 +1,3 @@
-<template>
-  <div>
-    <VAudioInstructions kind="audio" />
-    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-    <ol
-      :aria-label="collectionLabel"
-      class="-mx-2 flex flex-col md:-mx-4"
-      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
-    >
-      <VAudioResult
-        v-for="audio in results"
-        :key="audio.id"
-        :search-term="searchTerm"
-        :related-to="relatedTo"
-        :audio="audio"
-        layout="row"
-        :size="audioTrackSize"
-        :kind="kind"
-      />
-    </ol>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
@@ -93,3 +70,26 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <VAudioInstructions kind="audio" />
+    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
+    <ol
+      :aria-label="collectionLabel"
+      class="-mx-2 flex flex-col md:-mx-4"
+      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
+    >
+      <VAudioResult
+        v-for="audio in results"
+        :key="audio.id"
+        :search-term="searchTerm"
+        :related-to="relatedTo"
+        :audio="audio"
+        layout="row"
+        :size="audioTrackSize"
+        :kind="kind"
+      />
+    </ol>
+  </div>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
index 83b944002b7..f4f7e14e288 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
@@ -1,17 +1,3 @@
-<template>
-  <VSnackbar size="large" :is-visible="isSnackbarVisible">
-    <i18n-t scope="global" :keypath="`${i18nPrefix}.text`" tag="p">
-      <template
-        v-for="keyboardKey in keyboardKeys"
-        #[keyboardKey]
-        :key="keyboardKey"
-      >
-        <kbd class="font-sans">{{ $t(`${i18nPrefix}.${keyboardKey}`) }}</kbd>
-      </template>
-    </i18n-t>
-  </VSnackbar>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
@@ -49,3 +35,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VSnackbar size="large" :is-visible="isSnackbarVisible">
+    <i18n-t scope="global" :keypath="`${i18nPrefix}.text`" tag="p">
+      <template
+        v-for="keyboardKey in keyboardKeys"
+        #[keyboardKey]
+        :key="keyboardKey"
+      >
+        <kbd class="font-sans">{{ $t(`${i18nPrefix}.${keyboardKey}`) }}</kbd>
+      </template>
+    </i18n-t>
+  </VSnackbar>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
index 4e30039e293..bbdd27d8de4 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioResult.vue
@@ -1,17 +1,3 @@
-<template>
-  <li>
-    <VAudioTrack
-      :audio="audio"
-      :layout="layout"
-      :size="size"
-      :search-term="searchTerm"
-      v-bind="$attrs"
-      @interacted="sendInteractionEvent"
-      @mousedown="sendSelectSearchResultEvent(audio, $event)"
-    />
-  </li>
-</template>
-
 <script lang="ts">
 import { useNuxtApp } from "#imports"
 
@@ -110,3 +96,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <li>
+    <VAudioTrack
+      :audio="audio"
+      :layout="layout"
+      :size="size"
+      :search-term="searchTerm"
+      v-bind="$attrs"
+      @interacted="sendInteractionEvent"
+      @mousedown="sendSelectSearchResultEvent(audio, $event)"
+    />
+  </li>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
index 32edb6a4e98..47d897879b5 100644
--- a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
@@ -1,36 +1,3 @@
-<template>
-  <VMediaCollection
-    :results="results"
-    :is-fetching="isFetching"
-    :search-term="searchTerm"
-    :collection-label="collectionLabel"
-    kind="collection"
-  >
-    <template #header>
-      <VCollectionHeader
-        v-if="isSupportedMediaType(results.type)"
-        class="mb-2 md:mb-3"
-        :media-type="results.type"
-        :collection-params="collectionParams"
-        :creator-url="creatorUrl"
-      />
-    </template>
-
-    <template #footer>
-      <footer class="mb-6 mt-4 lg:mb-10">
-        <VLoadMore
-          :search-type="results.type"
-          kind="collection"
-          :search-term="searchTerm"
-          :is-fetching="isFetching"
-          class="mb-4"
-          @load-more="$emit('load-more')"
-        />
-      </footer>
-    </template>
-  </VMediaCollection>
-</template>
-
 <script lang="ts">
 import { defineComponent, type PropType } from "vue"
 
@@ -79,3 +46,36 @@ export default defineComponent({
   methods: { isSupportedMediaType },
 })
 </script>
+
+<template>
+  <VMediaCollection
+    :results="results"
+    :is-fetching="isFetching"
+    :search-term="searchTerm"
+    :collection-label="collectionLabel"
+    kind="collection"
+  >
+    <template #header>
+      <VCollectionHeader
+        v-if="isSupportedMediaType(results.type)"
+        class="mb-2 md:mb-3"
+        :media-type="results.type"
+        :collection-params="collectionParams"
+        :creator-url="creatorUrl"
+      />
+    </template>
+
+    <template #footer>
+      <footer class="mb-6 mt-4 lg:mb-10">
+        <VLoadMore
+          :search-type="results.type"
+          kind="collection"
+          :search-term="searchTerm"
+          :is-fetching="isFetching"
+          class="mb-4"
+          @load-more="$emit('load-more')"
+        />
+      </footer>
+    </template>
+  </VMediaCollection>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VImageCollection.vue b/frontend/src/components/VSearchResultsGrid/VImageCollection.vue
index 67708450c41..258a8937578 100644
--- a/frontend/src/components/VSearchResultsGrid/VImageCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VImageCollection.vue
@@ -1,17 +1,3 @@
-<template>
-  <ol class="image-grid flex flex-wrap gap-4" :aria-label="collectionLabel">
-    <VImageCell
-      v-for="image in results"
-      :key="image.id"
-      :image="image"
-      :search-term="searchTerm"
-      aspect-ratio="intrinsic"
-      :kind="kind"
-      :related-to="relatedTo"
-    />
-  </ol>
-</template>
-
 <script lang="ts">
 /**
  * This component receives an array of images as a prop, and
@@ -52,6 +38,20 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <ol class="image-grid flex flex-wrap gap-4" :aria-label="collectionLabel">
+    <VImageCell
+      v-for="image in results"
+      :key="image.id"
+      :image="image"
+      :search-term="searchTerm"
+      aspect-ratio="intrinsic"
+      :kind="kind"
+      :related-to="relatedTo"
+    />
+  </ol>
+</template>
+
 <style scoped>
 @screen md {
   .image-grid:after {
diff --git a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
index 9454b965f22..2182394f62c 100644
--- a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
@@ -1,30 +1,3 @@
-<template>
-  <section>
-    <slot name="header" />
-
-    <VGridSkeleton v-if="showSkeleton" :is-for-tab="results.type" />
-
-    <Component
-      :is="component"
-      v-if="!showSkeleton"
-      :results="results.items"
-      :kind="kind"
-      :search-term="searchTerm"
-      :related-to="relatedTo"
-      :collection-label="collectionLabel"
-      :class="{ 'pt-2 sm:pt-0': results.type === 'image' }"
-    />
-
-    <slot name="footer" />
-
-    <VScrollButton
-      v-show="showScrollButton"
-      :is-filter-sidebar-visible="isSidebarVisible"
-      data-testid="scroll-button"
-    />
-  </section>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, inject, type PropType, ref } from "vue"
 
@@ -107,3 +80,30 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <section>
+    <slot name="header" />
+
+    <VGridSkeleton v-if="showSkeleton" :is-for-tab="results.type" />
+
+    <Component
+      :is="component"
+      v-if="!showSkeleton"
+      :results="results.items"
+      :kind="kind"
+      :search-term="searchTerm"
+      :related-to="relatedTo"
+      :collection-label="collectionLabel"
+      :class="{ 'pt-2 sm:pt-0': results.type === 'image' }"
+    />
+
+    <slot name="footer" />
+
+    <VScrollButton
+      v-show="showScrollButton"
+      :is-filter-sidebar-visible="isSidebarVisible"
+      data-testid="scroll-button"
+    />
+  </section>
+</template>
diff --git a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
index 47180e6f7bd..7457510c91a 100644
--- a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
@@ -1,57 +1,3 @@
-<template>
-  <VMediaCollection
-    :collection-label="collectionLabel"
-    :results="results"
-    :is-fetching="isFetching"
-    :search-term="searchTerm"
-    kind="search"
-  >
-    <template #header>
-      <header v-if="searchTerm" class="my-0 md:mb-8 md:mt-4">
-        <VSearchResultsTitle
-          :search-term="searchTerm"
-          :size="results.type === 'all' ? 'large' : 'default'"
-          :search-type="results.type"
-          :result-counts="resultCounts"
-          >{{ searchTerm }}</VSearchResultsTitle
-        >
-      </header>
-
-      <div
-        v-if="results.type === 'all'"
-        class="mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0"
-      >
-        <VContentLink
-          v-for="[mediaType, count] in resultCounts"
-          :key="mediaType"
-          :media-type="mediaType"
-          :search-term="searchTerm"
-          :results-count="count"
-          :to="contentLinkPath(mediaType)"
-        />
-      </div>
-    </template>
-    <template #footer>
-      <footer class="mb-6 mt-4 lg:mb-10">
-        <VLoadMore
-          :search-type="results.type"
-          kind="search"
-          :search-term="searchTerm"
-          :is-fetching="isFetching"
-          class="mb-4"
-          @load-more="$emit('load-more')"
-        />
-        <VExternalSearchForm
-          v-if="results.type !== 'all'"
-          :search-term="searchTerm"
-          :is-supported="true"
-          :has-no-results="false"
-        />
-      </footer>
-    </template>
-  </VMediaCollection>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -119,3 +65,57 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VMediaCollection
+    :collection-label="collectionLabel"
+    :results="results"
+    :is-fetching="isFetching"
+    :search-term="searchTerm"
+    kind="search"
+  >
+    <template #header>
+      <header v-if="searchTerm" class="my-0 md:mb-8 md:mt-4">
+        <VSearchResultsTitle
+          :search-term="searchTerm"
+          :size="results.type === 'all' ? 'large' : 'default'"
+          :search-type="results.type"
+          :result-counts="resultCounts"
+          >{{ searchTerm }}</VSearchResultsTitle
+        >
+      </header>
+
+      <div
+        v-if="results.type === 'all'"
+        class="mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0"
+      >
+        <VContentLink
+          v-for="[mediaType, count] in resultCounts"
+          :key="mediaType"
+          :media-type="mediaType"
+          :search-term="searchTerm"
+          :results-count="count"
+          :to="contentLinkPath(mediaType)"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <footer class="mb-6 mt-4 lg:mb-10">
+        <VLoadMore
+          :search-type="results.type"
+          kind="search"
+          :search-term="searchTerm"
+          :is-fetching="isFetching"
+          class="mb-4"
+          @load-more="$emit('load-more')"
+        />
+        <VExternalSearchForm
+          v-if="results.type !== 'all'"
+          :search-term="searchTerm"
+          :is-supported="true"
+          :has-no-results="false"
+        />
+      </footer>
+    </template>
+  </VMediaCollection>
+</template>
diff --git a/frontend/src/components/VSearchResultsTitle.vue b/frontend/src/components/VSearchResultsTitle.vue
index 1218e06182c..e9736903e8f 100644
--- a/frontend/src/components/VSearchResultsTitle.vue
+++ b/frontend/src/components/VSearchResultsTitle.vue
@@ -1,17 +1,3 @@
-<template>
-  <h1
-    class="sr-only break-words md:not-sr-only"
-    :class="[
-      size === 'large'
-        ? 'heading-2 lg:heading-1 !leading-none lg:!leading-none'
-        : 'heading-2 !leading-none',
-    ]"
-  >
-    <span aria-hidden="true">{{ searchTerm }}</span
-    ><span class="sr-only">{{ ariaHeading }}</span>
-  </h1>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -121,6 +107,20 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <h1
+    class="sr-only break-words md:not-sr-only"
+    :class="[
+      size === 'large'
+        ? 'heading-2 lg:heading-1 !leading-none lg:!leading-none'
+        : 'heading-2 !leading-none',
+    ]"
+  >
+    <span aria-hidden="true">{{ searchTerm }}</span
+    ><span class="sr-only">{{ ariaHeading }}</span>
+  </h1>
+</template>
+
 <style scoped>
 /* Title case the user's search query */
 h1:first-letter {
diff --git a/frontend/src/components/VSingleResultControls.vue b/frontend/src/components/VSingleResultControls.vue
index 168e98c25f4..f7f1b7c49d4 100644
--- a/frontend/src/components/VSingleResultControls.vue
+++ b/frontend/src/components/VSingleResultControls.vue
@@ -1,19 +1,3 @@
-<template>
-  <!-- Only display these controls if one of the children is shown,
-    to prevent rendering extra whitespace when both buttons are hidden. -->
-  <div
-    v-show="canBeHidden || backToSearchPath"
-    class="flex w-full justify-between px-4 pb-4 md:px-8"
-  >
-    <VBackToSearchResultsLink
-      v-if="backToSearchPath"
-      :id="media.id"
-      :href="backToSearchPath"
-    />
-    <VHideButton v-if="canBeHidden" class="ml-auto" @click="hide" />
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -52,3 +36,19 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Only display these controls if one of the children is shown,
+    to prevent rendering extra whitespace when both buttons are hidden. -->
+  <div
+    v-show="canBeHidden || backToSearchPath"
+    class="flex w-full justify-between px-4 pb-4 md:px-8"
+  >
+    <VBackToSearchResultsLink
+      v-if="backToSearchPath"
+      :id="media.id"
+      :href="backToSearchPath"
+    />
+    <VHideButton v-if="canBeHidden" class="ml-auto" @click="hide" />
+  </div>
+</template>
diff --git a/frontend/src/components/VSkeleton/VAudioTrackSkeleton.vue b/frontend/src/components/VSkeleton/VAudioTrackSkeleton.vue
index 33049bafe37..0ebf5f2794e 100644
--- a/frontend/src/components/VSkeleton/VAudioTrackSkeleton.vue
+++ b/frontend/src/components/VSkeleton/VAudioTrackSkeleton.vue
@@ -1,3 +1,16 @@
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "VAudioTrackSkeleton",
+  methods: {
+    getRandomSize(max = 250, min = 70) {
+      return Math.floor(Math.random() * (max - min) + min)
+    },
+  },
+})
+</script>
+
 <template>
   <article class="mb-14 flex w-full flex-row">
     <!-- Thumbnail skeleton -->
@@ -26,19 +39,6 @@
   </article>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "VAudioTrackSkeleton",
-  methods: {
-    getRandomSize(max = 250, min = 70) {
-      return Math.floor(Math.random() * (max - min) + min)
-    },
-  },
-})
-</script>
-
 <style scoped>
 @keyframes shimmer {
   0% {
diff --git a/frontend/src/components/VSkeleton/VBone.vue b/frontend/src/components/VSkeleton/VBone.vue
index 8eac5cb69fc..2f66194c9ad 100644
--- a/frontend/src/components/VSkeleton/VBone.vue
+++ b/frontend/src/components/VSkeleton/VBone.vue
@@ -1,7 +1,3 @@
-<template>
-  <div :class="['bg-secondary', shimmer ? 'shimmering' : '']" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -11,6 +7,10 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div :class="['bg-secondary', shimmer ? 'shimmering' : '']" />
+</template>
+
 <style scoped>
 @keyframes shimmer {
   0% {
diff --git a/frontend/src/components/VSkeleton/VGridSkeleton.vue b/frontend/src/components/VSkeleton/VGridSkeleton.vue
index 276b8ecc12c..1e2d0334c8b 100644
--- a/frontend/src/components/VSkeleton/VGridSkeleton.vue
+++ b/frontend/src/components/VSkeleton/VGridSkeleton.vue
@@ -1,32 +1,3 @@
-<template>
-  <section>
-    <div
-      v-if="isForTab === 'all'"
-      class="grid grid-cols-2 gap-4"
-      :class="
-        isSidebarVisible
-          ? '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'
-      "
-    >
-      <VBone v-for="idx in elementCount" :key="idx" class="square" />
-    </div>
-
-    <div v-if="isForTab === 'image'" class="masonry">
-      <VBone
-        v-for="idx in elementCount"
-        :key="idx"
-        class="mb-4"
-        :style="{ height: `${getRandomSize()}px` }"
-      />
-    </div>
-
-    <template v-if="isForTab === 'audio'">
-      <VAudioTrackSkeleton v-for="idx in elementCount" :key="idx" />
-    </template>
-  </section>
-</template>
-
 <script lang="ts">
 /**
  * Display placeholder elements while waiting for the actual elements to be
@@ -79,6 +50,35 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <section>
+    <div
+      v-if="isForTab === 'all'"
+      class="grid grid-cols-2 gap-4"
+      :class="
+        isSidebarVisible
+          ? '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'
+      "
+    >
+      <VBone v-for="idx in elementCount" :key="idx" class="square" />
+    </div>
+
+    <div v-if="isForTab === 'image'" class="masonry">
+      <VBone
+        v-for="idx in elementCount"
+        :key="idx"
+        class="mb-4"
+        :style="{ height: `${getRandomSize()}px` }"
+      />
+    </div>
+
+    <template v-if="isForTab === 'audio'">
+      <VAudioTrackSkeleton v-for="idx in elementCount" :key="idx" />
+    </template>
+  </section>
+</template>
+
 <style scoped>
 .square {
   @apply aspect-square;
diff --git a/frontend/src/components/VSketchFabViewer.vue b/frontend/src/components/VSketchFabViewer.vue
index 9fa777face1..ae1ac024bba 100644
--- a/frontend/src/components/VSketchFabViewer.vue
+++ b/frontend/src/components/VSketchFabViewer.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="block aspect-[2/1]">
-    <iframe
-      id="sketchfab-iframe"
-      ref="node"
-      src=""
-      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
-      :title="label"
-      :aria-label="label"
-      allow="autoplay; fullscreen; vr"
-      :autoplay="true"
-      class="h-full w-full"
-    />
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
@@ -80,3 +64,19 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div class="block aspect-[2/1]">
+    <iframe
+      id="sketchfab-iframe"
+      ref="node"
+      src=""
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+      :title="label"
+      :aria-label="label"
+      allow="autoplay; fullscreen; vr"
+      :autoplay="true"
+      class="h-full w-full"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/VSkipToContentButton.vue b/frontend/src/components/VSkipToContentButton.vue
index 840de01d6dd..a824cf4fad2 100644
--- a/frontend/src/components/VSkipToContentButton.vue
+++ b/frontend/src/components/VSkipToContentButton.vue
@@ -1,14 +1,3 @@
-<template>
-  <VButton
-    :href="`#${skipToContentTargetId}`"
-    as="a"
-    variant="filled-pink-8"
-    size="medium"
-    class="skip-button top-2 z-50 max-w-max focus:absolute focus:left-2 focus:right-2 focus-visible:absolute focus-visible:left-2 focus-visible:right-2"
-    >{{ $t("skipToContent") }}
-  </VButton>
-</template>
-
 <script lang="ts">
 import { skipToContentTargetId } from "~/constants/window"
 
@@ -25,6 +14,17 @@ export default {
 }
 </script>
 
+<template>
+  <VButton
+    :href="`#${skipToContentTargetId}`"
+    as="a"
+    variant="filled-pink-8"
+    size="medium"
+    class="skip-button top-2 z-50 max-w-max focus:absolute focus:left-2 focus:right-2 focus-visible:absolute focus-visible:left-2 focus-visible:right-2"
+    >{{ $t("skipToContent") }}
+  </VButton>
+</template>
+
 <style scoped>
 .skip-button:not(:focus-visible) {
   @apply sr-only;
diff --git a/frontend/src/components/VSnackbar.vue b/frontend/src/components/VSnackbar.vue
index 65fa3e4ed40..2beaa245f75 100644
--- a/frontend/src/components/VSnackbar.vue
+++ b/frontend/src/components/VSnackbar.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    :role="isVisible ? 'alert' : undefined"
-    class="snackbar fixed bottom-4 z-snackbar rounded-sm bg-black text-over-dark transition-[opacity,transform] duration-500 motion-reduce:transition-opacity ltr:left-4 rtl:right-4"
-    :class="[
-      size === 'large'
-        ? 'w-max max-w-[calc(100%_-_2_*_theme(spacing.4))] flex-row items-center px-6 py-4 text-sm'
-        : 'w-2/3 flex-col items-start px-4 py-3 text-sr sm:w-2/5',
-      isVisible
-        ? 'translate-y-0 opacity-100'
-        : 'translate-y-[4rem] opacity-0 motion-reduce:translate-y-0',
-    ]"
-  >
-    <!-- @slot Your message or subcomponent goes passed here. -->
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
@@ -37,6 +19,24 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    :role="isVisible ? 'alert' : undefined"
+    class="snackbar fixed bottom-4 z-snackbar rounded-sm bg-black text-over-dark transition-[opacity,transform] duration-500 motion-reduce:transition-opacity ltr:left-4 rtl:right-4"
+    :class="[
+      size === 'large'
+        ? 'w-max max-w-[calc(100%_-_2_*_theme(spacing.4))] flex-row items-center px-6 py-4 text-sm'
+        : 'w-2/3 flex-col items-start px-4 py-3 text-sr sm:w-2/5',
+      isVisible
+        ? 'translate-y-0 opacity-100'
+        : 'translate-y-[4rem] opacity-0 motion-reduce:translate-y-0',
+    ]"
+  >
+    <!-- @slot Your message or subcomponent goes passed here. -->
+    <slot />
+  </div>
+</template>
+
 <style scoped>
 .snackbar {
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
diff --git a/frontend/src/components/VSourcesTable.vue b/frontend/src/components/VSourcesTable.vue
index 3e7627ae2ec..b12f65f5850 100644
--- a/frontend/src/components/VSourcesTable.vue
+++ b/frontend/src/components/VSourcesTable.vue
@@ -1,91 +1,3 @@
-<template>
-  <div>
-    <table
-      :aria-label="$t('sources.aria.table')"
-      role="region"
-      class="not-prose source-table w-full table-fixed text-base"
-    >
-      <thead>
-        <tr>
-          <th
-            tabindex="0"
-            @click="sortTable('display_name')"
-            @keypress.enter="sortTable('display_name')"
-          >
-            <span class="flex w-full flex-row items-center justify-between">
-              {{ $t("sources.providers.source") }}
-              <TableSortIcon :active="sorting.field === 'display_name'" />
-            </span>
-          </th>
-          <th
-            tabindex="0"
-            @click="sortTable('source_url')"
-            @keypress.enter="sortTable('source_url')"
-          >
-            <span class="flex w-full flex-row items-center justify-between">
-              {{ $t("sources.providers.domain") }}
-              <TableSortIcon :active="sorting.field === 'source_url'" />
-            </span>
-          </th>
-          <th
-            tabindex="0"
-            @click="sortTable('media_count')"
-            @keypress.enter="sortTable('media_count')"
-          >
-            <span class="flex w-full flex-row items-center justify-between">
-              {{ $t("sources.providers.item") }}
-              <TableSortIcon :active="sorting.field === 'media_count'" />
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="provider in providers" :key="provider.display_name">
-          <td>
-            <VLink :href="providerViewUrl(provider)">{{
-              provider.display_name
-            }}</VLink>
-          </td>
-          <td class="truncate font-semibold">
-            <VLink :href="provider.source_url">
-              {{ cleanSourceUrlForPresentation(provider.source_url) }}
-            </VLink>
-          </td>
-          <td class="text-right">
-            {{ getLocaleFormattedNumber(provider.media_count || 0) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <section role="region" class="mobile-source-table md:hidden">
-      <article
-        v-for="provider in providers"
-        :key="provider.display_name"
-        :title="provider.display_name"
-      >
-        <p>{{ $t("sources.providers.source") }}</p>
-
-        <VLink :href="providerViewUrl(provider)">{{
-          provider.display_name
-        }}</VLink>
-
-        <p>{{ $t("sources.providers.domain") }}</p>
-
-        <VLink :href="provider.source_url">
-          {{ cleanSourceUrlForPresentation(provider.source_url) }}
-        </VLink>
-
-        <p>{{ $t("sources.providers.item") }}</p>
-
-        <span>
-          {{ getLocaleFormattedNumber(provider.media_count || 0) }}
-        </span>
-      </article>
-    </section>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, type PropType, reactive, ref } from "vue"
 
@@ -194,6 +106,94 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div>
+    <table
+      :aria-label="$t('sources.aria.table')"
+      role="region"
+      class="not-prose source-table w-full table-fixed text-base"
+    >
+      <thead>
+        <tr>
+          <th
+            tabindex="0"
+            @click="sortTable('display_name')"
+            @keypress.enter="sortTable('display_name')"
+          >
+            <span class="flex w-full flex-row items-center justify-between">
+              {{ $t("sources.providers.source") }}
+              <TableSortIcon :active="sorting.field === 'display_name'" />
+            </span>
+          </th>
+          <th
+            tabindex="0"
+            @click="sortTable('source_url')"
+            @keypress.enter="sortTable('source_url')"
+          >
+            <span class="flex w-full flex-row items-center justify-between">
+              {{ $t("sources.providers.domain") }}
+              <TableSortIcon :active="sorting.field === 'source_url'" />
+            </span>
+          </th>
+          <th
+            tabindex="0"
+            @click="sortTable('media_count')"
+            @keypress.enter="sortTable('media_count')"
+          >
+            <span class="flex w-full flex-row items-center justify-between">
+              {{ $t("sources.providers.item") }}
+              <TableSortIcon :active="sorting.field === 'media_count'" />
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="provider in providers" :key="provider.display_name">
+          <td>
+            <VLink :href="providerViewUrl(provider)">{{
+              provider.display_name
+            }}</VLink>
+          </td>
+          <td class="truncate font-semibold">
+            <VLink :href="provider.source_url">
+              {{ cleanSourceUrlForPresentation(provider.source_url) }}
+            </VLink>
+          </td>
+          <td class="text-right">
+            {{ getLocaleFormattedNumber(provider.media_count || 0) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <section role="region" class="mobile-source-table md:hidden">
+      <article
+        v-for="provider in providers"
+        :key="provider.display_name"
+        :title="provider.display_name"
+      >
+        <p>{{ $t("sources.providers.source") }}</p>
+
+        <VLink :href="providerViewUrl(provider)">{{
+          provider.display_name
+        }}</VLink>
+
+        <p>{{ $t("sources.providers.domain") }}</p>
+
+        <VLink :href="provider.source_url">
+          {{ cleanSourceUrlForPresentation(provider.source_url) }}
+        </VLink>
+
+        <p>{{ $t("sources.providers.item") }}</p>
+
+        <span>
+          {{ getLocaleFormattedNumber(provider.media_count || 0) }}
+        </span>
+      </article>
+    </section>
+  </div>
+</template>
+
 <style scoped>
 @tailwind base;
 @tailwind components;
diff --git a/frontend/src/components/VTabs/VTab.vue b/frontend/src/components/VTabs/VTab.vue
index 7437e6c11a1..236bf89c216 100644
--- a/frontend/src/components/VTabs/VTab.vue
+++ b/frontend/src/components/VTabs/VTab.vue
@@ -1,23 +1,3 @@
-<template>
-  <VButton
-    :id="`tab-${id}`"
-    ref="internalTabRef"
-    role="tab"
-    :tabindex="isSelected ? 0 : -1"
-    size="disabled"
-    variant="plain--avoid"
-    v-bind="tabProps"
-    class="rounded-none bg-default focus-slim-tx focus:z-10"
-    :class="[variant, `size-${size}`, { [`${variant}-selected`]: isSelected }]"
-    @click="handleSelection"
-    @focus="handleFocus"
-    @mousedown="handleMouseDown"
-    @keydown="handleKeyDown"
-  >
-    <slot />
-  </VButton>
-</template>
-
 <script lang="ts">
 import {
   computed,
@@ -200,6 +180,26 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <VButton
+    :id="`tab-${id}`"
+    ref="internalTabRef"
+    role="tab"
+    :tabindex="isSelected ? 0 : -1"
+    size="disabled"
+    variant="plain--avoid"
+    v-bind="tabProps"
+    class="rounded-none bg-default focus-slim-tx focus:z-10"
+    :class="[variant, `size-${size}`, { [`${variant}-selected`]: isSelected }]"
+    @click="handleSelection"
+    @focus="handleFocus"
+    @mousedown="handleMouseDown"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </VButton>
+</template>
+
 <style scoped>
 .bordered {
   @apply rounded-se-sm rounded-ss-sm border-x border-t border-tx text-sm font-semibold md:text-base md:font-semibold md:leading-snug;
diff --git a/frontend/src/components/VTabs/VTabPanel.vue b/frontend/src/components/VTabs/VTabPanel.vue
index 1fb3e3d00f6..b9a8ba7930a 100644
--- a/frontend/src/components/VTabs/VTabPanel.vue
+++ b/frontend/src/components/VTabs/VTabPanel.vue
@@ -1,17 +1,3 @@
-<template>
-  <div
-    :id="`panel-${id}`"
-    ref="internalPanelRef"
-    :aria-labelledby="`tab-${id}`"
-    role="tabpanel"
-    :tabindex="isSelected ? 0 : -1"
-    class="min-h-0 overflow-y-auto border-default p-6"
-    :class="[panelVariantStyle, { hidden: !isSelected }]"
-  >
-    <slot />
-  </div>
-</template>
-
 <script lang="ts">
 import {
   computed,
@@ -75,3 +61,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div
+    :id="`panel-${id}`"
+    ref="internalPanelRef"
+    :aria-labelledby="`tab-${id}`"
+    role="tabpanel"
+    :tabindex="isSelected ? 0 : -1"
+    class="min-h-0 overflow-y-auto border-default p-6"
+    :class="[panelVariantStyle, { hidden: !isSelected }]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/VTabs/VTabs.vue b/frontend/src/components/VTabs/VTabs.vue
index 22439203b05..43b70851174 100644
--- a/frontend/src/components/VTabs/VTabs.vue
+++ b/frontend/src/components/VTabs/VTabs.vue
@@ -1,17 +1,3 @@
-<template>
-  <div>
-    <div
-      role="tablist"
-      class="flex flex-row items-stretch"
-      :class="tablistStyle"
-      v-bind="accessibleLabel"
-    >
-      <slot name="tabs" />
-    </div>
-    <slot name="default" />
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType, provide, ref } from "vue"
 
@@ -142,3 +128,17 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <div
+      role="tablist"
+      class="flex flex-row items-stretch"
+      :class="tablistStyle"
+      v-bind="accessibleLabel"
+    >
+      <slot name="tabs" />
+    </div>
+    <slot name="default" />
+  </div>
+</template>
diff --git a/frontend/src/components/VTag/VTag.vue b/frontend/src/components/VTag/VTag.vue
index 4ce58fba70a..f6aef7ad7b3 100644
--- a/frontend/src/components/VTag/VTag.vue
+++ b/frontend/src/components/VTag/VTag.vue
@@ -1,14 +1,3 @@
-<template>
-  <VButton
-    as="VLink"
-    size="small"
-    variant="filled-gray"
-    class="label-bold"
-    v-bind="$props"
-    ><slot
-  /></VButton>
-</template>
-
 <script lang="ts">
 import { defineComponent } from "vue"
 
@@ -25,3 +14,14 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <VButton
+    as="VLink"
+    size="small"
+    variant="filled-gray"
+    class="label-bold"
+    v-bind="$props"
+    ><slot
+  /></VButton>
+</template>
diff --git a/frontend/src/components/VTooltip/VTooltip.vue b/frontend/src/components/VTooltip/VTooltip.vue
index 150ba22c6fc..5de7c79c383 100644
--- a/frontend/src/components/VTooltip/VTooltip.vue
+++ b/frontend/src/components/VTooltip/VTooltip.vue
@@ -1,43 +1,3 @@
-<template>
-  <div>
-    <!-- re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906 -->
-    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-    <div
-      ref="triggerContainerRef"
-      class="flex w-min items-stretch whitespace-nowrap"
-      @keydown.esc="handleEscape"
-    >
-      <!--
-        @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the tooltip will not open
-          @binding {object} a11yProps
-          @binding {boolean} visible
-      -->
-      <slot name="trigger" :open="open">
-        <VIconButton
-          :label="describedBy"
-          :aria-describedby="describedBy"
-          variant="bordered-white"
-          size="disabled"
-          class="h-4 w-4 hover:!border-tx"
-          :icon-props="{ name: 'info', size: 4 }"
-          @click="open"
-        />
-      </slot>
-    </div>
-    <div
-      v-show="visibleRef"
-      :id="describedBy"
-      ref="tooltipRef"
-      role="tooltip"
-      :class="`z-${zIndex} w-max-content absolute left-0 top-0`"
-      :style="{ ...style }"
-      :aria-hidden="!visibleRef"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import {
   defineComponent,
@@ -178,3 +138,43 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div>
+    <!-- re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906 -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <div
+      ref="triggerContainerRef"
+      class="flex w-min items-stretch whitespace-nowrap"
+      @keydown.esc="handleEscape"
+    >
+      <!--
+        @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the tooltip will not open
+          @binding {object} a11yProps
+          @binding {boolean} visible
+      -->
+      <slot name="trigger" :open="open">
+        <VIconButton
+          :label="describedBy"
+          :aria-describedby="describedBy"
+          variant="bordered-white"
+          size="disabled"
+          class="h-4 w-4 hover:!border-tx"
+          :icon-props="{ name: 'info', size: 4 }"
+          @click="open"
+        />
+      </slot>
+    </div>
+    <div
+      v-show="visibleRef"
+      :id="describedBy"
+      ref="tooltipRef"
+      role="tooltip"
+      :class="`z-${zIndex} w-max-content absolute left-0 top-0`"
+      :style="{ ...style }"
+      :aria-hidden="!visibleRef"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/pages/search/model-3d.vue b/frontend/src/pages/search/model-3d.vue
index 7850ca61d40..372cf6c1470 100644
--- a/frontend/src/pages/search/model-3d.vue
+++ b/frontend/src/pages/search/model-3d.vue
@@ -1,9 +1,9 @@
-<template>
-  <div />
-</template>
-
 <script>
 export default {
   name: "Model3dPage",
 }
 </script>
+
+<template>
+  <div />
+</template>
diff --git a/frontend/src/pages/search/video.vue b/frontend/src/pages/search/video.vue
index adcba64d8ba..4b7d1131e26 100644
--- a/frontend/src/pages/search/video.vue
+++ b/frontend/src/pages/search/video.vue
@@ -1,9 +1,9 @@
-<template>
-  <div />
-</template>
-
 <script>
 export default {
   name: "VideoSearch",
 }
 </script>
+
+<template>
+  <div />
+</template>
diff --git a/packages/js/eslint-plugin/src/configs/vue.ts b/packages/js/eslint-plugin/src/configs/vue.ts
index 53a4a087fbb..47d96a2f1d4 100644
--- a/packages/js/eslint-plugin/src/configs/vue.ts
+++ b/packages/js/eslint-plugin/src/configs/vue.ts
@@ -23,7 +23,7 @@ export = {
     "vue/block-order": [
       "error",
       {
-        order: ["script[setup]", "template", "script:not([setup])", "style"],
+        order: ["script[setup]", "script:not([setup])", "template", "style"],
       },
     ],
     "vue/padding-line-between-blocks": ["error", "always"],