<SiteLink>

This has the exact same API as <NuxtLink> but will normalise the trailing slash based on your site config as well as providing extra link resolving features.

<template>
  <!-- Will be set to /about/ if trailingSlash is enabled -->
  <SiteLink to="/about">
    About
  </SiteLink>
</template>

Internally this uses the createSitePathResolver composable.

Props

withBase

• Type: boolean
• Default: false

When enabled, the app.baseURL will be added to the link.

absolute

• Type: Boolean
• Default: false

Will render the link as an absolute path.

canonical

• Type: Boolean
• Default: false

When absolute is enabled, you can configure whether the URL returned should be canonical or not.

The non-canonical URL will use the request origin instead of the configured site URL.

Component Options

If needed, you can modify the behaviour of how this component is registered through using Nuxt Config.

This can be useful for making the component global, allowing it to work in Nuxt Content, or setting a prefix to avoid collisions with other components.

export default defineNuxtConfig({
  site: {
    componentOptions: {
      prefix: 'I',
      global: true,
    },
  },
})

<template>
  <ISiteLink to="/foo">
    Foo
  </ISiteLink>
</template>