Search code examples
nuxt.jsnuxt-middleware

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

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.

enter image description here

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.

Solution

  • 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.