#nuxt ui use button as regular link

3 messages · Page 1 of 1 (latest)

hallow dirge
#

to and href both use NuxtLink!! what do i do?

wooden pythonBOT
#

Hi @hallow dirge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To use a Nuxt UI Button component as a regular link, you can utilize the to prop, which internally uses NuxtLink. However, if you specifically want to create a regular HTML link without using NuxtLink, you can use the href prop along with the external prop. Here's how you can do it:

  1. For internal routing using NuxtLink (default behavior):
<UButton to="/some-internal-route">Internal Link</UButton>
  1. For external links or to force a regular HTML link:
<UButton href="<https://example.com"> external>External Link</UButton>

By adding the external prop, you're telling the component to render as a regular <a> tag instead of using NuxtLink, even for internal URLs.

This approach is supported by the Nuxt UI Button component, which is built on top of the Link component. The Link component, in turn, is a wrapper around NuxtLink that provides additional functionality.

For more details on how this works, you can refer to the following documentation:

Nuxt UI Button Component
Nuxt UI Link Component

These sources explain how the Button and Link components handle routing and external links, giving you the flexibility to choose between NuxtLink behavior and regular HTML links.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: