### Install Nuxt i18n Module
Source: https://i18n.nuxtjs.org/docs/getting-started
Install the Nuxt i18n module as a dev dependency using npx. This is the first step to integrate internationalization into your Nuxt project.
```bash
npx nuxi@latest module add @nuxtjs/i18n
```
--------------------------------
### Dynamic Locale Loading Example
Source: https://i18n.nuxtjs.org/docs/composables/define-i18n-locale
An example of a loader function using fetch to dynamically load locale messages from an API. This function is passed to defineI18nLocale.
```javascript
export default defineI18nLocale(locale => {
return $fetch(`https://your-company-product/api/${locale}`)
})
```
--------------------------------
### Integrate useLocaleHead in App Setup
Source: https://i18n.nuxtjs.org/docs/guide/seo
Call `useLocaleHead()` in your `setup` function within `app.vue`, pages, or layouts to generate SEO metadata. This metadata is then integrated with Nuxt's Head management.
```vue
{{ title }}
```
--------------------------------
### Generated Routes with Locale Prefixes
Source: https://i18n.nuxtjs.org/docs/guide
Example of generated routes with locale prefixes based on directory structure. Routes for the default language do not have prefixes.
```json
[
{
"path": "/",
"name": "index___en",
},
{
"path": "/fr",
"name": "index___fr",
},
{
"path": "/about",
"name": "about___en",
},
{
"path": "/fr/about",
"name": "about___fr",
},
{
"path": "/posts/:id",
"name": "posts-id___en",
},
{
"path": "/fr/posts/:id",
"name": "posts-id___fr",
}
]
```
--------------------------------
### Locale Detector Function Example
Source: https://i18n.nuxtjs.org/docs/composables/define-i18n-locale-detector
An example of a locale detector function that prioritizes detection from query parameters, then cookies, then headers, and finally falls back to the default locale.
```typescript
export default defineI18nLocaleDetector((event, config) => {
const query = tryQueryLocale(event, { lang: '' })
if (query) {
return query.toString()
}
const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_locale' })
if (cookie) {
return cookie.toString()
}
const header = tryHeaderLocale(event, { lang: '' })
if (header) {
return header.toString()
}
return config.defaultLocale
})
```
--------------------------------
### Define Simple vue-i18n Configuration
Source: https://i18n.nuxtjs.org/docs/composables/define-i18n-config
An example demonstrating how to use defineI18nConfig to return a basic vue-i18n options object with legacy disabled, a default locale, and simple English and French messages.
```javascript
export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
}
}
}))
```
--------------------------------
### Using useRouteBaseName in a Vue Component
Source: https://i18n.nuxtjs.org/docs/composables/use-route-base-name
Demonstrates how to use the useRouteBaseName composable within a Vue.js setup script to get the base name of the current route and display it in the template.
```vue
route base name: {{ baseRouteName }}
```
--------------------------------
### English Translations for Module
Source: https://i18n.nuxtjs.org/docs/guide/extend-messages
Example of English JSON translations for a module. These messages can be accessed using the `$t` function in the project.
```json
{
"my-module-example": {
"hello": "Hello from external module"
}
}
```
--------------------------------
### Vue I18n Configuration with Plain Object
Source: https://i18n.nuxtjs.org/docs/api/options
Example of exporting a plain object for Vue I18n configuration. This object includes locale settings and messages.
```javascript
export default {
legacy: false,
locale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
}
}
}
```
--------------------------------
### Using useLocalePath in a Vue Component
Source: https://i18n.nuxtjs.org/docs/composables/use-locale-path
Demonstrates how to use the useLocalePath composable within a Vue component's setup script to generate locale-specific links for navigation.
```vue
{{ $t('home') }}
```
--------------------------------
### Vue I18n Configuration with Function
Source: https://i18n.nuxtjs.org/docs/api/options
Example of exporting a function for Vue I18n configuration using `defineI18nConfig`. This allows for dynamic configuration and importing locale messages.
```javascript
import en from '../locales/en.json'
import fr from '../locales/fr.yaml'
// You can use `defineI18nConfig` to get type inferences for options to pass to vue-i18n.
export default defineI18nConfig(() => {
return {
legacy: false,
locale: 'en',
messages: {
en,
fr
}
}
})
```
--------------------------------
### French Translations for Module
Source: https://i18n.nuxtjs.org/docs/guide/extend-messages
Example of French JSON translations for a module. These messages can be accessed using the `$t` function in the project.
```json
{
"my-module-example": {
"hello": "Bonjour depuis le module externe"
}
}
```
--------------------------------
### Configure i18n Module with Different Domains
Source: https://i18n.nuxtjs.org/docs/guide/different-domains
Configure the i18n module to use different domains for locales, either based on the environment or by directly specifying domain configurations. This example shows build-time environment variable usage.
```typescript
import { localeDomains } from './locale-domains.config'
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
differentDomains: process.env.NODE_ENV === 'production',
locales: [
{
code: 'uk',
domain: localeDomains.uk
},
{
code: 'fr',
domain: localeDomains.fr
}
]
}
})
```
--------------------------------
### Using useTranslation in Nuxt Event Handler
Source: https://i18n.nuxtjs.org/docs/composables/use-translation
Example of how to use the useTranslation composable within a Nuxt defineEventHandler to get a translation function and use it to translate a string.
```javascript
export default defineEventHandler(async event => {
const t = await useTranslation(event)
return {
hello: t('hello')
}
})
```
--------------------------------
### Configure Lazy Loading for Spanish Variants
Source: https://i18n.nuxtjs.org/docs/guide/lazy-load-translations
Define locale configurations using the `files` property to specify the order of lazy loading and merging for translation files. This example shows how to load common Spanish messages (`es.json`) before country-specific messages (`es-AR.json`, `es-UY.json`, `es-US.json`).
```typescript
export default defineNuxtConfig({
i18n: {
locales: [
/**
* Example definition with `files` for Spanish speaking countries
*/
{
code: 'es-AR',
name: 'Español (Argentina)',
// lazy loading order: `es.json` -> `es-AR.json`, and then merge 'es-AR.json' with 'es.json'
files: ['es.json', 'es-AR.json']
},
{
code: 'es-UY',
name: 'Español (Uruguay)',
// lazy loading order: `es.json` -> `es-UY.json`, and then merge 'es-UY.json' with 'es.json'
files: ['es.json', 'es-UY.json']
},
{
code: 'es-US',
name: 'Español (Estados Unidos)',
// lazy loading order: `es.json` -> `es-US.json`, and then merge 'es-US.json' with 'es.json'
files: ['es.json', 'es-US.json']
}
],
defaultLocale: 'en'
}
})
```
--------------------------------
### $routeBaseName()
Source: https://i18n.nuxtjs.org/docs/api/nuxt
A Nuxt runtime app context API to get the base name of the current route.
```APIDOC
## $routeBaseName()
### Description
Gets the base name of the current route within the Nuxt application context.
### Usage
This method is available on the Nuxt app context.
```
--------------------------------
### Configure Nuxt i18n with Multiple Domains and Default Domains
Source: https://i18n.nuxtjs.org/docs/guide/multi-domain-locales
Configure Nuxt i18n to use a list of domains, specifying which ones serve as the default for particular languages. This setup is beneficial when multiple domains should resolve to the same language.
```javascript
const i18nDomains = ['mydomain.com', 'en.mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']
export default defineNuxtConfig({
// ...
i18n: {
locales: [
{
code: 'en',
domains: i18nDomains,
defaultForDomains: ['mydomain.com', 'en.mydomain.com']
},
{
code: 'es',
domains: i18nDomains,
defaultForDomains: ['es.mydomain.com']
},
{
code: 'fr',
domains: i18nDomains,
defaultForDomains: ['fr.mydomain.com']
},
{
code: 'pl',
domains: i18nDomains,
defaultForDomains: ['http://pl.mydomain.com']
},
{
code: 'ua',
domains: i18nDomains,
defaultForDomains: ['https://ua.mydomain.com']
},
{
code: 'nl',
domains: i18nDomains
},
{
code: 'de',
domains: i18nDomains
},
],
strategy: 'prefix',
multiDomainLocales: true
},
// ...
})
```
--------------------------------
### Merged Locale Messages Example
Source: https://i18n.nuxtjs.org/docs/guide/layers
Illustrates the result of merging locale messages from a project and an extended layer. Earlier layers take priority, meaning their messages override those from later layers if keys conflict.
```json
{
"title": "foo"
}
```
```json
{
"title": "layer title",
"description": "bar"
}
```
```json
{
// earlier layers take priority
"title": "foo",
"description": "bar"
}
```
--------------------------------
### Extend Nuxt Runtime App Context with $i18n
Source: https://i18n.nuxtjs.org/docs/api/nuxt
Access and utilize the Vue I18n instance ($i18n) within your Nuxt application's runtime context. This example shows how to hook into the language switching process.
```javascript
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.$i18n.onBeforeLanguageSwitch = (oldLocale, newLocale, isInitialSetup, nuxtApp) => {
console.log('onBeforeLanguageSwitch', oldLocale, newLocale, isInitialSetup)
}
})
```
--------------------------------
### Using useLocaleRoute in a Vue Component
Source: https://i18n.nuxtjs.org/docs/composables/use-locale-route
Demonstrates how to use the useLocaleRoute composable within a Vue component's script setup to generate a locale-aware link path. It fetches the current locale and resolves the route for a given route name.
```vue
{{ $t('blog') }}
```
--------------------------------
### Basic Usage of NuxtLinkLocale
Source: https://i18n.nuxtjs.org/docs/components/nuxt-link-locale
Demonstrates how to use the component with route names and route objects. It shows the equivalent standard usage with useLocalePath.
```vue
{{ $t('home') }}{{ $t('home') }}{{ $t('home') }}{{ $t('home') }}
```
--------------------------------
### Using useLocaleHead for Localized Head Properties
Source: https://i18n.nuxtjs.org/docs/composables/use-locale-head
Demonstrates how to use the useLocaleHead composable to fetch localized head properties and apply them using useHead. It configures SEO canonical queries and sets the HTML lang attribute.
```javascript
```
--------------------------------
### Handling Catch-All Route Parameters
Source: https://i18n.nuxtjs.org/docs/guide/custom-paths
For catch-all routes like `[...pathMatch].vue`, use 'pathMatch' as the key in `useSetI18nParams`. Catch-all parameters are defined as an array, allowing for sub-paths.
```javascript
```
--------------------------------
### $localeHead()
Source: https://i18n.nuxtjs.org/docs/api/nuxt
A Nuxt runtime app context API to generate locale-specific head tags for SEO.
```APIDOC
## $localeHead()
### Description
Generates locale-specific head tags (e.g., `hreflang`) for SEO purposes within the Nuxt application context.
### Usage
This method is available on the Nuxt app context.
```
--------------------------------
### i18n Custom Block with global attribute
Source: https://i18n.nuxtjs.org/docs/api/options
Example of an inlined i18n custom block with the global attribute enabled.
```vue
en:
hello: Hello
es:
hello: Hola
```
--------------------------------
### Configure Canonical Link with Query Parameters
Source: https://i18n.nuxtjs.org/docs/guide/seo
Customize the canonical link generation to include specific query parameters by using the `canonicalQueries` option within `useLocaleHead`.
```javascript
```
--------------------------------
### Default i18n Custom Block with lang attribute
Source: https://i18n.nuxtjs.org/docs/api/options
Example of an inlined i18n custom block with a specified lang attribute.
```vue
en:
hello: Hello
es:
hello: Hola
```
--------------------------------
### Add Nuxt i18n to nuxt.config.ts
Source: https://i18n.nuxtjs.org/docs/getting-started
Add the '@nuxtjs/i18n' module to your nuxt.config.ts file to enable its functionality. This is a required step after installation.
```typescript
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n']
})
```
--------------------------------
### Fetch Locale Messages Dynamically
Source: https://i18n.nuxtjs.org/docs/guide/lazy-load-translations
Fetch locale messages dynamically, for example, from a Nuxt server API, using the `defineI18nLocale` composable function.
```typescript
export default defineI18nLocale(locale => {
// for example, fetch locale messages from nuxt server
return $fetch(`/api/${locale}`)
})
```
--------------------------------
### $switchLocalePath()
Source: https://i18n.nuxtjs.org/docs/api/nuxt
A Nuxt runtime app context API to generate a locale-specific path for switching locales.
```APIDOC
## $switchLocalePath()
### Description
Generates a locale-specific path for switching the current locale within the Nuxt application.
### Usage
This method is available on the Nuxt app context.
```
--------------------------------
### Importing defineI18nLocaleDetector and Utilities
Source: https://i18n.nuxtjs.org/docs/composables/define-i18n-locale-detector
Shows how to import the necessary composable and utilities for locale detection. These can be auto-imported or imported explicitly.
```typescript
import { defineI18nLocaleDetector, tryCookieLocale, tryHeaderLocale, tryQueryLocale } from '#imports'
```
--------------------------------
### Resolving Localized Routes with useLocalePath Composable
Source: https://i18n.nuxtjs.org/docs/getting-started/usage
Use the `useLocalePath` composable to get a localized route path function for use in script blocks. This provides the same functionality as the global `$localePath`.
```javascript
{{ $t('home') }}Homepage in EnglishRoute to {{ $t('profile') }}
{{ category.title }}
```
--------------------------------
### NuxtLinkLocale with Path Strings
Source: https://i18n.nuxtjs.org/docs/components/nuxt-link-locale
Shows how to use with a direct path string. This method is supported for backward compatibility, but using named routes is recommended.
```vue
{{ $t('home') }}
```
--------------------------------
### useTranslation
Source: https://i18n.nuxtjs.org/docs/composables/use-translation
The useTranslation composable returns a translation function that can be used to get localized strings. It relies on the locale detected by the experimental.localeDetector option. This composable is experimental and intended for server-side use only.
```APIDOC
## useTranslation
### Description
Returns a translation function that uses the locale detected by `experimental.localeDetector`.
### Type
```typescript
declare function useTranslation = {}, Event extends H3Event = H3Event>(event: Event): Promise>
```
### Usage
```typescript
export default defineEventHandler(async event => {
const t = await useTranslation(event)
return {
hello: t('hello')
}
})
```
### Notes
- This composable is experimental.
- This composable is server-side only.
```
--------------------------------
### $localeRoute()
Source: https://i18n.nuxtjs.org/docs/api/nuxt
A Nuxt runtime app context API to generate a locale-specific route object for a given route.
```APIDOC
## $localeRoute()
### Description
Generates a locale-specific route object for a given route within the Nuxt application context.
### Usage
This method is available on the Nuxt app context.
```
--------------------------------
### Use Translation in Event Handler - Nuxt
Source: https://i18n.nuxtjs.org/docs/guide/server-side-translations
Translate messages on the server-side within an async event handler using the `useTranslation()` composable. This function returns a translation function `t` that can be used to get localized strings.
```typescript
// you need to define `async` event handler
export default defineEventHandler(async event => {
// call `useTranslation`, so it return the translation function
const t = await useTranslation(event)
return {
// call translation function with key of locale messages,
// and translation function has some overload
hello: t('hello')
}
})
```
--------------------------------
### Enable Prerendering Messages
Source: https://i18n.nuxtjs.org/docs/api/options
Enable experimental prerendering of locale messages to static files for improved performance. This feature writes hashed messages.json files to the public directory at build time.
```typescript
export default defineNuxtConfig({
i18n: {
experimental: {
prerenderMessages: true,
},
},
})
```
--------------------------------
### Component Translations with YAML i18n Block
Source: https://i18n.nuxtjs.org/docs/guide/per-component-translations
Define translations for a component using the i18n custom block with YAML syntax. This is an alternative to JSON for defining local translations, requiring the same `useI18n({ useScope: 'local' })` setup.
```vue
en:
hello: 'hello world!'
ja:
hello: 'こんにちは、世界!'
```
--------------------------------
### Forcing Locale Resolution with NuxtLinkLocale
Source: https://i18n.nuxtjs.org/docs/components/nuxt-link-locale
Illustrates how to use the 'locale' prop with to force a specific locale for the link. It also shows the equivalent standard usage with useLocalePath and a locale argument.
```vue
{{ $t('home') }}{{ $t('home') }}
```
--------------------------------
### Basic SwitchLocalePathLink Usage
Source: https://i18n.nuxtjs.org/docs/components/switch-locale-path-link
Demonstrates how to use SwitchLocalePathLink for basic locale switching. This is the recommended approach for language switchers.
```vue
DutchEnglish
```
```vue
DutchEnglish
```
--------------------------------
### $localePath()
Source: https://i18n.nuxtjs.org/docs/api/nuxt
A Nuxt runtime app context API to generate a locale-specific path for a given route.
```APIDOC
## $localePath()
### Description
Generates a locale-specific path for a given route within the Nuxt application context.
### Usage
This method is available on the Nuxt app context.
```
--------------------------------
### Configure Different Domains for Locales
Source: https://i18n.nuxtjs.org/docs/guide/different-domains
Set `differentDomains` to true and configure each locale object with a `domain` key in `nuxt.config.ts`. Optionally include port and protocol; if protocol is omitted, it will be auto-detected.
```typescript
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
domain: 'mydomain.com'
},
{
code: 'es',
domain: 'es.mydomain.com'
},
{
code: 'fr',
domain: 'fr.mydomain.com'
},
{
code: 'pl',
domain: 'http://pl.mydomain.com'
},
{
code: 'ua',
domain: 'https://ua.mydomain.com'
}
],
differentDomains: true
// Or enable the option in production only
// differentDomains: (process.env.NODE_ENV === 'production')
}
})
```
--------------------------------
### Update i18n Configuration for Prefix Strategy
Source: https://i18n.nuxtjs.org/docs/guide/migrating
When using 'prefix' strategy, update the 'redirectOn' option to 'all' to ensure all paths are redirected to their localized versions. This corrects unintended behavior from v9.
```javascript
export default defineNuxtConfig({
i18n: {
strategy: 'prefix',
detectBrowserLanguage: {
// redirectOn: 'root', //
+ redirectOn: 'all', // Redirects all paths as documented
}
}
})
```
--------------------------------
### Configure Nuxt i18n Module
Source: https://i18n.nuxtjs.org/docs/getting-started/usage
Set up the default locale and define available locales with their properties in the nuxt.config.ts file. This is the foundational step for internationalization.
```typescript
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
defaultLocale: 'en',
locales: [
{ code: 'en', name: 'English', file: 'en.json' },
{ code: 'nl', name: 'Nederlands', file: 'nl.json' }
]
}
})
```
--------------------------------
### Configure Locales for SEO
Source: https://i18n.nuxtjs.org/docs/guide/seo
Set up the `locales` array with `code` and `language` properties in `nuxt.config.ts` to enable locale-specific SEO features.
```typescript
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US'
},
{
code: 'es',
language: 'es-ES'
},
{
code: 'fr',
language: 'fr-FR'
}
]
}
})
```
--------------------------------
### Enable Always Redirect with Cookie
Source: https://i18n.nuxtjs.org/docs/guide/browser-language-detection
Configure to redirect users every time they visit the app while still using cookies to remember their choice.
```javascript
export default defineNuxtConfig({
i18n: {
// ...
detectBrowserLanguage: {
useCookie: true,
alwaysRedirect: true
}
}
})
```
--------------------------------
### Configure Multi-Domain Locales in Nuxt.js
Source: https://i18n.nuxtjs.org/docs/guide/multi-domain-locales
Set up multiple domains for different locales by configuring the `locales` and `multiDomainLocales` options in `nuxt.config.ts`. Each locale can have an array of associated domains and optionally specify default domains.
```typescript
const i18nDomains = ['mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
domains: i18nDomains,
defaultForDomains: ['mydomain.com']
},
{
code: 'es',
domains: i18nDomains,
defaultForDomains: ['es.mydomain.com']
},
{
code: 'fr',
domains: i18nDomains,
defaultForDomains: ['fr.mydomain.com']
},
{
code: 'pl',
domains: i18nDomains,
defaultForDomains: ['http://pl.mydomain.com']
},
{
code: 'ua',
domains: i18nDomains,
defaultForDomains: ['https://ua.mydomain.com']
},
{
code: 'nl',
domains: i18nDomains
},
{
code: 'de',
domains: i18nDomains
},
],
multiDomainLocales: true
}
})
```
--------------------------------
### Configure Default Catchall Locale
Source: https://i18n.nuxtjs.org/docs/guide/seo
Set the default 'catchall' locale for hreflang links by specifying the language for the first locale in the configuration.
```typescript
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US' // Will be used as "catchall" locale by default
},
{
code: 'gb',
language: 'en-GB'
}
]
}
})
```
--------------------------------
### Define Vue I18n Configuration
Source: https://i18n.nuxtjs.org/docs/getting-started/vue-i18n
Create a configuration file for Vue I18n runtime options. This file should export a function that returns the Vue I18n options object. Nuxt I18n provides a `defineI18nConfig` macro for improved typing.
```typescript
export default defineI18nConfig(() => {
return {
// vue-i18n options
}
})
```
--------------------------------
### Extend Nuxt Project with a Layer
Source: https://i18n.nuxtjs.org/docs/guide/layers
Demonstrates how to extend a Nuxt project with a layer that provides i18n configuration. The extended layer must be listed in the 'extends' array of the main nuxt.config.ts.
```typescript
export default defineNuxtConfig({
extends: ['my-layer']
})
```
```typescript
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'nl', file: 'nl.json' }
]
}
})
```
--------------------------------
### localeHead()
Source: https://i18n.nuxtjs.org/docs/api/vue
Generates locale-specific head meta information for SEO and accessibility.
```APIDOC
## localeHead()
### Description
Generates locale-specific head meta information, including attributes for SEO and accessibility.
### Method
N/A (Function Signature)
### Parameters
#### Arguments
* **options** (I18nHeadOptions) - An object containing options for generating head information.
* **dir** (boolean) - Adds a `dir` attribute to the HTML element. Default: `false`
* **seo** (boolean | SeoAttributesOptions) - Adds various SEO attributes. Default: `false`
### Returns
* **I18nHeadMetaInfo** - An object containing the meta information for the head section.
```
--------------------------------
### Serve Prerendered Messages from CDN
Source: https://i18n.nuxtjs.org/docs/api/options
Configure the CDN URL to serve prerendered locale messages. When app.cdnURL is set, client-side requests for messages will target the specified CDN.
```typescript
export default defineNuxtConfig({
app: {
cdnURL: 'https://cdn.example.com',
},
i18n: {
experimental: {
prerenderMessages: true,
},
},
})
```
--------------------------------
### switchLocalePath()
Source: https://i18n.nuxtjs.org/docs/api/vue
Generates the path for the current route, localized to a specified locale.
```APIDOC
## switchLocalePath()
### Description
Returns the path of the current route for a specified locale.
### Method
N/A (Function Signature)
### Parameters
#### Arguments
* **locale** (Locale) - The target locale for which to generate the path.
### Returns
* **string** - The localized path for the current route.
```
--------------------------------
### Nuxt i18n Configuration with Strategy
Source: https://i18n.nuxtjs.org/docs/guide
Configure the routing strategy and default locale for the Nuxt i18n module in your nuxt.config.ts file.
```typescript
export default defineNuxtConfig({
// ...
i18n: {
strategy: 'prefix_except_default',
defaultLocale: 'en'
}
// ...
})
```
--------------------------------
### Enable Compact Routes in Nuxt Config
Source: https://i18n.nuxtjs.org/docs/guide/new-features
Enable the experimental `compactRoutes` option in your `nuxt.config.ts` file to optimize route generation. This is an opt-in feature.
```typescript
export default defineNuxtConfig({
i18n: {
experimental: {
compactRoutes: true
}
}
})
```
--------------------------------
### Switching Locale in NuxtLink Components
Source: https://i18n.nuxtjs.org/docs/composables/use-switch-locale-path
Demonstrates how to use the useSwitchLocalePath composable within a Nuxt.js application to create navigation links that switch the user's locale.
```vue
EnglishFrançais
```
--------------------------------
### Configure i18n with Runtime Config
Source: https://i18n.nuxtjs.org/docs/api/runtime-config
Set i18n options like `baseUrl` and `domainLocales` using `runtimeConfig.public.i18n`. This allows these options to be overridden by environment variables after the application is built.
```typescript
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
// Leave options unset that you want to set using `runtimeConfig`
// baseUrl: 'https://example.com',
},
runtimeConfig: {
public: {
i18n: {
baseUrl: 'https://example.com',
domainLocales: {}
// other options ...
}
}
}
})
```
--------------------------------
### Global Page Transition with Locale Finalization
Source: https://i18n.nuxtjs.org/docs/guide/lang-switcher
Implement a global page transition in `pages/app.vue` that waits for the locale change to finalize before the transition completes, ensuring content consistency.
```vue
```
--------------------------------
### Root Redirect Configuration
Source: https://i18n.nuxtjs.org/docs/api/options
Configure a redirect for the root URL. Can be a simple path string or an object specifying status code and path.
```json
{
"statusCode": 301,
"path": "about-us"
}
```
--------------------------------
### Setting Translated Route Parameters with useSetI18nParams
Source: https://i18n.nuxtjs.org/docs/composables/use-set-i18n-params
Demonstrates how to use the useSetI18nParams composable to set translated slugs for different locales and then switch between them using useSwitchLocalePath.
```javascript
```
--------------------------------
### Define Custom Paths for a Dynamic Page (Deprecated)
Source: https://i18n.nuxtjs.org/docs/guide/custom-paths
Configure custom paths for dynamic routes using the deprecated `defineI18nRoute` macro. Include the dynamic segment in double square brackets.
```vue
```
--------------------------------
### Importing Composables from #imports
Source: https://i18n.nuxtjs.org/docs/getting-started/usage
If auto-imports are disabled, explicitly import composables like `useI18n` and `useLocalePath` from `#imports`.
```javascript
```
--------------------------------
### Locale Object Configuration
Source: https://i18n.nuxtjs.org/docs/api/options
Defines a list of supported locales using locale objects for advanced configurations. Each object can specify code, language, file, dir, domain, and other custom properties.
```javascript
[
{ "code": "en", "language": "en-US", "file": "en.js", "dir": "ltr" },
{ "code": "ar", "language": "ar-EG", "file": "ar.js", "dir": "rtl" },
{ "code": "fr", "language": "fr-FR", "file": "fr.js" }
]
```
--------------------------------
### Define Locale Domains with Environment Variables
Source: https://i18n.nuxtjs.org/docs/guide/multi-domain-locales
Use this configuration to define locale-specific domains that can be set via environment variables. This is useful for managing different domains across staging and production environments.
```typescript
export const localeDomains = {
uk: process.env.DOMAIN_UK,
fr: process.env.DOMAIN_FR
}
```
--------------------------------
### detectBrowserLanguage Configuration
Source: https://i18n.nuxtjs.org/docs/api/options
Configuration options for enabling and customizing browser language detection and redirection.
```APIDOC
## detectBrowserLanguage
### Description
Enables browser language detection to automatically redirect visitors to their preferred locale as they visit your site for the first time. This feature helps improve user experience by serving content in the user's native language.
### Type
`object | boolean`
### Properties
#### `alwaysRedirect`
* type: `boolean`
* default: `false`
Set to always redirect to the value stored in the cookie, not just on first visit.
#### `fallbackLocale`
* type: `string | null`
If none of the locales match the browser's locale, use this one as a fallback.
#### `redirectOn`
* type: `string`
* default: `'root'`
Supported options:
* `'all'` - detect browser locale on all paths.
* `'root'` (recommended for improved SEO) - only detect the browser locale on the root path (`'/'`) of the site. Only effective when using strategy other than `'no_prefix'`.
* `'no prefix'` - a more permissive variant of `'root'` that will detect the browser locale on the root path (`'/'`) and also on paths that have no locale prefix (like `'/foo'`). Only effective when using strategy other than `'no_prefix'`.
#### `useCookie`
* type: `boolean`
* default: `true`
If enabled, a cookie is set once the user has been redirected to browser's preferred locale, to prevent subsequent redirects. Set to `false` to redirect every time.
#### `cookieKey`
* type: `string`
* default: `'i18n_redirected'`
Cookie name.
#### `cookieDomain`
* type: `string | null`
* default: `null`
Set to override the default domain of the cookie. Defaults to the **host** of the site.
#### `cookieCrossOrigin`
* type: `boolean`
* default: `false`
When `true`, sets the flags `SameSite=None; Secure` on the cookie to allow cross-domain use of the cookie (required when app is embedded in an iframe).
#### `cookieSecure`
* type: `boolean`
* default: `false`
Sets the `Secure` flag for the cookie.
### Usage
Set to `false` to disable.
See also Browser language detection for a guide. Note that for better SEO it's recommended to set `redirectOn` to `'root'`.
```
--------------------------------
### Configure Nuxt i18n for Lazy-Loading
Source: https://i18n.nuxtjs.org/docs/guide/lazy-load-translations
Configure the `locales` option in `nuxt.config.ts` to specify translation files for each locale. Use the `file` or `files` key to point to the respective translation files.
```typescript
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
file: 'en-US.json'
},
{
code: 'es',
file: 'es-ES.js'
},
{
code: 'fr',
file: 'fr-FR.ts'
}
],
defaultLocale: 'en'
}
})
```
--------------------------------
### Switching Locales with useSwitchLocalePath Composable
Source: https://i18n.nuxtjs.org/docs/getting-started/usage
The `useSwitchLocalePath` composable provides a function to generate locale-switching links within script blocks, mirroring the functionality of the global `$switchLocalePath`.
```javascript
EnglishNederlands
```
--------------------------------
### Configure i18n for Shared Domains with Domain Default
Source: https://i18n.nuxtjs.org/docs/guide/different-domains
Configure the i18n module to use different domains, including scenarios where multiple languages share a domain. Set `domainDefault: true` for the default language of each domain.
```javascript
export default defineNuxtConfig({
// ...
i18n: {
locales: [
{
code: 'en',
domain: 'mydomain.com',
domainDefault: true
},
{
code: 'pl',
domain: 'mydomain.com'
},
{
code: 'ua',
domain: 'mydomain.com'
},
{
code: 'es',
domain: 'es.mydomain.com',
domainDefault: true
},
{
code: 'fr',
domain: 'fr.mydomain.com',
domainDefault: true
}
],
strategy: 'prefix',
differentDomains: true
// Or enable the option in production only
// differentDomains: (process.env.NODE_ENV === 'production')
},
// ...
})
```
--------------------------------
### Configure Browser Language Detection
Source: https://i18n.nuxtjs.org/docs/guide/browser-language-detection
Enable and configure browser language detection with cookie support and root redirection.
```javascript
export default defineNuxtConfig({
i18n: {
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root' // recommended
}
}
})
```
--------------------------------
### Configure Base URL for SEO
Source: https://i18n.nuxtjs.org/docs/guide/seo
Set the `baseUrl` option in `nuxt.config.ts` to your production domain to ensure alternate URLs are fully qualified for SEO.
```typescript
export default defineNuxtConfig({
i18n: {
baseUrl: 'https://my-nuxt-app.com'
}
})
```
--------------------------------
### Setting Dynamic Route Parameter Translations
Source: https://i18n.nuxtjs.org/docs/guide/custom-paths
Use `useSetI18nParams` to define translations for dynamic route parameters like 'slug'. This is crucial for SEO and correct route generation with ``.
```javascript
```
--------------------------------
### Implement Language Switcher with Anchor Tags
Source: https://i18n.nuxtjs.org/docs/guide/different-domains
When using different domains, use regular `` tags for your language switcher. The `useSwitchLocalePath` composable generates the correct `href` for each locale.
```vue
...
{{ locale.code }}
...
```
--------------------------------
### Setting Custom Route Paths with defineI18nRoute
Source: https://i18n.nuxtjs.org/docs/compiler-macros/define-i18n-route
Use this macro within a page component to define specific URL paths for different locales. This approach is deprecated.
```vue
```
--------------------------------
### $i18n
Source: https://i18n.nuxtjs.org/docs/api/nuxt
Provides access to the global Vue I18n or Composer instance within the Nuxt application context. This allows for direct manipulation and access to internationalization functionalities.
```APIDOC
## $i18n
### Description
Provides access to the global Composer or VueI18n instance of Vue I18n within the Nuxt application.
### Type
`VueI18n | Composer`
### Usage Example
```javascript
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.$i18n.onBeforeLanguageSwitch = (oldLocale, newLocale, isInitialSetup, nuxtApp) => {
console.log('onBeforeLanguageSwitch', oldLocale, newLocale, isInitialSetup)
}
})
```
```
--------------------------------
### localePath()
Source: https://i18n.nuxtjs.org/docs/api/vue
Generates a localized path for a given route, using either the current locale or a specified one.
```APIDOC
## localePath()
### Description
Returns a localized path for the passed route. Uses the current locale by default.
### Method
N/A (Function Signature)
### Parameters
#### Arguments
* **route** (string | Location) - The route for which to generate a localized path.
* **locale** (Locale, default: current locale) - The locale to use for localization. Defaults to the current locale.
### Returns
* **string** - The localized path.
```
--------------------------------
### Configure Custom Routes to Use Meta
Source: https://i18n.nuxtjs.org/docs/guide/custom-paths
Set `customRoutes: 'meta'` in `nuxt.config.ts` to make `definePageMeta` the sole source for custom route definitions.
```typescript
export default defineNuxtConfig({
i18n: {
customRoutes: 'meta'
}
})
```