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:

1. Home page /
2. 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.

MIT License