nuxt-i18n-micro

The nuxt-i18n-micro preset supports Nuxt I18n Micro, a light i18n module for Nuxt.

Detection

The preset applies when the project depends on nuxt-i18n-micro.

import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: ['nuxt-i18n-micro'],
})

Locale files

If your config has no resources, the preset reads translationDir from nuxt.config.ts (or nuxt.config.js). Without translationDir, the directory is locales:

The preset reads translationDir as text. If the value is computed, set resources in the config.

Page translations

Nuxt I18n Micro loads the global translations and the translations of the current page. A page key overrides a global key with the same name.

x18n follows this for page components. In pages/about.vue, $t('title') is pages.about.title when locales/pages/about/{locale}.json has title. Otherwise it is the global key title. The route name comes from the file path, as in Nuxt: pages/products/[id].vue is products-id, pages/blog/index.vue is blog, and the route group in pages/(marketing)/about.vue is left out, so the route is about. Page components are the .vue files in pages/ or app/pages/ at the project root.

For a dynamic key such as $t(`items.${id}`), the page prefix applies when the page file has items.

In components and layouts, a key is always a global key. x18n does not know on which pages a component shows.

Supported syntax

The translate calls are $t, $ts, $tc and $has, also from useI18n() and useNuxtApp(). The keypath of <i18n-t> is a key too. $tn and $td take the name of a format, not a key.

<script setup lang="ts">
const { $t: t } = useNuxtApp()
const title = t('app.title')
</script>

<template>
  <h1>{{ $t('greeting', { name: 'Ada' }) }}</h1>
  <p>{{ $tc('apples', 3) }}</p>
  <i18n-t keypath="welcome" />
</template>

Translations that a component gives to $defineI18nRoute are not read.

Placeholders

Single braces: {name}. count is always available, as $tc passes it.

Extraction templates