With an internal nuxt-link, how to append the whole hostname URL rather than just the path?

Question

I've a simple problem: When my Nuxt site is deployed, all the NuxtLinks are converted to <a href=""> tags. But the URL in href is relative.

For example: (Refer Image - ss1.png) The URL is /calculators/sip.

What my requirement is, I need these URLs to be absolute, i.e., the URL should contains domain name also.

For example: The rendered URL should look like: <a href="https://example.com/calculators/sip/"> through out my site.

Bascially, all the URLs/NuxtLink should have domain name attached to it . As per my understanding of Nuxt Docs.

I need to add router.base: 'https://example.com/' in nuxt.config.js file. But that is create more problem.

Instead of generting <a href="https://example.com/calculators/sip/"> it is prepending / in the anchor tag like <a href="/https://example.com/calculators/sip/">.

PS: we are using Nuxt2.

Answer 1

Here is how you can achieve this

<nuxt-link v-slot="{ route, navigate }" to="/calculators" custom>
  <a :href="'https://nuxt2-nuxtlink-repro.netlify.app' + '/calculators'" @click="navigate">
    Go to {{ route.fullPath }}
  </a>
  <a @click="navigate">Go to {{ route.fullPath }} (different way)</a>
</nuxt-link>

Where rather than having just the path aka <a href="/calculators"></a>, you have a whole
<a href="https://nuxt2-nuxtlink-repro.netlify.app/calculators"></a>

Here is a working repro hosted on Netlify.
And here is the official resource regarding the vue-router part.