From ca36bd1c90656e5ff374a1577b8be0b1bcd5c49e Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Wed, 31 Jul 2024 23:18:50 +0300
Subject: [PATCH] Move setup template sections (#4679)

* Move script to top of the file and add component name

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

* Move script to top of the file

Also add the eslint rule to enforce the order and padding line

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

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/app.vue                          |  66 +++----
 .../VContentSwitcher/VSearchTypeButton.vue    |   1 +
 .../VContentSwitcher/VSearchTypes.vue         |   1 +
 .../components/VErrorSection/VErrorImage.vue  |  18 +-
 .../VErrorSection/VErrorSection.vue           |  35 ++--
 .../components/VErrorSection/VNoResults.vue   |  58 +++---
 .../VExternalSearch/VExternalSearchForm.vue   | 104 +++++------
 .../VExternalSearch/VExternalSourceList.vue   |  54 +++---
 .../VHeader/VFilterIconOrCounter.vue          |   1 +
 .../src/components/VHeader/VHeaderDesktop.vue |   1 +
 .../VHeaderMobile/VContentSettingsButton.vue  |   1 +
 .../VContentSettingsModalContent.vue          |   1 +
 .../VHeader/VHeaderMobile/VFilterTab.vue      |   1 +
 .../VHeaderMobile/VSearchBarButton.vue        |   1 +
 .../src/components/VHeader/VLogoButton.vue    |   1 +
 .../src/components/VHeader/VWordPressLink.vue |   1 +
 frontend/src/components/VHomepageContent.vue  |   1 +
 frontend/src/components/VIcon/VIcon.vue       |  24 +--
 .../src/components/VImageCell/VImageCell.vue  | 124 ++++++-------
 .../VLanguageSelect/VLanguageSelect.vue       |  28 +--
 frontend/src/components/VLink.vue             |  46 ++---
 .../VMediaInfo/VByLine/VScroller.vue          |   1 +
 .../VByLine/VSourceCreatorButton.vue          |   1 +
 .../VMediaInfo/VCollapsibleTagSection.vue     |   1 +
 .../components/VMediaInfo/VGetMediaButton.vue |   1 +
 .../src/components/VMediaInfo/VMediaInfo.vue  |   1 +
 .../src/components/VMediaInfo/VMetadata.vue   |   1 +
 .../components/VMediaInfo/VMetadataValue.vue  |   1 +
 .../VMediaInfo/VSourceProviderTooltip.vue     |   1 +
 .../src/components/VModal/VModalContent.vue   | 172 +++++++++---------
 .../components/VPopover/VPopoverContent.vue   |   1 +
 .../VSearchResultsGrid/VAudioInstructions.vue |   1 +
 .../VSearchResultsGrid/VCollectionResults.vue |   1 +
 .../VSearchResultsGrid/VMediaCollection.vue   |   1 +
 .../VSearchResultsGrid/VSearchResults.vue     |   1 +
 .../components/VSelectField/VSelectField.vue  |  56 +++---
 .../src/components/VSkipToContentButton.vue   |   2 +
 frontend/src/components/VSvg/VSvg.vue         |  24 +--
 frontend/src/components/VTabs/VTabPanel.vue   |   1 +
 frontend/src/error.vue                        |  62 +++----
 frontend/src/layouts/content-layout.vue       |  79 +++-----
 frontend/src/layouts/default.vue              |  31 ++--
 frontend/src/layouts/search-layout.vue        |  91 ++++-----
 frontend/src/pages/about.vue                  |  37 ++--
 frontend/src/pages/audio/[id]/index.vue       |  88 ++++-----
 frontend/src/pages/audio/collection.vue       |  40 ++--
 frontend/src/pages/feedback.vue               |  60 +++---
 frontend/src/pages/image/[id]/index.vue       | 146 +++++++--------
 frontend/src/pages/image/[id]/report.vue      |  89 ++++-----
 frontend/src/pages/image/collection.vue       |  40 ++--
 frontend/src/pages/index.vue                  |  37 ++--
 frontend/src/pages/preferences.vue            |  96 +++++-----
 frontend/src/pages/privacy.vue                |  68 +++----
 frontend/src/pages/search-help.vue            |  61 ++++---
 frontend/src/pages/search.vue                 |  54 +++---
 frontend/src/pages/search/audio.vue           |  50 ++---
 frontend/src/pages/search/image.vue           |  48 ++---
 frontend/src/pages/search/index.vue           |  48 ++---
 frontend/src/pages/sensitive-content.vue      |  32 ++--
 frontend/src/pages/sources.vue                |  46 ++---
 frontend/src/pages/tags.vue                   |  39 ++--
 packages/js/eslint-plugin/src/configs/vue.ts  |   8 +
 62 files changed, 1107 insertions(+), 1079 deletions(-)

diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index bd5358698e3..58a75491e74 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -1,36 +1,3 @@
-<template>
-  <div>
-    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
-      <Head>
-        <template v-for="link in head.link" :key="link.id">
-          <Link
-            :id="link.id"
-            :rel="link.rel"
-            :href="link.href"
-            :hreflang="link.hreflang"
-          />
-        </template>
-        <template v-for="meta in head.meta" :key="meta.id">
-          <Meta
-            :id="meta.id"
-            :property="meta.property"
-            :content="meta.content"
-          />
-        </template>
-      </Head>
-      <Body>
-        <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
-          <VSkipToContentButton />
-          <NuxtLayout>
-            <NuxtPage />
-          </NuxtLayout>
-          <VGlobalAudioSection />
-        </div>
-      </Body>
-    </Html>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, useLocaleHead } from "#imports"
 
@@ -66,3 +33,36 @@ onMounted(() => {
   featureFlagStore.syncAnalyticsWithLocalStorage()
 })
 </script>
+
+<template>
+  <div>
+    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
+      <Head>
+        <template v-for="link in head.link" :key="link.id">
+          <Link
+            :id="link.id"
+            :rel="link.rel"
+            :href="link.href"
+            :hreflang="link.hreflang"
+          />
+        </template>
+        <template v-for="meta in head.meta" :key="meta.id">
+          <Meta
+            :id="meta.id"
+            :property="meta.property"
+            :content="meta.content"
+          />
+        </template>
+      </Head>
+      <Body>
+        <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
+          <VSkipToContentButton />
+          <NuxtLayout>
+            <NuxtPage />
+          </NuxtLayout>
+          <VGlobalAudioSection />
+        </div>
+      </Body>
+    </Html>
+  </div>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
index caa5b20d068..240dcbf4af8 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -19,6 +19,7 @@
     </template>
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
index 07548cbe6ca..682b5c6a98f 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -35,6 +35,7 @@
     </div>
   </VItemGroup>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
diff --git a/frontend/src/components/VErrorSection/VErrorImage.vue b/frontend/src/components/VErrorSection/VErrorImage.vue
index fb1e7aed9c3..5417607acda 100644
--- a/frontend/src/components/VErrorSection/VErrorImage.vue
+++ b/frontend/src/components/VErrorSection/VErrorImage.vue
@@ -1,12 +1,3 @@
-<template>
-  <figure class="error-image">
-    <img :src="image.src" :alt="$t(image.alt)" :title="$t(image.alt)" />
-    <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <figcaption class="attribution" v-html="image.attribution" />
-  </figure>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from "#imports"
 
@@ -54,6 +45,15 @@ const images = Object.fromEntries(
 const image = computed(() => images[props.errorCode])
 </script>
 
+<template>
+  <figure class="error-image">
+    <img :src="image.src" :alt="$t(image.alt)" :title="$t(image.alt)" />
+    <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <figcaption class="attribution" v-html="image.attribution" />
+  </figure>
+</template>
+
 <style scoped>
 ::v-deep(.attribution) {
   @apply mt-4 text-sr text-dark-charcoal-70;
diff --git a/frontend/src/components/VErrorSection/VErrorSection.vue b/frontend/src/components/VErrorSection/VErrorSection.vue
index abbabae471c..14aaadb33a3 100644
--- a/frontend/src/components/VErrorSection/VErrorSection.vue
+++ b/frontend/src/components/VErrorSection/VErrorSection.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="error-section mx-auto flex max-w-screen-xl flex-row items-center">
-    <div class="image-pane hidden max-w-[432px] flex-grow md:block">
-      <VErrorImage class="hidden md:block" :error-code="errorCode" />
-    </div>
-    <div class="flex-grow p-4 md:p-20">
-      <VNoResults v-if="errorCode === NO_RESULT" :search-term="searchTerm" />
-      <div v-else>
-        <h1 class="heading-4 md:heading-2 text-center !font-semibold">
-          {{
-            isTimeout ? $t("serverTimeout.heading") : $t("unknownError.heading")
-          }}
-        </h1>
-      </div>
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { defineAsyncComponent } from "#imports"
 
@@ -49,3 +32,21 @@ const isTimeout = computed(() =>
   [SERVER_TIMEOUT, ECONNABORTED].includes(props.fetchingError.code)
 )
 </script>
+
+<template>
+  <div class="error-section mx-auto flex max-w-screen-xl flex-row items-center">
+    <div class="image-pane hidden max-w-[432px] flex-grow md:block">
+      <VErrorImage class="hidden md:block" :error-code="errorCode" />
+    </div>
+    <div class="flex-grow p-4 md:p-20">
+      <VNoResults v-if="errorCode === NO_RESULT" :search-term="searchTerm" />
+      <div v-else>
+        <h1 class="heading-4 md:heading-2 text-center !font-semibold">
+          {{
+            isTimeout ? $t("serverTimeout.heading") : $t("unknownError.heading")
+          }}
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VErrorSection/VNoResults.vue b/frontend/src/components/VErrorSection/VNoResults.vue
index 3a46581dca3..65be0273055 100644
--- a/frontend/src/components/VErrorSection/VNoResults.vue
+++ b/frontend/src/components/VErrorSection/VNoResults.vue
@@ -1,32 +1,3 @@
-<template>
-  <div class="no-results text-center md:text-left">
-    <h1 class="heading-4 md:heading-2 break-words">
-      {{ $t("noResults.heading", { query: searchTerm }) }}
-    </h1>
-    <h2 class="description-regular md:heading-5 mt-4">
-      {{ $t("noResults.alternatives") }}
-    </h2>
-
-    <div class="mt-10 flex flex-col flex-wrap gap-4 sm:flex-row">
-      <VButton
-        v-for="source in externalSources"
-        :key="source.name"
-        as="VLink"
-        :href="source.url"
-        variant="bordered-gray"
-        size="medium"
-        class="label-bold !w-full text-dark-charcoal sm:!w-auto"
-        show-external-icon
-        has-icon-end
-        :external-icon-size="6"
-        @mousedown="handleClick(source.name)"
-      >
-        {{ source.name }}
-      </VButton>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted } from "vue"
 
@@ -59,3 +30,32 @@ onMounted(() => {
   uiStore.setFiltersState(false)
 })
 </script>
+
+<template>
+  <div class="no-results text-center md:text-left">
+    <h1 class="heading-4 md:heading-2 break-words">
+      {{ $t("noResults.heading", { query: searchTerm }) }}
+    </h1>
+    <h2 class="description-regular md:heading-5 mt-4">
+      {{ $t("noResults.alternatives") }}
+    </h2>
+
+    <div class="mt-10 flex flex-col flex-wrap gap-4 sm:flex-row">
+      <VButton
+        v-for="source in externalSources"
+        :key="source.name"
+        as="VLink"
+        :href="source.url"
+        variant="bordered-gray"
+        size="medium"
+        class="label-bold !w-full text-dark-charcoal sm:!w-auto"
+        show-external-icon
+        has-icon-end
+        :external-icon-size="6"
+        @mousedown="handleClick(source.name)"
+      >
+        {{ source.name }}
+      </VButton>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
index 0025e981fef..3db4f8bffd7 100644
--- a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+
+import { storeToRefs } from "pinia"
+
+import { useUiStore } from "~/stores/ui"
+import { useSearchStore } from "~/stores/search"
+import { useMediaStore } from "~/stores/media"
+
+import { useAnalytics } from "~/composables/use-analytics"
+import { useExternalSources } from "~/composables/use-external-sources"
+
+import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VModal from "~/components/VModal/VModal.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+withDefaults(
+  defineProps<{
+    searchTerm: string
+    isSupported?: boolean
+    hasNoResults?: boolean
+  }>(),
+  {
+    isSupported: false,
+    hasNoResults: true,
+  }
+)
+
+const sectionRef = ref<HTMLElement | null>(null)
+const searchStore = useSearchStore()
+const uiStore = useUiStore()
+
+const { sendCustomEvent } = useAnalytics()
+
+const mediaStore = useMediaStore()
+const { currentPage } = storeToRefs(mediaStore)
+
+const handleModalOpen = () => {
+  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
+    searchType: searchStore.searchType,
+    query: searchStore.searchTerm,
+    resultPage: currentPage.value || 1,
+  })
+}
+
+const { externalSourcesType } = useExternalSources()
+
+const isMd = computed(() => uiStore.isBreakpoint("md"))
+</script>
+
 <template>
   <section
     :key="externalSourcesType"
