April 21, 2022·3 min read

How We Helped Bring You the New Nuxt 3 Link Component

Yesterday, we celebrated the launch of Nuxt 3’s first Release Candidate (RC), which brought us one step closer to a full release of our beloved Vue.js framework.

Composition API, auto imports, native TypeScript, and ESM support are all new features we’re excited for. However, there’s one more we’re particularly hyped about: the new <NuxtLink> component.

Why are we hyped about that new feature especially? Because I had the opportunity to closely contribute to it. So, let’s discover the backstory of the Nuxt 3 link component, walk through an overview of its new features, and discuss the future of Prismic's Nuxt integration.

The story of upgrading <NuxtLink>

It all started back in 2020. That year in December, I published “One Link Component To Rule Them All," an article explaining my frustration with the limitation of different frameworks’ link components (<RouterLink>, <NuxtLink>, etc.). This post especially highlighted their inability to link to external pages. It also walked through how to create a <SmartLink> component covering this additional use case.

“One Link Component To Rule Them All” resonated quite well within the Nuxt community. It was referred to when the time came to think about the future of the <NuxtLink> component for Nuxt 3. This interest in updating the framework’s link component inspired me to write its related Request For Comments (RFC) in November 2021. You can consult it over on GitHub.

Finally, in February 2022, with some minor changes, my RFC got approved, and I was given the opportunity to implement it. So, I went ahead and created a pull request with Prismic backing my open-source involvement. With great help from the Nuxt team, the pull request got merged and released as part of Nuxt 3’s Beta in March. I made it 🙌

Screenshot of a tweet from @Nuxt_js that reads: "NuxtLink is a out with new features (sparkle emoji): use it for any internal or external links; best practices included; extendable; amazing work done by @li_hbr (green heart emoji) [link content]" The tweet had 350 likes and 57 replies.

A quick walkthrough of Nuxt 3 new link component

Nuxt 3’s new link component certainly allows you to link between your application’s pages, but it also comes with exciting new features: external link support, target attributes for internal links, best practices by default, and more!

External links are now supported

With the new <NuxtLink>, we can now link to anything. We no longer have to choose between an anchor <a> tag or <NuxtLink> component depending on whether our link is external or not. We can just use <NuxtLink> everywhere.

<NuxtLink to="/docs">Documentation</NuxtLink>
<!-- Will render through Vue Router to:
<a href="/docs">...</a>
-->

<NuxtLink to="https://v3.prismic.nuxtjs.org">Prismic Nuxt 3 Module</NuxtLink>
<!-- Will render to:
<a href="https://v3.prismic.nuxtjs.org" rel="noopener noreferrer">...</a>
-->

Open internal links on a new page

This might sound really simple, but with the Nuxt 2 link component, it wasn’t possible to open an internal link in a new page. We’d have to fall back to using a native anchor <a> tag for that. That’s not the case anymore. With Nuxt 3, just add a simple target attribute on internal links, and they’ll open on a new page.

<NuxtLink to="/entry/add" target="_blank">Add new entry</NuxtLink>
<!-- Will render to:
<a href="/entry/add" target="_blank" rel="noopener noreferrer">...</a>
-->

Best practices by default

You may have noticed in the examples above that external links will, by default, render with a filled rel attribute. This default value was chosen to promote privacy as a default. It prevents other websites from accessing information about your website’s pages that link to them.

You can overwrite the rel attribute on a per-link basis.

<NuxtLink to="https://v3.prismic.nuxtjs.org" rel="noopener">Prismic Nuxt 3 Module</NuxtLink>
<!-- Will render to:
<a href="https://v3.prismic.nuxtjs.org" rel="noopener">...</a>
-->

Disable it.

<NuxtLink to="https://v3.prismic.nuxtjs.org" no-rel>Prismic Nuxt 3 Module</NuxtLink>
<!-- Will render to:
<a href="https://v3.prismic.nuxtjs.org">...</a>
-->

Or even create a <NuxtLink> with your preferred defaults.

// ~/components/MyNuxtLink.js
export default defineNuxtLink({
  componentName: "MyNuxtLink",
  externalRelAttribute: "", // render no `rel` attribute by default
});

Learn more about the rel attribute on MDN

Nuxt 3 for Prismic users

With all those exciting new features and a fancier <NuxtLink> component, what’s the impact for Prismic users?

First of all, in case you missed it, we released and have been working on our Nuxt 3 module. It uses the brand new development kits we launched earlier this year and embraces Vue 3’s new features through our Vue 3 plugin.

🔍 Learn more about our Nuxt 3 module.

Regarding <NuxtLink> more precisely, we use it under the hood in our <PrismicLink> component. You still need the <PrismicLink> component to take care of resolving Prismic-shaped links to actual links. Overall you shouldn’t need to use <NuxtLink> directly when working with Prismic; however, it makes for a nice escape hatch when you need static links in the websites and applications you make.

Onwards and upwards

Now that Nuxt 3 is in the RC stage, the Nuxt team will have more space to focus on framework stability while aiming for a full release. Meanwhile, feel free to try Nuxt 3 with our module at v3.prismic.nuxtjs.org (it’s also fine to try Nuxt 3 without our module 🤫).

Finally, if you’re interested in open-source and want to learn how to get into it and become a contributor, I’ll be giving a talk at Vue.js Amsterdam, in June, about just that. I’ll go through my journey with it and especially how the Nuxt module ecosystem helped me feel at ease writing code on various open-source projects.