Neolithic Populous Metropolis

    vite-plugin-i18n-resources

    1.0.3 • Public • Published

    vite-plugin-i18n-resources

    Vite plugin to load i18n translation message files

    In small applications, have single json file per language may be sufficient, but if your app grows, you should split it in multiple files per language, to improve your structure.

    You may even want to move these files to different locations.

    All translation files in the same folder - example

    src
    ├── ...
    ├── locales
    │   ├── about.en.json
    │   ├── about.es.json
    │   ├── about.fr.json
    │   ├── home.en.json
    │   ├── home.es.json
    │   ├── home.fr.json
    │   └── ...
    └── ...
    

    Translation Files split by scopes - example

    src
    ├── ...
    ├── pages
    │   ├── about
    │   │   ├── ...
    │   │   ├── locales
    │   │   │   ├── about.en.json
    │   │   │   ├── about.es.json
    │   │   │   └── about.fr.json
    │   │   └── ...
    │   ├── home
    │   │   ├── ...
    │   │   ├── locales
    │   │   │   ├── home.en.json
    │   │   │   ├── home.es.json
    │   │   │   └── home.fr.json
    │   │   └── ...
    │   └── ...
    └── ...
    

    This plugin finds all language files within a path and groups them by language so that you can set them on your vue-i18n instance.

    Install

    yarn add --dev vite-plugin-i18n-resources
    
    npm i -D vite-plugin-i18n-resources

    Getting Started

    1. Config plugin in vite.config.js

    Import this plugin and set the path of translation files.

    import i18nResources from "vite-plugin-i18n-resources";
    import { resolve } from "path";
    
    export default {
      plugins: [
        i18nResources({
          path: resolve(__dirname, "src/locales"),
        }),
      ],
    };

    2. Import translation message and set them to your vue-i18n instance

    import { createI18n } from "vue-i18n";
    import { messages } from "vite-i18n-resources";
    
    const i18n = createI18n({
      legacy: false,
      locale: "en",
      fallbackLocale: "en",
      messages,
    });
    
    // Only if you want hot module replacement when translation message file change
    if (import.meta.hot) {
      import.meta.hot.on("locales-update", (data) => {
        Object.keys(data).forEach((lang) => {
          i18n.global.setLocaleMessage(lang, data[lang]);
        });
      });
    }

    Namespace

    To avoid namespace collisions when group all translations files by language, each file is stored within a section with its name:

    home.en.json

    {
      "title": "Home Page"
    }

    about.en.json

    {
      "title": "About Page"
    }

    The plugin will generate the following object:

    {
      en: {
        home: {
          title: 'Home Page'
        },
        about: {
          title: 'About Page'
        }
      },
      ...
    }

    Now, you can use a translation message by:

    <template>
      <h1>{{ $t("home.title") }}</h1>
      ...
    </template>

    Filenames

    The file names of the translation files should have always the same format:

    {namespaces}.{locale}.json
    
    home.en.json
    about.en.json
    cart.de.json
    

    VS Code i18n Ally extension

    If you use i18n ALLY, you can configure it as follows:

    "i18n-ally.localesPaths": [ "src/locales" ],
    "i18n-ally.namespace": true,
    "i18n-ally.pathMatcher": "{namespaces}.{locale}.json",
    "i18n-ally.keystyle": "nested",

    Todo

    • [ ] Basic test coverage

    I'm sorry for my wording, English is not my mother tongue.

    Install

    npm i vite-plugin-i18n-resources

    DownloadsWeekly Downloads

    146

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • fvena32