@@ -61,55 +113,3 @@
     </VModal>
   </section>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue"
-
-import { storeToRefs } from "pinia"
-
-import { useUiStore } from "~/stores/ui"
-import { useSearchStore } from "~/stores/search"
-import { useMediaStore } from "~/stores/media"
-
-import { useAnalytics } from "~/composables/use-analytics"
-import { useExternalSources } from "~/composables/use-external-sources"
-
-import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
-import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-import VModal from "~/components/VModal/VModal.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
-withDefaults(
-  defineProps<{
-    searchTerm: string
-    isSupported?: boolean
-    hasNoResults?: boolean
-  }>(),
-  {
-    isSupported: false,
-    hasNoResults: true,
-  }
-)
-
-const sectionRef = ref<HTMLElement | null>(null)
-const searchStore = useSearchStore()
-const uiStore = useUiStore()
-
-const { sendCustomEvent } = useAnalytics()
-
-const mediaStore = useMediaStore()
-const { currentPage } = storeToRefs(mediaStore)
-
-const handleModalOpen = () => {
-  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
-    searchType: searchStore.searchType,
-    query: searchStore.searchTerm,
-    resultPage: currentPage.value || 1,
-  })
-}
-
-const { externalSourcesType } = useExternalSources()
-
-const isMd = computed(() => uiStore.isBreakpoint("md"))
-</script>
diff --git a/frontend/src/components/VExternalSearch/VExternalSourceList.vue b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
index d539a48d166..b22380e6853 100644
--- a/frontend/src/components/VExternalSearch/VExternalSourceList.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
@@ -1,30 +1,3 @@
-<template>
-  <div
-    class="p-4 pt-0 sm:max-w-[25rem] sm:p-6 sm:pt-0"
-    data-testid="source-list-popover"
-  >
-    <p class="label-regular px-3 py-4 text-start !leading-normal">
-      {{ $t("externalSources.caption", { openverse: "Openverse" }) }}
-    </p>
-    <VButton
-      v-for="source in externalSources"
-      :key="source.name"
-      as="VLink"
-      variant="transparent-gray"
-      size="medium"
-      class="label-regular !w-full justify-between"
-      show-external-icon
-      has-icon-end
-      :external-icon-size="6"
-      :href="source.url"
-      :send-external-link-click-event="false"
-      @mousedown="handleClick(source.name)"
-    >
-      {{ source.name }}
-    </VButton>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useAnalytics } from "~/composables/use-analytics"
 
@@ -55,3 +28,30 @@ const handleClick = (sourceName: string) => {
   })
 }
 </script>
+
+<template>
+  <div
+    class="p-4 pt-0 sm:max-w-[25rem] sm:p-6 sm:pt-0"
+    data-testid="source-list-popover"
+  >
+    <p class="label-regular px-3 py-4 text-start !leading-normal">
+      {{ $t("externalSources.caption", { openverse: "Openverse" }) }}
+    </p>
+    <VButton
+      v-for="source in externalSources"
+      :key="source.name"
+      as="VLink"
+      variant="transparent-gray"
+      size="medium"
+      class="label-regular !w-full justify-between"
+      show-external-icon
+      has-icon-end
+      :external-icon-size="6"
+      :href="source.url"
+      :send-external-link-click-event="false"
+      @mousedown="handleClick(source.name)"
+    >
+      {{ source.name }}
+    </VButton>
+  </div>
+</template>
diff --git a/frontend/src/components/VHeader/VFilterIconOrCounter.vue b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
index d09e7e0d021..2bd547afd6e 100644
--- a/frontend/src/components/VHeader/VFilterIconOrCounter.vue
+++ b/frontend/src/components/VHeader/VFilterIconOrCounter.vue
@@ -8,6 +8,7 @@
     {{ appliedFilterCount }}
   </p>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent } from "vue"
 
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index 01bad113b63..2ce913a18a3 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -40,6 +40,7 @@
     />
   </header>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, inject, ref } from "vue"
 
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
index d1971139db1..1ed2c0746c9 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
@@ -22,6 +22,7 @@
     </template>
   </VSearchBarButton>
 </template>
+
 <script lang="ts">
 import { defineComponent } from "vue"
 
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
index 04891575803..1b0ac76bf9d 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue
@@ -79,6 +79,7 @@
     </footer>
   </VModalContent>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue"
 
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
index ef962a29fef..0a65d389f88 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -11,6 +11,7 @@
     <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"
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index 9861b8c0241..343001352fb 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -15,6 +15,7 @@
     </span>
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
diff --git a/frontend/src/components/VHeader/VLogoButton.vue b/frontend/src/components/VHeader/VLogoButton.vue
index ef05185a4d9..1d15ae2a317 100644
--- a/frontend/src/components/VHeader/VLogoButton.vue
+++ b/frontend/src/components/VHeader/VLogoButton.vue
@@ -11,6 +11,7 @@
     <VLogoLoader :status="isFetching ? 'loading' : 'idle'" />
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent } from "vue"
 
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index c582c1704f5..f2da0e805a8 100644
--- a/frontend/src/components/VHeader/VWordPressLink.vue
+++ b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -17,6 +17,7 @@
     </i18n-t>
   </VLink>
 </template>
+
 <script lang="ts">
 import VLink from "~/components/VLink.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue
index 38ce4b66663..bfe8ba3aaa9 100644
--- a/frontend/src/components/VHomepageContent.vue
+++ b/frontend/src/components/VHomepageContent.vue
@@ -77,6 +77,7 @@
     </i18n-t>
   </div>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, ref, PropType } from "vue"
 
diff --git a/frontend/src/components/VIcon/VIcon.vue b/frontend/src/components/VIcon/VIcon.vue
index f9d827f386a..a5632474385 100644
--- a/frontend/src/components/VIcon/VIcon.vue
+++ b/frontend/src/components/VIcon/VIcon.vue
@@ -1,15 +1,3 @@
-<template>
-  <svg
-    :viewBox="viewBox"
-    focusable="false"
-    class="v-icon flex-none"
-    :class="[`w-${size}`, `h-${size}`, { 'rtl-flip': rtlFlip }, icon.class]"
-    aria-hidden="true"
-  >
-    <use :href="icon.url" />
-  </svg>
-</template>
-
 <script lang="ts" setup>
 import { ref, watch } from "vue"
 
@@ -90,6 +78,18 @@ watch(
 )
 </script>
 
+<template>
+  <svg
+    :viewBox="viewBox"
+    focusable="false"
+    class="v-icon flex-none"
+    :class="[`w-${size}`, `h-${size}`, { 'rtl-flip': rtlFlip }, icon.class]"
+    aria-hidden="true"
+  >
+    <use :href="icon.url" />
+  </svg>
+</template>
+
 <style scoped>
 [dir="rtl"] .v-icon.rtl-flip {
   @apply -scale-x-100 transform;
diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue
index f970f7af66d..e6768e73e95 100644
--- a/frontend/src/components/VImageCell/VImageCell.vue
+++ b/frontend/src/components/VImageCell/VImageCell.vue
@@ -1,65 +1,3 @@
-<template>
-  <li
-    :style="styles"
-    class="container w-full max-w-full"
-    :class="isSquare ? 'square' : 'intrinsic'"
-  >
-    <VLink
-      itemprop="contentUrl"
-      :title="contextSensitiveTitle"
-      :href="imageLink"
-      class="group relative block w-full overflow-hidden rounded-sm text-dark-charcoal-10 focus-visible:outline-3 focus-visible:outline-offset-4"
-      :aria-label="contextSensitiveTitle"
-      @mousedown="sendSelectSearchResultEvent"
-    >
-      <figure
-        itemprop="image"
-        itemscope
-        itemtype="https://schema.org/ImageObject"
-        class="grid w-full rounded-sm"
-        :class="{ 'aspect-square': isSquare }"
-      >
-        <img
-          loading="lazy"
-          class="image col-span-full row-span-full block w-full overflow-hidden rounded-sm object-cover duration-200 motion-safe:transition-[filter,transform]"
-          :class="[
-            isSquare ? 'h-full' : 'margin-auto',
-            { 'scale-150 blur-image': shouldBlur },
-          ]"
-          :alt="
-            shouldBlur ? `${$t('sensitiveContent.title.image')}` : image.title
-          "
-          :src="imageUrl"
-          :width="imgWidth"
-          :height="imgHeight"
-          itemprop="thumbnailUrl"
-          @load="getImgDimension"
-          @error="onImageLoadError($event)"
-        />
-        <figcaption
-          class="col-span-full self-end justify-self-start rounded-sm bg-white text-dark-charcoal group-hover:visible group-focus-visible:visible"
-          :class="
-            isSquare
-              ? 'invisible row-span-full m-2 p-2'
-              : 'my-2 sm:invisible sm:row-span-full sm:m-2 sm:p-2'
-          "
-        >
-          <h2 class="sr-only">
-            {{
-              shouldBlur ? `${$t("sensitiveContent.title.image")}` : image.title
-            }}
-          </h2>
-          <VLicense
-            :license="image.license"
-            :hide-name="true"
-            class="text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus-visible:text-dark-charcoal sm:text-dark-charcoal"
-          />
-        </figcaption>
-      </figure>
-    </VLink>
-  </li>
-</template>
-
 <script setup lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
