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.
2 May 10, 2022
112 Dec 28, 2022
16 Dec 30, 2022
2 Oct 20, 2022
3 Jul 18, 2022
2 Feb 23, 2022
19 Nov 7, 2022
470 Jan 2, 2023
20 May 27, 2022
12 Oct 28, 2022
8 Dec 20, 2022
2 Feb 17, 2022
6 Apr 12, 2022
2 Aug 10, 2022
104 Dec 13, 2022
14 Sep 29, 2022
14 Dec 9, 2022
5 Nov 22, 2022
0 Dec 11, 2021