Address the change requests

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/LoadingIcon.vue

@@ -1,8 +1,4 @@
-<script lang="ts">
-export default {
-  name: "LoadingIcon",
-}
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="lds-ring" data-testid="lds-ring">

frontend/src/components/TableSortIcon.vue

@@ -1,15 +1,5 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "TableSortIcon",
-  props: {
-    active: {
-      type: Boolean,
-      required: true,
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{ active: boolean }>()
 </script>
 
 <template>

frontend/src/components/VBackToSearchResultsLink.vue

@@ -1,50 +1,32 @@
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+/**
+ * This link takes the user from a single result back to the list of all
+ * results. It only appears if the user navigated from the search results.
+ */
+import { useNuxtApp } from "#imports"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useSearchStore } from "~/stores/search"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
 
-/**
- * This link takes the user from a single result back to the list of all
- * results. It only appears if the user navigated from the search results.
- */
-export default defineComponent({
-  components: {
-    VIcon,
-    VButton,
-  },
-  props: {
-    /**
-     * The unique ID of the media
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-    href: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { sendCustomEvent } = useAnalytics()
-    const searchStore = useSearchStore()
+const props = defineProps<{
+  /**
+   * The unique ID of the media
+   */
+  id: string
+  href: string
+}>()
 
-    const handleClick = () => {
-      sendCustomEvent("BACK_TO_SEARCH", {
-        id: props.id,
-        searchType: searchStore.searchType,
-      })
-    }
+const { $sendCustomEvent } = useNuxtApp()
+const searchStore = useSearchStore()
 
-    return {
-      handleClick,
-    }
-  },
-})
+const handleClick = () => {
+  $sendCustomEvent("BACK_TO_SEARCH", {
+    id: props.id,
+    searchType: searchStore.searchType,
+  })
+}
 </script>
 
 <template>

frontend/src/components/VBrand/VBrand.vue

@@ -1,18 +1,9 @@
-<script lang="ts">
-import { defineComponent } from "vue"
-
-import VSvg from "~/components/VSvg/VSvg.vue"
-
+<script setup lang="ts">
 /**
  * A simple Openverse logo component, visually hidden from screen-reader users.
  * Implementations should wrap this icon with appropriate sr-only text or an aria-label.
  */
-export default defineComponent({
-  name: "VBrand",
-  components: {
-    VSvg,
-  },
-})
+import VSvg from "~/components/VSvg/VSvg.vue"
 </script>
 
 <template>