@@ -201,6 +139,68 @@ const sendSelectSearchResultEvent = (event: MouseEvent) => {
 const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
 </script>
 
+<template>
+  <li
+    :style="styles"
+    class="container w-full max-w-full"
+    :class="isSquare ? 'square' : 'intrinsic'"
+  >
+    <VLink
+      itemprop="contentUrl"
+      :title="contextSensitiveTitle"
+      :href="imageLink"
+      class="group relative block w-full overflow-hidden rounded-sm text-dark-charcoal-10 focus-visible:outline-3 focus-visible:outline-offset-4"
+      :aria-label="contextSensitiveTitle"
+      @mousedown="sendSelectSearchResultEvent"
+    >
+      <figure
+        itemprop="image"
+        itemscope
+        itemtype="https://schema.org/ImageObject"
+        class="grid w-full rounded-sm"
+        :class="{ 'aspect-square': isSquare }"
+      >
+        <img
+          loading="lazy"
+          class="image col-span-full row-span-full block w-full overflow-hidden rounded-sm object-cover duration-200 motion-safe:transition-[filter,transform]"
+          :class="[
+            isSquare ? 'h-full' : 'margin-auto',
+            { 'scale-150 blur-image': shouldBlur },
+          ]"
+          :alt="
+            shouldBlur ? `${$t('sensitiveContent.title.image')}` : image.title
+          "
+          :src="imageUrl"
+          :width="imgWidth"
+          :height="imgHeight"
+          itemprop="thumbnailUrl"
+          @load="getImgDimension"
+          @error="onImageLoadError($event)"
+        />
+        <figcaption
+          class="col-span-full self-end justify-self-start rounded-sm bg-white text-dark-charcoal group-hover:visible group-focus-visible:visible"
+          :class="
+            isSquare
+              ? 'invisible row-span-full m-2 p-2'
+              : 'my-2 sm:invisible sm:row-span-full sm:m-2 sm:p-2'
+          "
+        >
+          <h2 class="sr-only">
+            {{
+              shouldBlur ? `${$t("sensitiveContent.title.image")}` : image.title
+            }}
+          </h2>
+          <VLicense
+            :license="image.license"
+            :hide-name="true"
+            class="text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus-visible:text-dark-charcoal sm:text-dark-charcoal"
+          />
+        </figcaption>
+      </figure>
+    </VLink>
+  </li>
+</template>
+
 <style scoped>
 @screen sm {
   .intrinsic.container {
diff --git a/frontend/src/components/VLanguageSelect/VLanguageSelect.vue b/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
index c950d86181b..5d00f734a1c 100644
--- a/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
+++ b/frontend/src/components/VLanguageSelect/VLanguageSelect.vue
@@ -1,17 +1,3 @@
-<template>
-  <VSelectField
-    v-model="locale"
-    field-id="language"
-    :choices="choices"
-    :blank-text="$t('language.language')"
-    :label-text="$t('language.language')"
-  >
-    <template #start>
-      <VIcon name="globe" />
-    </template>
-  </VSelectField>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from "#imports"
 
@@ -45,3 +31,17 @@ const choices = computed<Choice[]>(() =>
     .sort((a, b) => a.key.localeCompare(b.key))
 )
 </script>
+
+<template>
+  <VSelectField
+    v-model="locale"
+    field-id="language"
+    :choices="choices"
+    :blank-text="$t('language.language')"
+    :label-text="$t('language.language')"
+  >
+    <template #start>
+      <VIcon name="globe" />
+    </template>
+  </VSelectField>
+</template>
diff --git a/frontend/src/components/VLink.vue b/frontend/src/components/VLink.vue
index bb320bca1b8..f768075ddf6 100644
--- a/frontend/src/components/VLink.vue
+++ b/frontend/src/components/VLink.vue
@@ -1,26 +1,3 @@
-<!-- eslint-disable vue/no-restricted-syntax -->
-<template>
-  <NuxtLink
-    :class="{ 'inline-flex w-max items-center gap-x-2': showExternalIcon }"
-    :aria-disabled="!to"
-    v-bind="linkProps"
-    :to="to"
-    @click="handleClick"
-    @mousedown="emit('mousedown', $event)"
-    @blur="emit('blur', $event)"
-    @focus="emit('focus', $event)"
-    @keydown="emit('keydown', $event)"
-  >
-    <slot /><VIcon
-      v-if="showExternalIcon && !isInternal"
-      name="external-link"
-      class="inline-block"
-      :size="externalIconSize"
-      rtl-flip
-    />
-  </NuxtLink>
-</template>
-
 <script setup lang="ts">
 /**
  * This is a wrapper component for all links. If `href` prop is undefined,
@@ -136,3 +113,26 @@ const handleClick = (e: MouseEvent) => {
   })
 }
 </script>
+
+<!-- eslint-disable vue/no-restricted-syntax -->
+<template>
+  <NuxtLink
+    :class="{ 'inline-flex w-max items-center gap-x-2': showExternalIcon }"
+    :aria-disabled="!to"
+    v-bind="linkProps"
+    :to="to"
+    @click="handleClick"
+    @mousedown="emit('mousedown', $event)"
+    @blur="emit('blur', $event)"
+    @focus="emit('focus', $event)"
+    @keydown="emit('keydown', $event)"
+  >
+    <slot /><VIcon
+      v-if="showExternalIcon && !isInternal"
+      name="external-link"
+      class="inline-block"
+      :size="externalIconSize"
+      rtl-flip
+    />
+  </NuxtLink>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
index 97a67d399c2..8a216202a63 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VScroller.vue
@@ -9,6 +9,7 @@
     />
   </div>
 </template>
+
 <script lang="ts">
 import { useI18n } from "#imports"
 
diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
index ea197a87ebf..58243537ea6 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -11,6 +11,7 @@
     <span class="w-max">{{ title }}</span>
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
diff --git a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
index a8230128c23..ef16bb48023 100644
--- a/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
+++ b/frontend/src/components/VMediaInfo/VCollapsibleTagSection.vue
@@ -30,6 +30,7 @@
     /></VButton>
   </div>
 </template>
+
 <script lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
diff --git a/frontend/src/components/VMediaInfo/VGetMediaButton.vue b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
index d503e6d6544..882a44f6d87 100644
--- a/frontend/src/components/VMediaInfo/VGetMediaButton.vue
+++ b/frontend/src/components/VMediaInfo/VGetMediaButton.vue
@@ -14,6 +14,7 @@
     {{ $t(`${mediaType}Details.weblink`) }}
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
diff --git a/frontend/src/components/VMediaInfo/VMediaInfo.vue b/frontend/src/components/VMediaInfo/VMediaInfo.vue
index b2c88779ff7..14fe439b22c 100644
--- a/frontend/src/components/VMediaInfo/VMediaInfo.vue
+++ b/frontend/src/components/VMediaInfo/VMediaInfo.vue
@@ -4,6 +4,7 @@
     <VByLine :media="media" />
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from "vue"
 
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index ccb55ef792e..0726ec474cd 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -40,6 +40,7 @@
     </template>
   </dl>
 </template>
+
 <script lang="ts">
 import { firstParam, useNuxtApp, useRoute } from "#imports"
 
diff --git a/frontend/src/components/VMediaInfo/VMetadataValue.vue b/frontend/src/components/VMediaInfo/VMetadataValue.vue
index 5387d5eaaca..78d21debe48 100644
--- a/frontend/src/components/VMediaInfo/VMetadataValue.vue
+++ b/frontend/src/components/VMediaInfo/VMetadataValue.vue
@@ -17,6 +17,7 @@
     <template v-else>{{ datum.value }}</template>
   </dd>
 </template>
+
 <script lang="ts">
 import type { Metadata } from "~/types/media"
 
diff --git a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
index ee3e2e18118..28c3a677e54 100644
--- a/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
+++ b/frontend/src/components/VMediaInfo/VSourceProviderTooltip.vue
@@ -12,6 +12,7 @@
     </VTooltip>
   </dt>
 </template>
+
 <script lang="ts">
 import { useI18n } from "#imports"
 
diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
index 47c00981190..38706ee4060 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { toRefs, ref, computed, useAttrs } from "vue"
+
+import { useDialogContent } from "~/composables/use-dialog-content"
+
+import type { ModalColorMode, ModalVariant } from "~/types/modal"
+
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+/**
+ * Renders the inner content of a modal and manages focus.
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    hide: () => void
+    hideOnEsc?: boolean
+    hideOnClickOutside?: boolean
+    autoFocusOnShow?: boolean
+    autoFocusOnHide?: boolean
+    trapFocus?: boolean
+    triggerElement?: HTMLElement | null
+    initialFocusElement?: HTMLElement | null
+    variant?: ModalVariant
+    mode?: ModalColorMode
+    /**
+     * The tailwind classes to apply to the modal backdrop element.
+     * Can be used to make the modal hidden on some breakpoint.
+     */
+    contentClasses?: string
+  }>(),
+  {
+    hideOnEsc: true,
+    hideOnClickOutside: false,
+    autoFocusOnShow: true,
+    autoFocusOnHide: true,
+    trapFocus: true,
+    triggerElement: null,
+    initialFocusElement: null,
+    variant: "default",
+    mode: "light",
+    contentClasses: "",
+  }
+)
+const emit = defineEmits<{
+  keydown: [KeyboardEvent]
+  focus: [FocusEvent]
+  blur: [FocusEvent]
+  close: []
+  open: []
+}>()
+const attrs = useAttrs()
+
+const propsRefs = toRefs(props)
+const closeButton = ref<InstanceType<typeof VIconButton> | null>(null)
+const initialFocusElement = computed(
+  () => props.initialFocusElement || closeButton.value?.$el
+)
+const dialogRef = ref<HTMLElement | null>(null)
+const { onKeyDown, onBlur, deactivateFocusTrap } = useDialogContent({
+  dialogElements: {
+    dialogRef,
+    initialFocusElementRef: initialFocusElement,
+    triggerElementRef: propsRefs.triggerElement,
+  },
+  visibleRef: propsRefs.visible,
+  dialogOptions: {
+    hideOnEscRef: propsRefs.hideOnEsc,
+    hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
+    autoFocusOnShowRef: propsRefs.autoFocusOnShow,
+    autoFocusOnHideRef: propsRefs.autoFocusOnHide,
+    trapFocusRef: propsRefs.trapFocus,
+  },
+  hideRef: propsRefs.hide,
+  emit: emit as (event: string) => void,
+  attrs,
+})
+
+defineExpose({
+  dialogRef,
+  deactivateFocusTrap,
+})
+</script>
+
 <template>
   <div v-if="visible">
     <Teleport to="#teleports">
