[next] is it possible to use js/ts files for localization?

[steel97]

Hello @kazupon,

It seems that currently it is not possible to use js/ts files for localization as it shown in example https://i18n.nuxtjs.org/lazy-load-translations Is support of this feature planned? My goal actually to split localization strings into separate json files and unite them in ts/js as I done with previous module (@intlify/nuxt3), my localization file looked like this:

import Core from "./en/core.json";
import Home from "./en/home.json";

const locale: any = {
    Core: Core,
    Home: Home
}

export default locale;

What I want to achive is structure like this:

project
│   nuxt.config.ts  
│    ...
└───locales
│   │   en.ts
│   │   ru.ts
│   │   ...
│   └───en
│       │   core.json
│       │   home.json
│       │   ...
│   ────ru
│       │   core.json
│       │   home.json
│       │   ...

Thanks in advance! P.S ありがとうございます for such awesome i18n libraries!

[ma-jahn]

Hi @steel97 Up to now only json, json5, yaml and yml are supported.

--> https://github.com/nuxt-community/i18n-module/blob/next/packages/nuxt-i18n/src/utils.ts#L28

I would also like to maintain my translations in js/ts files.

[erunks]

If you're working with Nuxt 2, I was able to achieve this:

nuxt.config.ts

import { NuxtConfig } from '@nuxt/types';

export default {
  ...

  i18n: {
    defaultLocale: 'en',
    detectBrowserLanguage: {
      alwaysRedirect: false,
      useCookie: true,
    },
    langDir: 'i18n/',
    lazy: true,
    locales: [
      ...
      { code: 'en', file: 'en/index.ts', iso: 'en-US', name: 'English' },
      ...
    ],
    strategy: 'prefix_and_default',
    vueI18n: {
      fallbackLocale: 'en',
    },
  },

  modules: [
    '@nuxtjs/i18n',
  ],

  ...
} as NuxtConfig;

and then my locale files for example:

i18n/en/index.ts

export default {
  welcome: 'Welcome!',
};

and then using it in a page component

pages/index.vue

<template>
  {{ $t('welcome') }}
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({});
</script>

[steel97]

Thanks for reply @erunks. I am using nuxt3 for my current projects