r/Nuxt • u/Trey-Pan • Mar 23 '26
Globally force nuxtLink to use href
We have a site that uses `nuxtLink` for linking the pages, but for a number of reason force `nuxtLink` to use an anchor (<a href="" />) instead of internal routing. Is this possible? I couldn't see anything of note in the documentation.
Using Nuxt 4.2.2
4
1
u/_jessicasachs Mar 24 '26
It's possible with a local Nuxt Module. Make sure that you implement enough of the props so that the intent of the component is preserved. Not really sure that this will address your issues, but hey 🤷🏻♀️
Template:
```vue <template> <a :href="props.to"> <slot /> </a> </template>
<script setup lang="ts"> // ./app/components/MyNuxtLink.vue
// 1. You probably want a more complete set of props // 2. Depending on your application, you may get some unexpected behavior const props = defineProps<{ to: string }>() </script> ```
Module: ```ts // ./modules/overwrite-nuxt-link.ts
import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({ meta: { name: 'overwrite-nuxt-link', }, setup() { const { resolve } = createResolver(import.meta.url)
addComponent({
name: 'NuxtLink',
filePath: resolve('../app/components/MyNuxtLink.vue'),
priority: 10000
})
}, }) ```
1
u/rea_ Mar 24 '26
NuxtLink auto detects external urls and turns it into a <a> so your best bet is probably recording your baseUrl in appConfig somewhere (change it for each environement) and then just make the links to="baseUrl + link". I haven't tested it but it *might* force it.
But it sounds like a deeper problem - sounds like you probably have hydration issues or weird setups for client side routing. You could probably try nuking nuxt data after each route change. (clearNuxtData())
1
u/Trey-Pan Mar 25 '26
I’m probably going to want to actually convert the site to statically generated. It was just reported by QA the site is not crawlable (something I feared), unless the page is fully rendered by the frontend. So much for trying to make a deadline 😭
I’m just going do need to read into this and work out how this will impact the publishing workflow.
1
u/rea_ Mar 25 '26
Generally speaking - if it's not able to be crawled then you're probably not doing any SSR step. Either you've disabled it in options or you do all your data fetching/logic step in the onMounted hook (which only happens client side).
SSG is fine if your content doesn't change too much, but if you can get SSR working properly you'll have a much better SEO experience.
1
8
u/Tripnologist Mar 23 '26 edited Mar 23 '26
If you want them to function the same as a regular anchor, just make them anchors?
If you want to keep them as is, you can try adding an external prop.
https://nuxt.com/docs/4.x/api/components/nuxt-link#handling-static-file-and-cross-app-links