nuxt-i18n-link
A convenient replacement for <nuxt-link> component when using nuxt-i18n. It is simply a replacement for this exact code:
<nuxt-link :to=”localePath(“/page”)”>
Link
</nuxt-link>
into
<nuxt-i18n-link to=”/page”>
Link
</nuxt-i18n-link>
This prevents the mistake of omitting localePath() that would often fall under the radar. More details
Usage
Install with
npm i nuxt-i18n-link
Note: Add –save if npm < 5.0.0
Then nuxt.config.js
{
modules: [
‘nuxt-i18n-link’
]
}
Finally, use like
<nuxt-i18n-link to=”/page” lang=”en”>
Link
</nuxt-i18n-link>
// or
<nuxt-i18n-link to=”{ path: ‘/page’, hash: ‘#conclusion’}” lang=”en”>
Link
</nuxt-i18n-link>
For more details, see router-link.
Props
Name
Type
Default
Required
Description
to
string | object
–
[x]
Destination Route (see router-link)
lang
string
undefined
[ ]
Two-letter ISO language code
Motivation
The use of localePath() in <nuxt-link> is necessary for Nuxt.js projects that use nuxt-i18n.
To demonstrate, say a project has two routes:
Home page /
About page /about
Using nuxt-i18n, these routes will become
English
French
/
/en/
/fr/
/about
/en/about
/fr/about
However, <nuxt-link to=”/about”> will not route to /en/about nor /fr/about but to /about which does not exist anymore. The documented solution to this is to use localePath() as <nuxt-link :to=”localePath(‘/about’)”>, which will route to /en/about or /fr/about according to the current language.
The documented solution is easily forgotten, and <nuxt-link to=”about”> will not produce any errors when a default language is defined. Moreover, the error is not immediately obvious unless the non-default languages are being tested.
Hence, <nuxt-i18n-link> was made.