@@ -88,92 +174,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { toRefs, ref, computed, useAttrs } from "vue"
-
-import { useDialogContent } from "~/composables/use-dialog-content"
-
-import type { ModalColorMode, ModalVariant } from "~/types/modal"
-
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-/**
- * Renders the inner content of a modal and manages focus.
- */
-defineOptions({
-  inheritAttrs: false,
-})
-const props = withDefaults(
-  defineProps<{
-    visible: boolean
-    hide: () => void
-    hideOnEsc?: boolean
-    hideOnClickOutside?: boolean
-    autoFocusOnShow?: boolean
-    autoFocusOnHide?: boolean
-    trapFocus?: boolean
-    triggerElement?: HTMLElement | null
-    initialFocusElement?: HTMLElement | null
-    variant?: ModalVariant
-    mode?: ModalColorMode
-    /**
-     * The tailwind classes to apply to the modal backdrop element.
-     * Can be used to make the modal hidden on some breakpoint.
-     */
-    contentClasses?: string
-  }>(),
-  {
-    hideOnEsc: true,
-    hideOnClickOutside: false,
-    autoFocusOnShow: true,
-    autoFocusOnHide: true,
-    trapFocus: true,
-    triggerElement: null,
-    initialFocusElement: null,
-    variant: "default",
-    mode: "light",
-    contentClasses: "",
-  }
-)
-const emit = defineEmits<{
-  keydown: [KeyboardEvent]
-  focus: [FocusEvent]
-  blur: [FocusEvent]
-  close: []
-  open: []
-}>()
-const attrs = useAttrs()
-
-const propsRefs = toRefs(props)
-const closeButton = ref<InstanceType<typeof VIconButton> | null>(null)
-const initialFocusElement = computed(
-  () => props.initialFocusElement || closeButton.value?.$el
-)
-const dialogRef = ref<HTMLElement | null>(null)
-const { onKeyDown, onBlur, deactivateFocusTrap } = useDialogContent({
-  dialogElements: {
-    dialogRef,
-    initialFocusElementRef: initialFocusElement,
-    triggerElementRef: propsRefs.triggerElement,
-  },
-  visibleRef: propsRefs.visible,
-  dialogOptions: {
-    hideOnEscRef: propsRefs.hideOnEsc,
-    hideOnClickOutsideRef: propsRefs.hideOnClickOutside,
-    autoFocusOnShowRef: propsRefs.autoFocusOnShow,
-    autoFocusOnHideRef: propsRefs.autoFocusOnHide,
-    trapFocusRef: propsRefs.trapFocus,
-  },
-  hideRef: propsRefs.hide,
-  emit: emit as (event: string) => void,
-  attrs,
-})
-
-defineExpose({
-  dialogRef,
-  deactivateFocusTrap,
-})
-</script>
-
 <style scoped>
 /*
 For mobiles that do not support dvh units, we add a fallback padding
diff --git a/frontend/src/components/VPopover/VPopoverContent.vue b/frontend/src/components/VPopover/VPopoverContent.vue
index 22a12c81d24..2abe2516955 100644
--- a/frontend/src/components/VPopover/VPopoverContent.vue
+++ b/frontend/src/components/VPopover/VPopoverContent.vue
@@ -117,6 +117,7 @@ export default defineComponent({
   },
 })
 </script>
+
 <style>
 .popover-content {
   height: var(--popover-height, auto);
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
index 1d39714c90e..83b944002b7 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioInstructions.vue
@@ -11,6 +11,7 @@
     </i18n-t>
   </VSnackbar>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 
diff --git a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
index fe225969d07..81161884994 100644
--- a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
@@ -29,6 +29,7 @@
     </template>
   </VMediaCollection>
 </template>
+
 <script lang="ts">
 import { defineComponent, type PropType } from "vue"
 
diff --git a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
index 23bfda46e13..9454b965f22 100644
--- a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
@@ -24,6 +24,7 @@
     />
   </section>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, inject, type PropType, ref } from "vue"
 
diff --git a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
index 229c8b4c669..47180e6f7bd 100644
--- a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
@@ -51,6 +51,7 @@
     </template>
   </VMediaCollection>
 </template>
+
 <script lang="ts">
 import { useI18n } from "#imports"
 
diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue
index e8d8c6176c6..d6db202acc7 100644
--- a/frontend/src/components/VSelectField/VSelectField.vue
+++ b/frontend/src/components/VSelectField/VSelectField.vue
@@ -1,31 +1,3 @@
-<template>
-  <div
-    class="relative m-0.5px box-content block w-fit overflow-hidden rounded-sm border border-dark-charcoal border-opacity-20 text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-pink hover:border-dark-charcoal focus-within:hover:border-pink"
-    :class="splitAttrs.classAttrs"
-  >
-    <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
-      <slot name="start" />
-    </div>
-    <div class="pointer-events-none absolute inset-y-0 end-2 my-auto h-fit">
-      <VIcon name="caret-down" />
-    </div>
-    <select
-      :id="fieldId"
-      v-model="selectValue"
-      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] w-full appearance-none truncate bg-tx pe-10"
-      :class="hasStartContent ? 'ps-10' : 'ps-2'"
-      :name="fieldName"
-      v-bind="splitAttrs.nonClassAttrs"
-      :aria-label="labelText"
-    >
-      <option v-if="blankText" disabled value="">{{ blankText }}</option>
-      <option v-for="choice in choices" :key="choice.key" :value="choice.key">
-        {{ choice.text }}
-      </option>
-    </select>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, useAttrs, useSlots } from "vue"
 
@@ -98,3 +70,31 @@ const splitAttrs = computed(() => {
   }
 })
 </script>
+
+<template>
+  <div
+    class="relative m-0.5px box-content block w-fit overflow-hidden rounded-sm border border-dark-charcoal border-opacity-20 text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-pink hover:border-dark-charcoal focus-within:hover:border-pink"
+    :class="splitAttrs.classAttrs"
+  >
+    <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
+      <slot name="start" />
+    </div>
+    <div class="pointer-events-none absolute inset-y-0 end-2 my-auto h-fit">
+      <VIcon name="caret-down" />
+    </div>
+    <select
+      :id="fieldId"
+      v-model="selectValue"
+      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] w-full appearance-none truncate bg-tx pe-10"
+      :class="hasStartContent ? 'ps-10' : 'ps-2'"
+      :name="fieldName"
+      v-bind="splitAttrs.nonClassAttrs"
+      :aria-label="labelText"
+    >
+      <option v-if="blankText" disabled value="">{{ blankText }}</option>
+      <option v-for="choice in choices" :key="choice.key" :value="choice.key">
+        {{ choice.text }}
+      </option>
+    </select>
+  </div>
+</template>
diff --git a/frontend/src/components/VSkipToContentButton.vue b/frontend/src/components/VSkipToContentButton.vue
index d1eb71eb992..a386769a259 100644
--- a/frontend/src/components/VSkipToContentButton.vue
+++ b/frontend/src/components/VSkipToContentButton.vue
@@ -8,6 +8,7 @@
     >{{ $t("skipToContent") }}
   </VButton>
 </template>
+
 <script lang="ts">
 import { skipToContentTargetId } from "~/constants/window"
 
@@ -23,6 +24,7 @@ export default {
   },
 }
 </script>
+
 <style scoped>
 .skip-button:not(:focus-visible) {
   @apply sr-only;
diff --git a/frontend/src/components/VSvg/VSvg.vue b/frontend/src/components/VSvg/VSvg.vue
index d1ef986ac37..c2aa09aa900 100644
--- a/frontend/src/components/VSvg/VSvg.vue
+++ b/frontend/src/components/VSvg/VSvg.vue
@@ -1,15 +1,3 @@
-<template>
-  <svg
-    :viewBox="viewBox"
-    focusable="false"
-    class="v-icon flex-none"
-    :class="icon.class"
-    aria-hidden="true"
-  >
-    <use :href="icon.url" />
-  </svg>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from "vue"
 
@@ -53,3 +41,15 @@ watch(
   }
 )
 </script>
+
+<template>
+  <svg
+    :viewBox="viewBox"
+    focusable="false"
+    class="v-icon flex-none"
+    :class="icon.class"
+    aria-hidden="true"
+  >
+    <use :href="icon.url" />
+  </svg>
+</template>
diff --git a/frontend/src/components/VTabs/VTabPanel.vue b/frontend/src/components/VTabs/VTabPanel.vue
index d823e0e838e..64925bce3e7 100644
--- a/frontend/src/components/VTabs/VTabPanel.vue
+++ b/frontend/src/components/VTabs/VTabPanel.vue
@@ -11,6 +11,7 @@
     <slot />
   </div>
 </template>
+
 <script lang="ts">
 import {
   computed,
diff --git a/frontend/src/error.vue b/frontend/src/error.vue
index b18a171267a..ed8bdaacf3c 100644
--- a/frontend/src/error.vue
+++ b/frontend/src/error.vue
@@ -1,34 +1,3 @@
-<template>
-  <div>
-    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
-      <Head>
-        <template v-for="link in head.link" :key="link.id">
-          <Link
-            :id="link.id"
-            :rel="link.rel"
-            :href="link.href"
-            :hreflang="link.hreflang"
-          />
-        </template>
-        <template v-for="meta in head.meta" :key="meta.id">
-          <Meta
-            :id="meta.id"
-            :property="meta.property"
-            :content="meta.content"
-          />
-        </template>
-      </Head>
-      <Body>
-        <VSkipToContentButton />
-        <NuxtLayout name="default">
-          <VFourOhFour class="flex-grow" :error="error" />
-        </NuxtLayout>
-        <div id="modal"></div>
-      </Body>
-    </Html>
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   onMounted,
@@ -68,3 +37,34 @@ onMounted(() => {
 const featureFlagStore = useFeatureFlagStore()
 featureFlagStore.initFromQuery(route.query)
 </script>
+
+<template>
+  <div>
+    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
+      <Head>
+        <template v-for="link in head.link" :key="link.id">
+          <Link
+            :id="link.id"
+            :rel="link.rel"
+            :href="link.href"
+            :hreflang="link.hreflang"
+          />
+        </template>
+        <template v-for="meta in head.meta" :key="meta.id">
+          <Meta
+            :id="meta.id"
+            :property="meta.property"
+            :content="meta.content"
+          />
+        </template>
+      </Head>
+      <Body>
+        <VSkipToContentButton />
+        <NuxtLayout name="default">
+          <VFourOhFour class="flex-grow" :error="error" />
+        </NuxtLayout>
+        <div id="modal"></div>
+      </Body>
+    </Html>
+  </div>
+</template>
diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue
index 8bae39f3490..7ab7fa7a26e 100644
--- a/frontend/src/layouts/content-layout.vue
+++ b/frontend/src/layouts/content-layout.vue
@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from "vue"
+
+import { useWindowScroll } from "@vueuse/core"
+
+import { ShowScrollButtonKey } from "~/types/provides"
+
+import VBanners from "~/components/VBanner/VBanners.vue"
+import VFooter from "~/components/VFooter/VFooter.vue"
+import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+
+/**
+ * This is the ContentLayout: the single result and the content pages.
+ * It has white background and is scrollable.
+ */
+defineOptions({
+  name: "ContentLayout",
+})
+
+const isHeaderScrolled = ref(false)
+const { y: scrollY } = useWindowScroll()
+const isMainContentScrolled = computed(() => scrollY.value > 0)
+watch([isMainContentScrolled], ([isMainContentScrolled]) => {
+  isHeaderScrolled.value = isMainContentScrolled
+})
+const showScrollButton = computed(() => scrollY.value > 70)
+
+provide(ShowScrollButtonKey, showScrollButton)
+</script>
+
 <template>
   <div
     class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] bg-white"
