nuxt-i18n
The preset for @nuxtjs/i18n. It adds everything of vue-i18n, and finds the locale directory of the Nuxt config.
The nuxt-i18n preset supports @nuxtjs/i18n, the i18n module for Nuxt.
Detection
The preset applies when the project depends on @nuxtjs/i18n or nuxt-i18n. It is not exclusive: x18n still tests the presets after it.
x18n.config.ts
import { nuxtI18n } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'
export default defineConfig({
presets: [nuxtI18n()],
})What it adds
The preset includes every plugin of the vue-i18n preset: the translate calls, the Vue template syntax, <i18n> blocks, the placeholders and the extraction templates.
It also finds the locale files. If your config has no resources, the preset reads nuxt.config.ts (or nuxt.config.js) and looks for langDir:
| Nuxt config | Resource patterns |
|---|---|
langDir: 'lang' | i18n/lang/{locale}.{ext} and lang/{locale}.{ext} |
no langDir | i18n/locales/{locale}.{ext}, locales/{locale}.{ext} and lang/{locale}.{ext} |
The preset reads langDir as text. If the value is computed, set resources in the config.
Supported syntax
The syntax is the same as for vue-i18n:
<script setup lang="ts">
const { t } = useI18n()
const title = t('app.title')
</script>
<template>
<h1>{{ $t('app.greeting', { name: 'Ada' }) }}</h1>
<a v-t="'nav.home'" />
</template>