Navigation in Nuxt 3: A Practical Guide to the NuxtLink Component

In modern web development, interface speed and responsiveness are critical. Users need to instantly switch between client cards, deals, and reports. The `NuxtLink` component in Nuxt 3 makes this effortless—it automatically handles client-side navigation, prefetches the necessary data, and still retains the benefits of universal rendering.

1. Replacing Standard Links

Instead of the standard tag  

<a href="/customers">Clients</a>

just use following  

<NuxtLink to="/customers">Clients</NuxtLink>

This will give us an instant transition, without a full page reload.

2. Example: Navigating to a customer profile

Imagine needing to click within the customer list to open the profile card for the customer with ID=42:  

<template v-for="client in clients" :key="client.id">
  <li>
    <NuxtLink :to="/customers/${client.id}">
      {{ client.name }}
    </NuxtLink>
  </li>
</template>

The user sees a list, clicks—and the profile data loads client-side without extra requests.

3. External links and security (integration with a third-party report)

If you need to send a manager to a Google Analytics report, use NuxtLink with the `external` attribute:  

<NuxtLink
  to="https://analytics.google.com/report"
  external
>
  Go to Analytics
</NuxtLink>

NuxtLink will automatically add rel="noopener noreferrer" to prevent security vulnerabilities.

4. Opening in a new tab (sales reports)

Often, it's convenient to view financial reports in a separate tab:  

<NuxtLink
  to="/reports/sales"
  target="_blank"
>
  Sales Report
</NuxtLink>

The browser will open a new tab, while we preserve the internal logic of the RouterLink.

5. Preloading Pages (for quick access to client profiles)

To have client card 42 start loading in advance, as soon as it enters the viewport:  

<NuxtLink
  :to="/customers/${client.id}"
  prefetch
>
  {{ client.name }}
</NuxtLink>

This option is enabled by default. However, if you want to disable preloading for a specific list:  

<NuxtLink :to="/customers/${client.id}" :prefetch="false">...</NuxtLink>
<NuxtLink :to="/customers/${client.id}" no-prefetch>...</NuxtLink>

For debugging, you can set the prefetching CSS class:  

<NuxtLink
  to="/customers/42"
  prefetched-class="is-prefetched"
>
  Client view
</NuxtLink>

Enable this in development only to monitor the process.

6. Custom link component for CRM

To avoid repeating the same settings throughout the project, you can create a `MyCrmLink` component:  

// ~/components/MyCrmLink.ts
export default defineNuxtLink({
  componentName: 'MyCrmLink',
  activeClass: 'crm-link--active',
  prefetchedClass: process.env.NODE_ENV === 'development'
    ? 'crm-link--prefetched'
    : undefined
});

Now you can use it in your code:  

<MyCrmLink to="/customers">Clients</MyCrmLink>

and automatically get consistent styling and the necessary classes.

Conclusion

NuxtLink is an indispensable tool for any Nuxt 3-based system. It smooths out navigation, speeds up access to key sections, and ensures security when interacting with external services. Use the built-in component or create your own using `defineNuxtLink` to make navigation within your CRM fast, user-friendly, and consistent.