The Link component is a wrapper around <NuxtLink> using the custom prop. It provides a few extra props:
inactive-class prop to set a class when the link is inactive, active-class is used when active.
exact prop to style with active-class when the link is active and the route is exactly the same as the current route.
exact-query and exact-hash props to style with active-class when the link is active and the query or hash is exactly the same as the current query or hash.
use exact-query="partial" to style with active-class when the link is active and the query partially match the current query.
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router migration from Vue 2 guide.
The Link components renders an <a> tag when a to prop is provided, otherwise it renders a <button> tag. You can use the as prop to change fallback tag.
If you're using VSCode and wish to get autocompletion for the classes active-class and inactive-class, you can add the following settings to your .vscode/settings.json:
The element or component this component should render as when not a link.
type
'button'
"reset" | "submit" | "button"
The type of the button when not a link.
disabled
boolean
active
undefined
boolean
Force the link to be active independent of the current route.
exact
boolean
Will only be active if the current route is an exact match.
exactQuery
boolean | "partial"
Allows controlling how the current route query sets the link as active.
exactHash
boolean
Will only be active if the current route hash is an exact match.
inactiveClass
string
The class to apply when the link is inactive.
isAction
false
boolean
When true, uses special underlined styling.
raw
boolean
When true, only styles from class, activeClass, and inactiveClass will be applied.
to
string | kt | Tt
Route Location the link should navigate to when clicked on.
name?: Qt
params?: $
path?: undefined
A relative path to the current location. This property should be removed
query?: mn
hash?: string
replace?: boolean
Replace the entry in the history instead of pushing a new entry
force?: boolean
Triggers the navigation even if the location is the same as the current one.
Note this will also add a new entry to the history unless replace: true
is passed.
An alias for to. If used with to, href will be ignored
name?: Qt
params?: $
path?: undefined
A relative path to the current location. This property should be removed
query?: mn
hash?: string
replace?: boolean
Replace the entry in the history instead of pushing a new entry
force?: boolean
Triggers the navigation even if the location is the same as the current one.
Note this will also add a new entry to the history unless replace: true
is passed.
Matches a string with a regular expression, and returns an array containing the results of that search.
Matches a string or an object that supports being matched against, and returns an array
containing the results of that search, or null if no matches are found.
Replaces text in a string, using a regular expression or search string.
Passes a string and {@linkcode replaceValue} to the [Symbol.replace] method on {@linkcode searchValue}. This method is expected to implement its own replacement algorithm.
Replaces text in a string, using an object that supports replacement within a string.
Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale.
trim: () => string
Removes the leading and trailing white space and line terminator characters from a string.
length: number
Returns the length of a String object.
substr: (from: number, length?: number | undefined) => string
Gets a substring beginning at the specified location and having the specified length.
codePointAt: (pos: number) => number
Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point
value of the UTF-16 encoded code point starting at the string element at position pos in
the String resulting from converting this object to a String.
If there is no element at that position, the result is undefined.
If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
includes: (searchString: string, position?: number | undefined) => boolean
Returns true if searchString appears as a substring of the result of converting this
object to a String, at one or more positions that are
greater than or equal to position; otherwise, returns false.
endsWith: (searchString: string, endPosition?: number | undefined) => boolean
Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
endPosition – length(this). Otherwise returns false.
Returns the String value result of normalizing the string into the normalization form
named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms.
repeat: (count: number) => string
Returns a String value that is made from count copies appended together. If count is 0,
the empty string is returned.
startsWith: (searchString: string, position?: number | undefined) => boolean
Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
position. Otherwise returns false.
anchor: (name: string) => string
Returns an <a> HTML anchor element and sets the name attribute to the text value
big: () => string
Returns a <big> HTML element
blink: () => string
Returns a <blink> HTML element
bold: () => string
Returns a <b> HTML element
fixed: () => string
Returns a <tt> HTML element
fontcolor: (color: string) => string
Returns a <font> HTML element and sets the color attribute value
Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the start (left) of the current string.
Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the end (right) of the current string.
trimEnd: () => string
Removes the trailing white space and line terminator characters from a string.
trimStart: () => string
Removes the leading white space and line terminator characters from a string.
trimLeft: () => string
Removes the leading white space and line terminator characters from a string.
trimRight: () => string
Removes the trailing white space and line terminator characters from a string.
Matches a string with a regular expression, and returns an array containing the results of that search.
Matches a string or an object that supports being matched against, and returns an array
containing the results of that search, or null if no matches are found.
Replaces text in a string, using a regular expression or search string.
Passes a string and {@linkcode replaceValue} to the [Symbol.replace] method on {@linkcode searchValue}. This method is expected to implement its own replacement algorithm.
Replaces text in a string, using an object that supports replacement within a string.
Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale.
trim: () => string
Removes the leading and trailing white space and line terminator characters from a string.
length: number
Returns the length of a String object.
substr: (from: number, length?: number | undefined) => string
Gets a substring beginning at the specified location and having the specified length.
codePointAt: (pos: number) => number
Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point
value of the UTF-16 encoded code point starting at the string element at position pos in
the String resulting from converting this object to a String.
If there is no element at that position, the result is undefined.
If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
includes: (searchString: string, position?: number | undefined) => boolean
Returns true if searchString appears as a substring of the result of converting this
object to a String, at one or more positions that are
greater than or equal to position; otherwise, returns false.
endsWith: (searchString: string, endPosition?: number | undefined) => boolean
Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
endPosition – length(this). Otherwise returns false.
Returns the String value result of normalizing the string into the normalization form
named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms.
repeat: (count: number) => string
Returns a String value that is made from count copies appended together. If count is 0,
the empty string is returned.
startsWith: (searchString: string, position?: number | undefined) => boolean
Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
position. Otherwise returns false.
anchor: (name: string) => string
Returns an <a> HTML anchor element and sets the name attribute to the text value
big: () => string
Returns a <big> HTML element
blink: () => string
Returns a <blink> HTML element
bold: () => string
Returns a <b> HTML element
fixed: () => string
Returns a <tt> HTML element
fontcolor: (color: string) => string
Returns a <font> HTML element and sets the color attribute value
Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the start (left) of the current string.
Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the end (right) of the current string.
trimEnd: () => string
Removes the trailing white space and line terminator characters from a string.
trimStart: () => string
Removes the leading white space and line terminator characters from a string.
trimLeft: () => string
Removes the leading white space and line terminator characters from a string.
trimRight: () => string
Removes the trailing white space and line terminator characters from a string.