Nuxt•2y ago

ULink not working on a badge

Trying to create a link on a badge and all I get is the anchor link being followed - so would like to open new tab with bbc displayed when click Link to bbc

<template #logo
      >Test
      <ULink to="https://bbc.co.uk/" target="_blank">
        <UBadge variant="subtle" class="mb-0.5">
          Link to bbc
          <UIcon
            name="i-heroicons-arrow-top-right-on-square-20-solid"
            class="ml-1 w-4 h-4 pointer-events-none"
          />
        </UBadge>
      </ULink>
    </template>

<template #logo
      >Test
      <ULink to="https://bbc.co.uk/" target="_blank">
        <UBadge variant="subtle" class="mb-0.5">
          Link to bbc
          <UIcon
            name="i-heroicons-arrow-top-right-on-square-20-solid"
            class="ml-1 w-4 h-4 pointer-events-none"
          />
        </UBadge>
      </ULink>
    </template>

pyplacca•4/21/24, 11:38 AM

Try making UBadge the parent of ULink instead

Dave HerringOP•4/21/24, 7:01 PM

Found issue - there is a to of / in the logo slot of UHeader component, you have to change the slot to be #left to change this

Dave HerringOP•4/21/24, 7:02 PM

Thank you for the suggestion - that did not work - it is the UHeader docs I needed to read... https://ui.nuxt.com/pro/components/header

Nuxt UI

Header - Nuxt UI Pro

A responsive and sticky component.

pyplacca•4/21/24, 7:02 PM

Alright