@@ -19,55 +49,6 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, provide, ref, watch } from "vue"
-
-import { useWindowScroll } from "@vueuse/core"
-
-import { useUiStore } from "~/stores/ui"
-
-import { ShowScrollButtonKey } from "~/types/provides"
-
-import VBanners from "~/components/VBanner/VBanners.vue"
-import VFooter from "~/components/VFooter/VFooter.vue"
-import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
-
-/**
- * This is the ContentLayout: the search page, the single result page,
- * and the content pages.
- * It has white background and is scrollable.
- */
-export default defineComponent({
-  name: "ContentLayout",
-  components: {
-    VBanners,
-    VFooter,
-    VHeaderInternal,
-  },
-  setup() {
-    const uiStore = useUiStore()
-    const closeSidebar = () => {
-      uiStore.setFiltersState(false)
-    }
-
-    const isHeaderScrolled = ref(false)
-    const { y: scrollY } = useWindowScroll()
-    const isMainContentScrolled = computed(() => scrollY.value > 0)
-    watch([isMainContentScrolled], ([isMainContentScrolled]) => {
-      isHeaderScrolled.value = isMainContentScrolled
-    })
-    const showScrollButton = computed(() => scrollY.value > 70)
-
-    provide(ShowScrollButtonKey, showScrollButton)
-
-    return {
-      isHeaderScrolled,
-
-      closeSidebar,
-    }
-  },
-})
-</script>
 
 <style scoped>
 .app {
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
index 1b4075cd6ae..329c2efd14c 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import VBanners from "~/components/VBanner/VBanners.vue"
+import VFooter from "~/components/VFooter/VFooter.vue"
+import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
+/**
+ * The default layout is one screen high and yellow, without sidebars.
+ */
+defineOptions({
+  name: "DefaultLayout",
+})
+</script>
+
 <template>
   <div
     class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-yellow"
@@ -12,25 +24,6 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue"
-
-import VBanners from "~/components/VBanner/VBanners.vue"
-import VFooter from "~/components/VFooter/VFooter.vue"
-import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
-
-/**
- * The default layout is one screen high and yellow, without sidebars.
- */
-export default defineComponent({
-  name: "DefaultLayout",
-  components: {
-    VBanners,
-    VFooter,
-    VHeaderInternal,
-  },
-})
-</script>
 
 <style scoped>
 .app {
diff --git a/frontend/src/layouts/search-layout.vue b/frontend/src/layouts/search-layout.vue
index 790040c61a9..49e4131ffb0 100644
--- a/frontend/src/layouts/search-layout.vue
+++ b/frontend/src/layouts/search-layout.vue
@@ -1,46 +1,3 @@
-<template>
-  <div
-    class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr] bg-white"
-    :class="[
-      isSidebarVisible
-        ? 'has-sidebar grid-cols-[1fr_var(--filter-sidebar-width)]'
-        : 'grid-cols-1',
-    ]"
-  >
-    <div class="header-el bg-white">
-      <VBanners />
-      <VHeaderDesktop
-        v-if="isDesktopLayout"
-        class="h-20 border-b bg-white"
-        :class="headerBorder"
-      />
-      <VHeaderMobile
-        v-else
-        class="h-20 border-b bg-white"
-        :class="headerBorder"
-      />
-    </div>
-
-    <aside
-      v-if="isSidebarVisible"
-      class="sidebar end-0 z-10 h-full overflow-y-auto border-s border-dark-charcoal-20 bg-dark-charcoal-06"
-    >
-      <VSearchGridFilter class="px-10 py-8" />
-      <VSafeBrowsing class="border-t border-dark-charcoal-20 px-10 py-8" />
-    </aside>
-
-    <div
-      id="main-page"
-      class="main-page flex h-full w-full min-w-0 flex-col justify-between overflow-y-auto"
-    >
-      <slot />
-      <VFooter
-        mode="content"
-        class="border-t border-dark-charcoal-20 bg-white"
-      />
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { computed, onMounted, provide, ref, watch } from "vue"
 import { useScroll } from "@vueuse/core"
@@ -57,6 +14,10 @@ import VSafeBrowsing from "~/components/VSafeBrowsing/VSafeBrowsing.vue"
 import VHeaderDesktop from "~/components/VHeader/VHeaderDesktop.vue"
 import VHeaderMobile from "~/components/VHeader/VHeaderMobile/VHeaderMobile.vue"
 
