fix(BaseLink): render as a tag if to prop is used but goes to exter…

…nal url
patrickcate · Mar 18, 2022 · c540ca8 · c540ca8
1 parent aa68d9d
commit c540ca8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/BaseLink/BaseLink.test.js b/src/components/BaseLink/BaseLink.test.js
@@ -37,6 +37,20 @@ describe('BaseLink', () => {
     cy.get('a').should('have.attr', 'href').and('contain', '/test-page')
   })
 
+  it('renders a regular `a` tag if the `to` prop is an external URL', () => {
+    mount(BaseLink, {
+      props: {
+        to: 'https://google.com',
+      },
+      slots: {
+        default: () => 'Test Regular Link',
+      },
+    })
+
+    cy.get('a').should('contain', 'Test Regular Link')
+    cy.get('a').should('have.attr', 'href').and('contain', 'https://google.com')
+  })
+
   it('renders as a `nuxt-link` if $nuxt is detected', () => {
     mount(BaseLink, {
       props: {

diff --git a/src/components/BaseLink/BaseLink.vue b/src/components/BaseLink/BaseLink.vue
@@ -34,7 +34,7 @@ export default {
     }
   },
   computed: {
-    isExternalLink() {
+    isHrefLink() {
       return (
         !!this.href ||
         (typeof this.to === 'string' && this.to.startsWith('http'))
@@ -64,7 +64,7 @@ export default {
 </script>
 
 <template>
-  <a v-if="isExternalLink" v-bind="$attrs" :href="href"><slot></slot></a>
+  <a v-if="isHrefLink" v-bind="$attrs" :href="href || to"><slot></slot></a>
   <component :is="linkComponent" v-else v-bind="$attrs" :to="to"
     ><slot></slot
   ></component>