Internationalization - Improve use of i18next

Questions
1

Hi colleagues, I need to implement i18next in my FWK7-V5 core and Webpack application.

I have reviewed the forum posts that helped me make the library work but I think it could be improved.

Here the details of my implementation:

app.js

import i18next from './lang';

import Template7 from 'template7';

Template7.registerHelper('$t', function (text, options) {
  return this.$app.methods.$t(text);
});

import Framework7 from 'framework7/framework7.esm.bundle.js';

/** css import skipped */

// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component
  id: 'com.rma.testFWK7', // App bundle ID
  name: 'Test FWK7 V5', // App name
  theme: 'auto', // Automatic theme detection
  // App routes
  routes: routes,
  on: {
    init: function () {
      var f7 = this;
    },
  },
  methods: {
    $t: function(text){
      return i18next.t(text);
    }
  }
});

/lang/index.js

import i18next from "i18next";
import messEs from './es/messages.json';
const resources = {
  es: {
    translation: messEs
  }
};
i18next
  .init({
    resources,
    lng: "es",
    fallbackLng: "es", // use en if detected lng is not available
  }).then(function(t) {
  });
export default i18next;

lang/es/messages.json

{
    "lblApp": "Aplicación",
    "lblCount": "Contador {{count}}"
}

home.f7.html

<template>
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title sliding">Template FWK7 V5</div>
        <div class="title-large">
          <div class="title-large-text">Template FWK7 V5</div>
        </div>
      </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="block block-strong">
        <p>{{$t 'lblApp'}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  on: {
    pageInit: function() {
      console.log(this.$app.methods.$t('lblApp'))
    }
  }
}
</script>

template7-helpers-list.js

module.exports = ['foo', '$t'];

My requirements are:

  1. Import i18next globally to be able to use all its features in any file or component of the application.
  2. Register a component in Template7 that uses i18next.

Any recommendation or suggestion will be welcome, I think it would serve many developers like me who don’t have much experience with Webpack.

Thank you!

2

Is there a solution to this problem?

How can I reverence to json translation files?
(Framework7 with vite)

                backend: {
                    loadPath: '/locales/{{lng}}-{{ns}}.json'    // en-US-translation.json
                }

So this /locales/ folder. I placed it in ./src/ does not work then in ./public/ also does not work.

loadPath …/locales/ does also not work

loadPath ./locales/ does also not work

This vite .js file (including your custom app.js ) gets placed within the ./assets folder.

How can I reference a file OUTSIDE this vite thing from within the ./assets/index.23412342134.js ?