+defineOptions({
+  name: "SearchLayout",
+})
+
 /**
  * This is the SearchLayout: the search page that has a sidebar.
  * It has white background.
@@ -105,6 +66,50 @@ const headerBorder = computed(() =>
 )
 </script>
 
+<template>
+  <div
+    class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr] bg-white"
+    :class="[
+      isSidebarVisible
+        ? 'has-sidebar grid-cols-[1fr_var(--filter-sidebar-width)]'
+        : 'grid-cols-1',
+    ]"
+  >
+    <div class="header-el bg-white">
+      <VBanners />
+      <VHeaderDesktop
+        v-if="isDesktopLayout"
+        class="h-20 border-b bg-white"
+        :class="headerBorder"
+      />
+      <VHeaderMobile
+        v-else
+        class="h-20 border-b bg-white"
+        :class="headerBorder"
+      />
+    </div>
+
+    <aside
+      v-if="isSidebarVisible"
+      class="sidebar end-0 z-10 h-full overflow-y-auto border-s border-dark-charcoal-20 bg-dark-charcoal-06"
+    >
+      <VSearchGridFilter class="px-10 py-8" />
+      <VSafeBrowsing class="border-t border-dark-charcoal-20 px-10 py-8" />
+    </aside>
+
+    <div
+      id="main-page"
+      class="main-page flex h-full w-full min-w-0 flex-col justify-between overflow-y-auto"
+    >
+      <slot />
+      <VFooter
+        mode="content"
+        class="border-t border-dark-charcoal-20 bg-white"
+      />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .has-sidebar .sidebar {
   width: var(--filter-sidebar-width);
diff --git a/frontend/src/pages/about.vue b/frontend/src/pages/about.vue
index 88f057795ee..99fdc8f8805 100644
--- a/frontend/src/pages/about.vue
+++ b/frontend/src/pages/about.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useI18n } from "#imports"
+
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+
+defineOptions({
+  name: "AboutPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const { t } = useI18n({ useScope: "global" })
+
+useHead({
+  title: `${t("about.title", { openverse: "Openverse" })} | Openverse`,
+})
+</script>
+
 <template>
   <VContentPage>
     <h1>
@@ -151,19 +172,3 @@
     </i18n-t>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useI18n } from "#imports"
-
-import VLink from "~/components/VLink.vue"
-import VContentPage from "~/components/VContentPage.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-const { t } = useI18n({ useScope: "global" })
-
-useHead({
-  title: `${t("about.title", { openverse: "Openverse" })} | Openverse`,
-})
-</script>
diff --git a/frontend/src/pages/audio/[id]/index.vue b/frontend/src/pages/audio/[id]/index.vue
index 973cf0bfec1..9c60341f1b5 100644
--- a/frontend/src/pages/audio/[id]/index.vue
+++ b/frontend/src/pages/audio/[id]/index.vue
@@ -1,45 +1,3 @@
-<template>
-  <main :id="skipToContentTargetId" tabindex="-1" class="relative flex-grow">
-    <VErrorSection
-      v-if="fetchingError"
-      :fetching-error="fetchingError"
-      class="px-6 py-10 lg:px-10"
-    />
-    <template v-else-if="audio">
-      <VSafetyWall v-if="isHidden" :media="audio" @reveal="reveal" />
-      <template v-else>
-        <VSingleResultControls :media="audio" />
-        <VAudioTrack
-          layout="full"
-          :audio="audio"
-          class="main-track"
-          @interacted="sendAudioEvent($event, 'AudioDetailPage')"
-        />
-        <div
-          class="mx-auto mt-10 flex flex-col gap-10 px-6 lg:mt-16 lg:max-w-5xl lg:gap-16"
-        >
-          <VMediaReuse :media="audio" />
-          <VMediaDetails :media="audio">
-            <template #thumbnail>
-              <div
-                class="h-[75px] w-[75px] flex-none overflow-hidden rounded-sm lg:h-30 lg:w-30"
-              >
-                <VAudioThumbnail :audio="audio" />
-              </div>
-            </template>
-          </VMediaDetails>
-          <VRelatedMedia
-            v-if="audio"
-            media-type="audio"
-            :related-to="audio.id"
-            class="mb-12"
-          />
-        </div>
-      </template>
-    </template>
-  </main>
-</template>
-
 <script setup lang="ts">
 import {
   definePageMeta,
@@ -75,6 +33,10 @@ import VSingleResultControls from "~/components/VSingleResultControls.vue"
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
 import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
 
+defineOptions({
+  name: "AudioDetailPage",
+})
+
 definePageMeta({
   layout: "content-layout",
   middleware: singleResultMiddleware,
@@ -170,3 +132,45 @@ watch(error, (err) => {
   }
 })
 </script>
+
+<template>
+  <main :id="skipToContentTargetId" tabindex="-1" class="relative flex-grow">
+    <VErrorSection
+      v-if="fetchingError"
+      :fetching-error="fetchingError"
+      class="px-6 py-10 lg:px-10"
+    />
+    <template v-else-if="audio">
+      <VSafetyWall v-if="isHidden" :media="audio" @reveal="reveal" />
+      <template v-else>
+        <VSingleResultControls :media="audio" />
+        <VAudioTrack
+          layout="full"
+          :audio="audio"
+          class="main-track"
+          @interacted="sendAudioEvent($event, 'AudioDetailPage')"
+        />
+        <div
+          class="mx-auto mt-10 flex flex-col gap-10 px-6 lg:mt-16 lg:max-w-5xl lg:gap-16"
+        >
+          <VMediaReuse :media="audio" />
+          <VMediaDetails :media="audio">
+            <template #thumbnail>
+              <div
+                class="h-[75px] w-[75px] flex-none overflow-hidden rounded-sm lg:h-30 lg:w-30"
+              >
+                <VAudioThumbnail :audio="audio" />
+              </div>
+            </template>
+          </VMediaDetails>
+          <VRelatedMedia
+            v-if="audio"
+            media-type="audio"
+            :related-to="audio.id"
+            class="mb-12"
+          />
+        </div>
+      </template>
+    </template>
+  </main>
+</template>
diff --git a/frontend/src/pages/audio/collection.vue b/frontend/src/pages/audio/collection.vue
index d2b759477ff..2c789dd6ab7 100644
--- a/frontend/src/pages/audio/collection.vue
+++ b/frontend/src/pages/audio/collection.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    :id="skipToContentTargetId"
-    tabindex="-1"
-    class="p-6 pt-0 lg:p-10 lg:pt-2"
-  >
-    <VCollectionResults
-      v-if="collectionParams"
-      search-term=""
-      :is-fetching="isFetching"
-      :results="{ type: 'audio', items: media }"
-      :collection-label="collectionLabel"
-      :collection-params="collectionParams"
-      @load-more="loadMore"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   definePageMeta,
@@ -37,6 +19,10 @@ import { skipToContentTargetId } from "~/constants/window"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
+defineOptions({
+  name: "AudioCollection",
+})
+
 definePageMeta({
   layout: "content-layout",
   middleware: collectionMiddleware,
@@ -105,3 +91,21 @@ await useAsyncData(
   { lazy: true, server: false }
 )
 </script>
+
+<template>
+  <div
+    :id="skipToContentTargetId"
+    tabindex="-1"
+    class="p-6 pt-0 lg:p-10 lg:pt-2"
+  >
+    <VCollectionResults
+      v-if="collectionParams"
+      search-term=""
+      :is-fetching="isFetching"
+      :results="{ type: 'audio', items: media }"
+      :collection-label="collectionLabel"
+      :collection-params="collectionParams"
+      @load-more="loadMore"
+    />
+  </div>
+</template>
diff --git a/frontend/src/pages/feedback.vue b/frontend/src/pages/feedback.vue
index 1cd36bc5657..0aec155219f 100644
--- a/frontend/src/pages/feedback.vue
+++ b/frontend/src/pages/feedback.vue
@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useI18n } from "#imports"
+
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+import VTabs from "~/components/VTabs/VTabs.vue"
+import VTab from "~/components/VTabs/VTab.vue"
+import VTabPanel from "~/components/VTabs/VTabPanel.vue"
+
+const bugForm =
+  "https://docs.google.com/forms/d/e/1FAIpQLSenCn-3HoZlCz4vlL2621wjezfu1sPZDaWGe_FtQ1R5-5qR4Q/viewform"
+const suggestionForm =
+  "https://docs.google.com/forms/d/e/1FAIpQLSfGC7JWbNjGs-_pUNe3B2nzBW-YrIrmRd92t-7u0y7s8jMjzQ/viewform"
+
+const forms = {
+  report: `${bugForm}?embedded=true`,
+  improve: `${suggestionForm}?embedded=true`,
+} as const
+const tabs = Object.keys(forms) as (keyof typeof forms)[]
+
+defineOptions({
+  name: "FeedbackPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const { t } = useI18n({ useScope: "global" })
+useHead({ title: `${t("feedback.title")} | Openverse` })
+</script>
+
 <template>
   <VContentPage>
     <h1 id="feedback">
@@ -37,31 +69,3 @@
     </section>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useI18n } from "#imports"
-
-import VLink from "~/components/VLink.vue"
-import VContentPage from "~/components/VContentPage.vue"
-import VTabs from "~/components/VTabs/VTabs.vue"
-import VTab from "~/components/VTabs/VTab.vue"
-import VTabPanel from "~/components/VTabs/VTabPanel.vue"
-
-const bugForm =
-  "https://docs.google.com/forms/d/e/1FAIpQLSenCn-3HoZlCz4vlL2621wjezfu1sPZDaWGe_FtQ1R5-5qR4Q/viewform"
-const suggestionForm =
-  "https://docs.google.com/forms/d/e/1FAIpQLSfGC7JWbNjGs-_pUNe3B2nzBW-YrIrmRd92t-7u0y7s8jMjzQ/viewform"
-
-const forms = {
-  report: `${bugForm}?embedded=true`,
-  improve: `${suggestionForm}?embedded=true`,
-} as const
-const tabs = Object.keys(forms) as (keyof typeof forms)[]
-
-definePageMeta({
-  layout: "content-layout",
-})
-
-const { t } = useI18n({ useScope: "global" })
-useHead({ title: `${t("feedback.title")} | Openverse` })
-</script>
diff --git a/frontend/src/pages/image/[id]/index.vue b/frontend/src/pages/image/[id]/index.vue
index e5f1e1f4377..f147e4f717b 100644
--- a/frontend/src/pages/image/[id]/index.vue
+++ b/frontend/src/pages/image/[id]/index.vue
@@ -1,74 +1,3 @@
-<template>
-  <main :id="skipToContentTargetId" tabindex="-1" class="relative flex-grow">
-    <VErrorSection
-      v-if="fetchingError"
-      :fetching-error="fetchingError"
-      class="px-6 py-10 lg:px-10"
-    />
-    <template v-else-if="image">
-      <VSafetyWall v-if="isHidden" :media="image" @reveal="reveal" />
-      <template v-else>
-        <VSingleResultControls :media="image" />
-        <figure
-          class="relative mb-4 grid grid-cols-1 grid-rows-1 justify-items-center border-b border-dark-charcoal-20 px-6"
-        >
-          <VBone
-            v-if="showLoadingState"
-            class="col-span-full row-span-full h-[500px] w-[500px] self-center"
-          />
-          <!--
-            re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906
-            Note: this one, I believe, should remain disabled ; but should be double checked by the issue nonetheless
-          -->
-          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-          <img
-            v-if="!sketchFabUid"
-            id="main-image"
-            :src="imageSrc"
-            :alt="image.title"
-            class="col-span-full row-span-full h-full max-h-[500px] w-full rounded-se-sm rounded-ss-sm object-contain"
-            :width="image.width ?? 0"
-            :height="image.height ?? 0"
-            @load="onImageLoaded"
-            @error="onImageError"
-            @contextmenu="handleRightClick(image.id)"
-          />
-          <div
-            v-if="sketchFabUid"
-            class="col-span-full row-span-full w-full lg:max-w-4xl lg:px-4"
-          >
-            <VSketchFabViewer
-              :uid="sketchFabUid"
-              class="rounded-se-sm rounded-ss-sm"
-              @failure="sketchFabfailure = true"
-            />
-          </div>
-        </figure>
-
-        <section
-          class="grid grid-cols-1 grid-rows-[auto,1fr] sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6"
-        >
-          <VMediaInfo :media="image" class="min-w-0 sm:col-start-1" />
-          <VGetMediaButton
-            :media="image"
-            media-type="image"
-            class="row-start-1 mb-4 !w-full flex-initial sm:col-start-2 sm:mb-0 sm:mt-1 sm:!w-auto"
-          />
-        </section>
-
-        <VMediaReuse :media="image" />
-        <VMediaDetails :media="image" />
-
-        <VRelatedMedia v-if="image" media-type="image" :related-to="image.id" />
-      </template>
-    </template>
-    <VBone
-      v-else-if="showLoadingState"
-      class="col-span-full row-span-full mx-auto h-[500px] w-[500px]"
-    />
-  </main>
-</template>
-
 <script setup lang="ts">
 import {
   definePageMeta,
@@ -109,6 +38,10 @@ import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
 
 import errorImage from "~/assets/image_not_available_placeholder.png"
 
+defineOptions({
+  name: "ImageDetailPage",
+})
+
 definePageMeta({
   layout: "content-layout",
   middleware: singleResultMiddleware,
@@ -296,6 +229,77 @@ watch(error, (err) => {
 })
 </script>
 
+<template>
+  <main :id="skipToContentTargetId" tabindex="-1" class="relative flex-grow">
+    <VErrorSection
+      v-if="fetchingError"
+      :fetching-error="fetchingError"
+      class="px-6 py-10 lg:px-10"
+    />
+    <template v-else-if="image">
+      <VSafetyWall v-if="isHidden" :media="image" @reveal="reveal" />
+      <template v-else>
+        <VSingleResultControls :media="image" />
+        <figure
+          class="relative mb-4 grid grid-cols-1 grid-rows-1 justify-items-center border-b border-dark-charcoal-20 px-6"
+        >
+          <VBone
+            v-if="showLoadingState"
+            class="col-span-full row-span-full h-[500px] w-[500px] self-center"
+          />
+          <!--
+            re: disabled static element interactions rule https://github.com/WordPress/openverse/issues/2906
+            Note: this one, I believe, should remain disabled ; but should be double checked by the issue nonetheless
+          -->
+          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+          <img
+            v-if="!sketchFabUid"
+            id="main-image"
+            :src="imageSrc"
+            :alt="image.title"
+            class="col-span-full row-span-full h-full max-h-[500px] w-full rounded-se-sm rounded-ss-sm object-contain"
+            :width="image.width ?? 0"
+            :height="image.height ?? 0"
+            @load="onImageLoaded"
+            @error="onImageError"
+            @contextmenu="handleRightClick(image.id)"
+          />
+          <div
+            v-if="sketchFabUid"
+            class="col-span-full row-span-full w-full lg:max-w-4xl lg:px-4"
+          >
+            <VSketchFabViewer
+              :uid="sketchFabUid"
+              class="rounded-se-sm rounded-ss-sm"
+              @failure="sketchFabfailure = true"
+            />
+          </div>
+        </figure>
+
+        <section
+          class="grid grid-cols-1 grid-rows-[auto,1fr] sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6"
+        >
+          <VMediaInfo :media="image" class="min-w-0 sm:col-start-1" />
+          <VGetMediaButton
+            :media="image"
+            media-type="image"
+            class="row-start-1 mb-4 !w-full flex-initial sm:col-start-2 sm:mb-0 sm:mt-1 sm:!w-auto"
+          />
+        </section>
+
+        <VMediaReuse :media="image" />
+        <VMediaDetails :media="image" />
+
+        <VRelatedMedia v-if="image" media-type="image" :related-to="image.id" />
+      </template>
+    </template>
+    <VBone
+      v-else-if="showLoadingState"
+      class="col-span-full row-span-full mx-auto h-[500px] w-[500px]"
+    />
+  </main>
+</template>
+
 <style scoped>
 section {
   @apply mb-10 w-full px-6 md:mb-16 md:max-w-screen-lg md:px-12 lg:mx-auto lg:px-16;
diff --git a/frontend/src/pages/image/[id]/report.vue b/frontend/src/pages/image/[id]/report.vue
index 53246380d53..420d40860cd 100644
--- a/frontend/src/pages/image/[id]/report.vue
+++ b/frontend/src/pages/image/[id]/report.vue
@@ -1,3 +1,50 @@
+<script setup lang="ts">
+import { definePageMeta, useAsyncData, useI18n, useRoute } from "#imports"
+
+import { ref } from "vue"
+
+import { IMAGE } from "~/constants/media"
+import { skipToContentTargetId } from "~/constants/window"
+
+import { useSingleResultStore } from "~/stores/media/single-result"
+import { getAttribution } from "~/utils/attribution-html"
+import { firstParam } from "~/utils/query-utils"
+import type { ImageDetail } from "~/types/media"
+
+import VButton from "~/components/VButton.vue"
+import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
+
+defineOptions({
+  name: "ImageReportPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const i18n = useI18n({ useScope: "global" })
+const route = useRoute()
+const singleResultStore = useSingleResultStore()
+
+const image = ref<ImageDetail>()
+const attributionMarkup = ref<string>()
+
+await useAsyncData("image-report", async () => {
+  const imageId = firstParam(route?.params.id)
+  if (imageId) {
+    image.value = (await singleResultStore.fetch(IMAGE, imageId)) ?? undefined
+    if (image.value) {
+      attributionMarkup.value = getAttribution(image.value, i18n, {
+        includeIcons: false,
+      })
+    }
+  } else {
+    // TODO: Handle Error
+    console.warn("Not found image")
+  }
+})
+</script>
+
 <template>
   <main
     :id="skipToContentTargetId"
@@ -40,45 +87,3 @@
     />
   </main>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useAsyncData, useI18n, useRoute } from "#imports"
-
-import { ref } from "vue"
-
-import { IMAGE } from "~/constants/media"
-import { skipToContentTargetId } from "~/constants/window"
-
-import { useSingleResultStore } from "~/stores/media/single-result"
-import { getAttribution } from "~/utils/attribution-html"
-import { firstParam } from "~/utils/query-utils"
-import type { ImageDetail } from "~/types/media"
-
-import VButton from "~/components/VButton.vue"
-import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-const i18n = useI18n({ useScope: "global" })
-const route = useRoute()
-const singleResultStore = useSingleResultStore()
-
-const image = ref<ImageDetail>()
-const attributionMarkup = ref<string>()
-
-await useAsyncData("image-report", async () => {
-  const imageId = firstParam(route?.params.id)
-  if (imageId) {
-    image.value = (await singleResultStore.fetch(IMAGE, imageId)) ?? undefined
-    if (image.value) {
-      attributionMarkup.value = getAttribution(image.value, i18n, {
-        includeIcons: false,
-      })
-    }
-  } else {
-    // TODO: Handle Error
-    console.warn("Not found image")
-  }
-})
-</script>
diff --git a/frontend/src/pages/image/collection.vue b/frontend/src/pages/image/collection.vue
index fa2f485f7a7..491d30bdb25 100644
--- a/frontend/src/pages/image/collection.vue
+++ b/frontend/src/pages/image/collection.vue
@@ -1,21 +1,3 @@
-<template>
-  <div
-    :id="skipToContentTargetId"
-    tabindex="-1"
-    class="p-6 pt-0 lg:p-10 lg:pt-2"
-  >
-    <VCollectionResults
-      v-if="collectionParams"
-      search-term=""
-      :is-fetching="isFetching"
-      :results="{ type: 'image', items: media }"
-      :collection-label="collectionLabel"
-      :collection-params="collectionParams"
-      @load-more="loadMore"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   definePageMeta,
@@ -36,6 +18,10 @@ import type { ImageDetail } from "~/types/media"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
+defineOptions({
+  name: "ImageCollection",
+})
+
 definePageMeta({
   layout: "content-layout",
   middleware: collectionMiddleware,
@@ -105,3 +91,21 @@ await useAsyncData(
   { lazy: true, server: false }
 )
 </script>
+
+<template>
+  <div
+    :id="skipToContentTargetId"
+    tabindex="-1"
+    class="p-6 pt-0 lg:p-10 lg:pt-2"
+  >
+    <VCollectionResults
+      v-if="collectionParams"
+      search-term=""
+      :is-fetching="isFetching"
+      :results="{ type: 'image', items: media }"
+      :collection-label="collectionLabel"
+      :collection-params="collectionParams"
+      @load-more="loadMore"
+    />
+  </div>
+</template>
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 33a6b76f27a..0f4eb86a174 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,19 +1,3 @@
-<template>
-  <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:gap-0"
-  >
-    <VHomepageContent
-      class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
-      :handle-search="handleSearch"
-      :search-type="searchType"
-      :set-search-type="setSearchType"
-    />
-
-    <!-- Image carousel -->
-    <VHomeGallery v-if="isXl" class="flex h-full flex-grow" />
-  </main>
-</template>
-
 <script setup lang="ts">
 import { definePageMeta, navigateTo, useHead } from "#imports"
 
@@ -35,9 +19,14 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 import VHomeGallery from "~/components/VHomeGallery/VHomeGallery.vue"
 import VHomepageContent from "~/components/VHomepageContent.vue"
 
+defineOptions({
+  name: "HomePage",
+})
+
 definePageMeta({
   layout: "default",
 })
+
 const featureFlagStore = useFeatureFlagStore()
 const mediaStore = useMediaStore()
 const searchStore = useSearchStore()
@@ -87,6 +76,22 @@ const handleSearch = (searchTerm: string) => {
 }
 </script>
 
+<template>
+  <main
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:gap-0"
+  >
+    <VHomepageContent
+      class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
+      :handle-search="handleSearch"
+      :search-type="searchType"
+      :set-search-type="setSearchType"
+    />
+
+    <!-- Image carousel -->
+    <VHomeGallery v-if="isXl" class="flex h-full flex-grow" />
+  </main>
+</template>
+
 <style>
 @screen lg {
   .homepage-images {
diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
index d9e0558cf1d..f51fc1fb3db 100644
--- a/frontend/src/pages/preferences.vue
+++ b/frontend/src/pages/preferences.vue
@@ -1,3 +1,53 @@
+<script setup lang="ts">
+import { definePageMeta } from "#imports"
+
+import { computed } from "vue"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { SWITCHABLE, ON, OFF } from "~/constants/feature-flag"
+
+import VContentPage from "~/components/VContentPage.vue"
+import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
+
+defineOptions({
+  name: "PreferencesPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const featureFlagStore = useFeatureFlagStore()
+
+const flags = computed(() => featureFlagStore.flags)
+
+/**
+ * Toggle the state of the switchable flag to the preferred value.
+ * @param name
+ * @param checked
+ */
+const handleChange = ({
+  name,
+  checked,
+}: {
+  name: string
+  checked?: boolean
+}) => {
+  featureFlagStore.toggleFeature(name, checked ? ON : OFF)
+}
+
+const flagsBySwitchable = computed(() => {
+  return {
+    true: featureFlagStore.getFlagsBySwitchable(true),
+    false: featureFlagStore.getFlagsBySwitchable(false),
+  }
+})
+
+const featureGroups = computed(() => {
+  return featureFlagStore.getFeatureGroups()
+})
+</script>
+
 <template>
   <VContentPage>
     <h1>{{ $t("prefPage.title") }}</h1>
