N
Nuxt•4w ago
Lynx

Cant assign `href` to `UButton` or `ULink`

Couldnt assign href attribute to UButton component, then i checked it out which is uses ULink underline. I tried on it as well but it doesnt render it as well (want to disable spa navigation to spesific pages) 
          <u-button
            href="/login"
            icon="i-heroicons:arrow-left-on-rectangle-solid"
          >
            Login
          </u-button>

<!--  -->

          <u-link
            as="a"
            target="_self"
            :type="''"
            :href="{
              path: 'login',
            }"
            data-test="hoho"
          >
            Login
          </u-link>
          <u-button
            href="/login"
            icon="i-heroicons:arrow-left-on-rectangle-solid"
          >
            Login
          </u-button>

<!--  -->

          <u-link
            as="a"
            target="_self"
            :type="''"
            :href="{
              path: 'login',
            }"
            data-test="hoho"
          >
            Login
          </u-link>
Can't really understand whats wrong with the component: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Link.vue Does anyone have a clue? https://github.com/nuxt/ui/blob/dev/src/runtime/utils/link.ts everything looks ok with props though...
No description
3 Replies
kapa.ai
kapa.ai•4w ago
Hi @Lynx. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can help explain the issue you're encountering with UButton and ULink components in Nuxt UI. The UButton and ULink components are designed to work with Vue Router and Nuxt's routing system. They don't directly support the href attribute in the way you're trying to use it. For UButton, you should use the to prop instead of href. The to prop is used for internal routing. Here's how you can modify your code: 
<UButton
  to="/login"
  icon="i-heroicons:arrow-left-on-rectangle-solid"
>
  Login
</UButton>
<UButton
  to="/login"
  icon="i-heroicons:arrow-left-on-rectangle-solid"
>
  Login
</UButton>
For ULink, you're close, but there are a few adjustments needed: 1. The href prop should be a string, not an object. 2. If you want to disable SPA navigation for specific pages, you can use the external prop. Here's the corrected version: 
<ULink
  to="/login"
  external
  target="_self"
  data-test="hoho"
>
  Login
</ULink>
<ULink
  to="/login"
  external
  target="_self"
  data-test="hoho"
>
  Login
</ULink>
The external prop forces the link to be rendered as an <a> tag instead of a Vue Router RouterLink, which should disable SPA navigation for this specific link Nuxt Docs - NuxtLink Props. If you specifically need to use the href attribute and want full control over how the link is rendered and how navigation works, you can use the custom prop along with scoped slots. Here's an example: 
<ULink v-slot="{ navigate, href }" custom to="/login">
  <a :href="href" @click="navigate">Login</a>
</ULink>
<ULink v-slot="{ navigate, href }" custom to="/login">
  <a :href="href" @click="navigate">Login</a>
</ULink>
This approach gives you more flexibility in handling the link behavior Stack Overflow - Vue Router with custom attribute. Remember that ULink is a wrapper around NuxtLink, which in turn is based on Vue Router's RouterLink. It's designed to work seamlessly with Nuxt's routing system, so using the to prop is generally the recommended approach for internal links. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@256524650622746624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lynx
LynxOP•4w ago
external really does the job. but docs reflects like href should work

Did you find this page helpful?