A convenient replacement for nuxt-link component when using nuxt-i18n
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.