Make VLink component that wraps around both external and internal links

src/components/AudioDetails/VAudioDetails.vue

@@ -22,7 +22,9 @@
           <div v-if="audio.audio_set">
             <dt>{{ $t('audio-details.table.album') }}</dt>
             <dd>
-              <a :href="audio.audio_set.url">{{ audio.audio_set.name }}</a>
+              <VLink :href="audio.audio_set.url">{{
+                audio.audio_set.name
+              }}</VLink>
             </dd>
           </div>
           <div v-if="audio.category">
@@ -52,13 +54,9 @@
               {{ $t('audio-details.table.provider') }}
             </dt>
             <dd>
-              <a
-                :href="audio.foreign_landing_url"
-                target="blank"
-                rel="noopener noreferrer"
-              >
+              <VLink :href="audio.foreign_landing_url">
                 {{ providerName }}
-              </a>
+              </VLink>
             </dd>
           </div>
           <div v-if="audio.source && sourceName !== providerName">
@@ -87,9 +85,12 @@
 import getProviderName from '~/utils/get-provider-name'
 import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
+import VLink from '~/components/VLink.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 
 export default {
   name: 'VAudioDetails',
+  components: { VLink, VAudioThumbnail },
   props: ['audio'],
   computed: {
     ...mapState(PROVIDER, ['audioProviders']),

src/components/AudioDetails/VRelatedAudio.vue

@@ -24,10 +24,13 @@ import { computed, ref } from '@nuxtjs/composition-api'
 import { AUDIO } from '~/constants/media'
 
 import useRelated from '~/composables/use-related'
-import { isMinScreen } from '@/composables/use-media-query'
+import { isMinScreen } from '~/composables/use-media-query'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
+import LoadingIcon from '~/components/LoadingIcon.vue'
 
 export default {
   name: 'VRelatedAudio',
+  components: { VAudioTrack, LoadingIcon },
   props: {
     audioId: {
       type: String,

src/components/ExtensionBrowsers.vue

@@ -1,15 +1,13 @@
 <template>
   <ul class="buttons is-centered">
     <li v-for="(browser, key) in browsers" :key="key">
-      <a
-        target="_blank"
-        rel="nofollow noreferrer"
+      <VLink
         :href="browser.extUrl"
         class="browser-button button small me-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
         <img class="ms-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
-      </a>
+      </VLink>
     </li>
   </ul>
 </template>

src/components/FooterSection.vue

@@ -8,20 +8,17 @@
           class="column"
         >
           <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-          <NuxtLink class="logo" to="/">Openverse</NuxtLink>
+          <VLink class="logo" href="/">Openverse</VLink>
           <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
           <LocaleSelector />
         </section>
         <div class="column is-half">
           <div class="attribution mt-8">
             <i18n path="footer.caption.label" tag="p" class="caption">
               <template #noted>
-                <a
-                  href="https://creativecommons.org/policies#license"
-                  target="_blank"
-                  rel="noopener"
-                  >{{ $t('footer.caption.noted') }}</a
-                >
+                <VLink href="https://creativecommons.org/policies#license">{{
+                  $t('footer.caption.noted')
+                }}</VLink>
               </template>
               <template #attribution>
                 <a

src/components/ImageDetails/ReuseSurvey.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="reuse-survey caption mt-1">
     {{ $t('photo-details.survey.content') }}
-    <a
+    <VLink
       :href="formLink"
-      target="_blank"
-      rel="noopener"
       @click="onReuseSurveyClick"
       @keyup.enter="onReuseSurveyClick"
     >
       {{ $t('photo-details.survey.link') }}
-    </a>
+    </VLink>
     {{ $t('photo-details.survey.answer') }}
   </div>
 </template>
@@ -20,13 +18,15 @@ import {
   DETAIL_PAGE_EVENTS,
 } from '~/constants/usage-data-analytics-types'
 import { USAGE_DATA } from '~/constants/store-modules'
+import VLink from '~/components/VLink.vue'
 
 const reuseForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSegPUDIUj_odzclJhhWRfPumSfbHtXDVDCHqRfFl7ZS8cMn2g/viewform'
 const imageLinkEntry = '2039681354'
 
 export default {
   name: 'ReuseSurvey',
+  components: { VLink },
   props: ['image'],
   data: () => ({
     location: '',

src/components/ImageGrid/ImageCell.vue

@@ -7,8 +7,8 @@
   >
     <figure class="search-grid_item">
       <i :style="`padding-bottom:${iPadding}%`" />
-      <NuxtLink
-        :to="localePath('/image/' + image.id)"
+      <VLink
+        :href="'/image/' + image.id"
         class="search-grid_image-ctr"
         :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
         @click="onGotoDetailPage($event, image)"
@@ -25,7 +25,7 @@
           @load="getImgDimension"
           @error="onImageLoadError($event, image)"
         />
-      </NuxtLink>
+      </VLink>
       <figcaption class="overlay overlay__top p-2">
         <VLicense
           :license="image.license"

src/components/MediaTag/meta/MediaTag.stories.mdx

@@ -29,7 +29,7 @@ By default, the component is a transparent wrapper over `<span>`.
 </Canvas>
 
 The root node of the tag can be overridden to a different HTML tag or a Vue
-component, e.g. `a` or `NuxtLink`. Any additional classes, such as for hover and
+component, e.g. `VLink`. Any additional classes, such as for hover and
 focus states on interactive elements, can be applied to add to the base styles.
 
 <Canvas>

src/components/MigrationNotice.vue

@@ -3,11 +3,10 @@
     {{ $t('migration-notice.intro') }}
     <i18n tag="span" path="migration-notice.more">
       <template #read-more>
-        <a
+        <VLink
           class="text-dark-blue hover:text-dark-blue underline"
           href="https://wordpress.org/news/2021/05/welcome-to-openverse/"
-          target="_blank"
-          >{{ $t('migration-notice.read') }}</a
+          >{{ $t('migration-notice.read') }}</VLink
         >
       </template>
     </i18n>
@@ -16,9 +15,10 @@
 
 <script>
 import NoticeBar from '~/components/NoticeBar/NoticeBar.vue'
+import VLink from '~/components/VLink.vue'
 
 export default {
   name: 'MigrationNotice',
-  components: { NoticeBar },
+  components: { NoticeBar, VLink },
 }
 </script>

src/components/VAllResultsGrid/VImageCell.vue

@@ -1,10 +1,9 @@
 <template>
-  <NuxtLink
+  <VLink
     itemprop="contentUrl"
     :title="image.title"
-    :to="localePath('/image/' + image.id)"
+    :href="'/image/' + image.id"
     class="group block focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black rounded-sm"
-    @click="onGotoDetailPage($event, image)"
   >
     <figure
       itemprop="image"
@@ -34,7 +33,7 @@
         />
       </figcaption>
     </figure>
-  </NuxtLink>
+  </VLink>
 </template>
 
 <script>

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -41,12 +41,12 @@
             class="font-semibold leading-snug"
           >
             <template #creator>
-              <a
+              <VLink
                 class="p-px rounded-sm focus:outline-none focus:ring focus:ring-pink"
                 :href="audio.creator_url"
               >
                 {{ audio.creator }}
-              </a>
+              </VLink>
             </template>
           </i18n>
 
@@ -71,11 +71,13 @@
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import DownloadButton from '~/components/DownloadButton.vue'
+import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'VFullLayout',
   components: {
     DownloadButton,
+    VLink,
   },
   props: ['audio', 'size', 'status', 'currentTime'],
   setup(props) {

src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -21,14 +21,14 @@
       }"
     >
       <div class="flex-shrink-0" :class="{ 'w-70': isMedium }">
-        <NuxtLink
-          :to="localePath(`/audio/${audio.id}`)"
+        <VLink
+          :href="`/audio/${audio.id}`"
           class="block font-heading font-semibold line-clamp-2 md:line-clamp-1 text-dark-charcoal hover:text-dark-charcoal p-px rounded-sm focus:outline-none focus:ring focus:ring-pink"
           :class="{
             'text-2xl': isMedium || isLarge,
             'leading-snug': isSmall,
           }"
-          >{{ audio.title }}</NuxtLink
+          >{{ audio.title }}</VLink
         >
 
         <div

src/components/VBackToSearchResultsLink.vue

@@ -1,13 +1,13 @@
 <template>
-  <!-- @todo: Seperate the absolute container from the link itself. -->
-  <NuxtLink
+  <!-- @todo: Separate the absolute container from the link itself. -->
+  <VLink
     v-if="show"
     class="px-2 pt-1 md:px-6 md:pt-4 md:pb-2 flex flex-row items-center font-semibold text-dark-charcoal text-xs md:text-sr"
-    :to="path"
+    :href="path"
   >
     <Chevron class="-ms-2" />
     {{ $t('single-result.back') }}
-  </NuxtLink>
+  </VLink>
 </template>
 
 <script>

src/components/VButton.vue

@@ -30,7 +30,7 @@ import {
   toRefs,
   computed,
 } from '@nuxtjs/composition-api'
-import { warn } from '~/utils/warn'
+import VLink from '~/components/VLink.vue'
 
 /**
  * A button component that behaves just like a regular HTML `button` element
@@ -46,26 +46,27 @@ import { warn } from '~/utils/warn'
  */
 const VButton = defineComponent({
   name: 'VButton',
+  components: { VLink },
   props: {
     /**
      * Passed to `component :is` to allow the button to *appear* as a button but
      * work like another element (like an `anchor`). May only be either `button` or `a`.
      *
-     * We do not support other elements because their use cases are marginal and they
+     * We do not support other elements because their use cases are marginal, and they
      * add complexity that we can avoid otherwise.
      *
-     * We also don't allow any old Vue component because Vue does not have ref-forwarding
+     * We also don't allow any old Vue component because Vue does not have ref-forwarding,
      * so we wouldn't be able to detect the type of the DOM node that is ultimately rendered
      * by any Vue component passed.
      *
      * @default 'button'
      */
     as: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'a' | 'button'>} */ (
+      type: /** @type {import('@nuxtjs/composition-api').PropType<'VLink' | 'button'>} */ (
         String
       ),
       default: 'button',
-      validate: (v) => ['a', 'button', 'NuxtLink'].includes(v),
+      validate: (v) => ['VLink', 'button'].includes(v),
     },
     /**
      * The variant of the button.
@@ -186,24 +187,9 @@ const VButton = defineComponent({
     watch(
       propsRef.as,
       (as) => {
-        if (['a', 'NuxtLink'].includes(as)) {
+        if (['VLink'].includes(as)) {
           typeRef.value = undefined
           supportsDisabledAttributeRef.value = false
-          if (as === 'a') {
-            // No need to declare `href` as an explicit prop as Vue preserves
-            // the `attrs` object reference between renders and updates the properties
-            // meaning we'll always have the latest values for the properties on the
-            // attrs object
-            if (!attrs.href || attrs.href === '#') {
-              warn(
-                'Do not use anchor elements without a valid `href` attribute. Use a `button` instead.'
-              )
-            }
-          } else {
-            if (!attrs.to) {
-              warn('NuxtLink needs a `to` attribute')
-            }
-          }
         }
       },
       { immediate: true }

src/components/VContentLink/VContentLink.vue

@@ -1,6 +1,6 @@
 <template>
-  <NuxtLink
-    :to="to"
+  <VLink
+    :href="to"
     class="text-dark-charcoal bg-white border border-dark-charcoal/20 rounded-sm flex flex-col md:flex-row md:justify-between items-start md:items-center hover:bg-dark-charcoal hover:text-white hover:no-underline focus:border-tx overflow-hidden py-4 ps-4 pe-12 w-full md:p-6"
   >
     <div class="flex flex-col items-start md:flex-row md:items-center">
@@ -13,7 +13,7 @@
       </p>
     </div>
     <span class="text-sr">{{ resultsCountLabel }}</span>
-  </NuxtLink>
+  </VLink>
 </template>
 
 <script>

src/components/VContentReport/VContentReportForm.vue

@@ -10,13 +10,9 @@
         tag="p"
       >
         <template #source>
-          <a
-            :href="media.url"
-            class="text-pink hover:underline"
-            target="_blank"
-            rel="noopener"
-            >{{ providerName }}</a
-          >
+          <VLink :href="media.url" class="text-pink hover:underline">{{
+            providerName
+          }}</VLink>
         </template>
       </i18n>
     </div>
@@ -114,6 +110,7 @@ import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
 import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
+import VLink from '~/components/VLink.vue'
 
 import ReportService from '~/data/report-service'
 
@@ -126,6 +123,7 @@ export default defineComponent({
   components: {
     VButton,
     VIcon,
+    VLink,
     VRadio,
     VDmcaNotice,
     VReportDescForm,