@@ -78,49 +128,3 @@
     <pre><code>{{ flags }}</code></pre>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta } from "#imports"
-
-import { computed } from "vue"
-
-import { useFeatureFlagStore } from "~/stores/feature-flag"
-import { SWITCHABLE, ON, OFF } from "~/constants/feature-flag"
-
-import VContentPage from "~/components/VContentPage.vue"
-import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-
-const featureFlagStore = useFeatureFlagStore()
-
-const flags = computed(() => featureFlagStore.flags)
-
-/**
- * Toggle the state of the switchable flag to the preferred value.
- * @param name
- * @param checked
- */
-const handleChange = ({
-  name,
-  checked,
-}: {
-  name: string
-  checked?: boolean
-}) => {
-  featureFlagStore.toggleFeature(name, checked ? ON : OFF)
-}
-
-const flagsBySwitchable = computed(() => {
-  return {
-    true: featureFlagStore.getFlagsBySwitchable(true),
-    false: featureFlagStore.getFlagsBySwitchable(false),
-  }
-})
-
-const featureGroups = computed(() => {
-  return featureFlagStore.getFeatureGroups()
-})
-</script>
diff --git a/frontend/src/pages/privacy.vue b/frontend/src/pages/privacy.vue
index 944414c6659..fb589d1256b 100644
--- a/frontend/src/pages/privacy.vue
+++ b/frontend/src/pages/privacy.vue
@@ -1,3 +1,39 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useNuxtApp } from "#imports"
+
+import { computed } from "vue"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { ON, OFF } from "~/constants/feature-flag"
+
+import VLink from "~/components/VLink.vue"
+import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
+import VContentPage from "~/components/VContentPage.vue"
+
+defineOptions({
+  name: "PrivacyPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+useHead({
+  title: `${t("privacy.title", { openverse: "Openverse" })} | Openverse`,
+})
+const featureFlagStore = useFeatureFlagStore()
+
+const isChecked = computed(() => featureFlagStore.isOn("analytics"))
+
+const handleChange = ({ checked }: { checked?: boolean }) => {
+  featureFlagStore.toggleFeature("analytics", checked ? ON : OFF)
+}
+</script>
+
 <template>
   <VContentPage>
     <h1>
@@ -62,35 +98,3 @@
     </VCheckbox>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useNuxtApp } from "#imports"
