docs: explain how to set <NuxtLink> defaults in nuxt config (#25610)

This commit is contained in:
xjccc 2024-02-05 04:52:21 +08:00 committed by GitHub
parent 365eaba229
commit 541a802fef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -116,6 +116,34 @@ Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) i
## Overwriting Defaults
### In Nuxt Config
You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](https://nuxt.com/docs/api/nuxt-config#defaults)
::callout{color="amber" icon="i-ph-warning-duotone"}
These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
::
```ts [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
// default values
componentName: 'NuxtLink',
externalRelAttribute: 'noopener noreferrer',
activeClass: 'router-link-active',
exactActiveClass: 'router-link-exact-active',
prefetchedClass: undefined, // can be any valid string class name
trailingSlash: undefined // can be 'append' or 'remove'
}
}
}
})
```
### Custom Link Component
You can overwrite `<NuxtLink>` defaults by creating your own link component using `defineNuxtLink`.
```js [components/MyNuxtLink.ts]