i18n

All the nuxt-splitty does for i18n is to collect all translations in the few json files.

Setup

So, with such config

import { defineConfig } from 'nuxt-splitty'

export default defineConfig({
  i18n: {
    // The locales keys are closely related to the locales file names
    locales: [
      'en',
      'de',
    ]
  }
})

import { defineConfig } from 'nuxt-splitty'

export default defineConfig({
  i18n: {
    // The locales keys are closely related to the locales file names
    locales: [
      'en',
      'de',
    ]
  }
})

You can should put your translations in the locales directory in you module (you can use json5 format for translation files).

On site startup of build, all translations will be stored in the {vendorDir}/_i18n directory.

And you can use it by any module for translation that uses vue-i18n. Let's setup @nuxtjs/i18n-edge in your nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    'nuxt-splitty'
    ['@nuxtjs/i18n-edge', {
      locales: [
        {
          code: 'en',
          file: 'en.json',
        },
        {
          code: 'de',
          file: 'de.json',
        },
      ],
      lazy: true,

      // path from you `srcDir' for '@nuxtjs/i18n-edge'
      langDir: './vendor/_i18n/',
      defaultLocale: 'en',
      vueI18n: {
        allowComposition: true,
        legacy: false,
        globalInjection: true,
      },
    }],
  ],
})

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    'nuxt-splitty'
    ['@nuxtjs/i18n-edge', {
      locales: [
        {
          code: 'en',
          file: 'en.json',
        },
        {
          code: 'de',
          file: 'de.json',
        },
      ],
      lazy: true,

      // path from you `srcDir' for '@nuxtjs/i18n-edge'
      langDir: './vendor/_i18n/',
      defaultLocale: 'en',
      vueI18n: {
        allowComposition: true,
        legacy: false,
        globalInjection: true,
      },
    }],
  ],
})

Recomendations

To prevent translations conflicts, it's recommended to use module name as root translation key.

{
  "@Cart": {
    "components": {
      "OpenCartButton": "Open Cart"
    }
  }
}

{
  "@Cart": {
    "components": {
      "OpenCartButton": "Open Cart"
    }
  }
}

i18n #

Setup #

Recomendations #

i18n

Setup

Recomendations