-
-import { computed } from "vue"
-
-import { useFeatureFlagStore } from "~/stores/feature-flag"
-import { ON, OFF } from "~/constants/feature-flag"
-
-import VLink from "~/components/VLink.vue"
-import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
-import VContentPage from "~/components/VContentPage.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-
-const {
-  $i18n: { t },
-} = useNuxtApp()
-
-useHead({
-  title: `${t("privacy.title", { openverse: "Openverse" })} | Openverse`,
-})
-const featureFlagStore = useFeatureFlagStore()
-
-const isChecked = computed(() => featureFlagStore.isOn("analytics"))
-
-const handleChange = ({ checked }: { checked?: boolean }) => {
-  featureFlagStore.toggleFeature("analytics", checked ? ON : OFF)
-}
-</script>
diff --git a/frontend/src/pages/search-help.vue b/frontend/src/pages/search-help.vue
index 3fd1a8eb102..3e66b26642b 100644
--- a/frontend/src/pages/search-help.vue
+++ b/frontend/src/pages/search-help.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useNuxtApp } from "#imports"
+
+import { useSearchStore } from "~/stores/search"
+
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+
+defineOptions({
+  name: "SearchHelpPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+const searchStore = useSearchStore()
+
+useHead({
+  title: `${t("searchGuide.title", { openverse: "Openverse" })} | Openverse`,
+})
+
+const pathFromQuery = (queryString: string) => {
+  return searchStore.getSearchPath({
+    query: { q: queryString },
+  })
+}
+</script>
+
 <template>
   <VContentPage>
     <h1>{{ $t("searchGuide.title", { openverse: "Openverse" }) }}</h1>
@@ -42,31 +75,3 @@
     </i18n-t>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useNuxtApp } from "#imports"
-
-import { useSearchStore } from "~/stores/search"
-
-import VLink from "~/components/VLink.vue"
-import VContentPage from "~/components/VContentPage.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-const {
-  $i18n: { t },
-} = useNuxtApp()
-
-const searchStore = useSearchStore()
-
-useHead({
-  title: `${t("searchGuide.title", { openverse: "Openverse" })} | Openverse`,
-})
-
-const pathFromQuery = (queryString: string) => {
-  return searchStore.getSearchPath({
-    query: { q: queryString },
-  })
-}
-</script>
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 004971052d4..791c042cc8e 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -1,28 +1,3 @@
-<template>
-  <div
-    :id="skipToContentTargetId"
-    tabindex="-1"
-    class="browse-page flex w-full flex-col px-6 lg:px-10"
-  >
-    <VErrorSection
-      v-if="fetchingError"
-      :fetching-error="fetchingError"
-      class="w-full py-10"
-    />
-    <section v-else>
-      <NuxtPage
-        :page-key="$route.path"
-        :results="searchResults"
-        :is-fetching="isFetching"
-        :search-term="searchTerm"
-        :supported="supported"
-        :handle-load-more="handleLoadMore"
-        data-testid="search-results"
-      />
-    </section>
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   createError,
@@ -54,6 +29,10 @@ import { handledClientSide, isRetriable } from "~/utils/errors"
 
 import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
 
+defineOptions({
+  name: "SearchPage",
+})
+
 definePageMeta({
   layout: "search-layout",
   middleware: searchMiddleware,
@@ -176,3 +155,28 @@ await useAsyncData(
   }
 )
 </script>
+
+<template>
+  <div
+    :id="skipToContentTargetId"
+    tabindex="-1"
+    class="browse-page flex w-full flex-col px-6 lg:px-10"
+  >
+    <VErrorSection
+      v-if="fetchingError"
+      :fetching-error="fetchingError"
+      class="w-full py-10"
+    />
+    <section v-else>
+      <NuxtPage
+        :page-key="$route.path"
+        :results="searchResults"
+        :is-fetching="isFetching"
+        :search-term="searchTerm"
+        :supported="supported"
+        :handle-load-more="handleLoadMore"
+        data-testid="search-results"
+      />
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/pages/search/audio.vue b/frontend/src/pages/search/audio.vue
index dcb5e44b801..c3c3a8643fa 100644
--- a/frontend/src/pages/search/audio.vue
+++ b/frontend/src/pages/search/audio.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import type { AudioResults } from "~/types/result"
+
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
+
+defineOptions({
+  name: "AudioSearch",
+})
+
+defineProps<{
+  results: AudioResults
+  isFetching: boolean
+  searchTerm: string
+  handleLoadMore: () => void
+}>()
+</script>
+
 <template>
   <VSearchResults
     :results="results"
@@ -7,36 +24,3 @@
     @load-more="handleLoadMore"
   />
 </template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import type { AudioResults } from "~/types/result"
-
-import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
-
-export default defineComponent({
-  name: "AudioSearch",
-  components: {
-    VSearchResults,
-  },
-  props: {
-    results: {
-      type: Object as PropType<AudioResults>,
-      required: true,
-    },
-    isFetching: {
-      type: Boolean,
-      required: true,
-    },
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-    handleLoadMore: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/pages/search/image.vue b/frontend/src/pages/search/image.vue
index d6a63742966..146879c813b 100644
--- a/frontend/src/pages/search/image.vue
+++ b/frontend/src/pages/search/image.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import type { ImageResults } from "~/types/result"
+
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
+
+defineOptions({
+  name: "ImageSearch",
+})
+
+defineProps<{
+  results: ImageResults
+  isFetching: boolean
+  searchTerm: string
+  handleLoadMore: () => void
+}>()
+</script>
+
 <template>
   <VSearchResults
     :results="results"
@@ -7,34 +24,3 @@
     @load-more="handleLoadMore"
   />
 </template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import type { ImageResults } from "~/types/result"
-
-import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
-
-export default defineComponent({
-  name: "ImageSearch",
-  components: { VSearchResults },
-  props: {
-    results: {
-      type: Object as PropType<ImageResults>,
-      required: true,
-    },
-    isFetching: {
-      type: Boolean,
-      required: true,
-    },
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-    handleLoadMore: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/pages/search/index.vue b/frontend/src/pages/search/index.vue
index 46defa4de09..5fca55ef91b 100644
--- a/frontend/src/pages/search/index.vue
+++ b/frontend/src/pages/search/index.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import type { AllMediaResults } from "~/types/result"
+
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
+
+defineOptions({
+  name: "AllMediaSearch",
+})
+
+defineProps<{
+  results: AllMediaResults
+  isFetching: boolean
+  searchTerm: string
+  handleLoadMore: () => void
+}>()
+</script>
+
 <template>
   <VSearchResults
     :results="results"
@@ -7,34 +24,3 @@
     @load-more="handleLoadMore"
   />
 </template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { AllMediaResults } from "~/types/result"
-
-import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
-
-export default defineComponent({
-  name: "SearchIndex",
-  components: { VSearchResults },
-  props: {
-    results: {
-      type: Object as PropType<AllMediaResults>,
-      required: true,
-    },
-    isFetching: {
-      type: Boolean,
-      required: true,
-    },
-    searchTerm: {
-      type: String,
-      required: true,
-    },
-    handleLoadMore: {
-      type: Function as PropType<() => void>,
-      required: true,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/pages/sensitive-content.vue b/frontend/src/pages/sensitive-content.vue
index e6bf642e69b..9ea2040dad3 100644
--- a/frontend/src/pages/sensitive-content.vue
+++ b/frontend/src/pages/sensitive-content.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useI18n } from "#imports"
+
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+
+defineOptions({
+  name: "SensitiveContentPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const { t } = useI18n({ useScope: "global" })
+useHead({ title: `${t("sensitive.title")} | Openverse` })
+</script>
+
 <template>
   <VContentPage>
     <h1>
@@ -235,17 +253,3 @@
     </p>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useI18n } from "#imports"
-
-import VLink from "~/components/VLink.vue"
-import VContentPage from "~/components/VContentPage.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-
-const { t } = useI18n({ useScope: "global" })
-useHead({ title: `${t("sensitive.title")} | Openverse` })
-</script>
diff --git a/frontend/src/pages/sources.vue b/frontend/src/pages/sources.vue
index 03b26cb30cf..4f95a66458b 100644
--- a/frontend/src/pages/sources.vue
+++ b/frontend/src/pages/sources.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useNuxtApp } from "#imports"
+
+import { supportedMediaTypes } from "~/constants/media"
+
+import VButton from "~/components/VButton.vue"
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+import VSourcesTable from "~/components/VSourcesTable.vue"
+
+defineOptions({
+  name: "SourcesPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const {
+  $i18n: { t },
+} = useNuxtApp()
+
+useHead({ title: `${t("sources.title")} | Openverse` })
+</script>
+
 <template>
   <VContentPage>
     <h1>
@@ -90,24 +115,3 @@
     </template>
   </VContentPage>
 </template>
-
-<script setup lang="ts">
-import { definePageMeta, useHead, useNuxtApp } from "#imports"
-
-import { supportedMediaTypes } from "~/constants/media"
-
-import VButton from "~/components/VButton.vue"
-import VLink from "~/components/VLink.vue"
-import VContentPage from "~/components/VContentPage.vue"
-import VSourcesTable from "~/components/VSourcesTable.vue"
-
-definePageMeta({
-  layout: "content-layout",
-})
-
-const {
-  $i18n: { t },
-} = useNuxtApp()
-
-useHead({ title: `${t("sources.title")} | Openverse` })
-</script>
diff --git a/frontend/src/pages/tags.vue b/frontend/src/pages/tags.vue
index 387028321e6..25771b88622 100644
--- a/frontend/src/pages/tags.vue
+++ b/frontend/src/pages/tags.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { definePageMeta, useHead, useI18n } from "#imports"
+
+import VContentPage from "~/components/VContentPage.vue"
+
+defineOptions({
+  name: "TagsPage",
+})
+
+definePageMeta({
+  layout: "content-layout",
+})
+
+const { t } = useI18n({ useScope: "global" })
+
+useHead({ title: `${t("tags.title")} | Openverse` })
+</script>
+
 <template>
   <VContentPage>
     <h1>{{ $t("tags.title", { openverse: "Openverse" }) }}</h1>
@@ -18,24 +36,3 @@
     </p>
   </VContentPage>
 </template>
-
-<script lang="ts">
-import { useHead, useI18n } from "#imports"
-
-import { defineComponent } from "vue"
-
-import VContentPage from "~/components/VContentPage.vue"
-
-export default defineComponent({
-  name: "VTagsPage",
-  components: { VContentPage },
-  layout: "content-layout",
-  setup() {
-    const { t } = useI18n({ useScope: "global" })
-
-    useHead({ title: `${t("tags.title")} | Openverse` })
-
-    return {}
-  },
-})
-</script>
diff --git a/packages/js/eslint-plugin/src/configs/vue.ts b/packages/js/eslint-plugin/src/configs/vue.ts
index 503d03b7958..53a4a087fbb 100644
--- a/packages/js/eslint-plugin/src/configs/vue.ts
+++ b/packages/js/eslint-plugin/src/configs/vue.ts
@@ -19,6 +19,14 @@ export = {
         splitByDots: false,
       },
     ],
+    // Vue rules
+    "vue/block-order": [
+      "error",
+      {
+        order: ["script[setup]", "template", "script:not([setup])", "style"],
+      },
+    ],
+    "vue/padding-line-between-blocks": ["error", "always"],
     "vue/max-attributes-per-line": "off",
     "vue/require-prop-types": "off",
     "vue/require-default-prop": "off",