Internationalization - Improve use of i18next

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:


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);


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


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


  <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>
        <div class="title sliding">Template FWK7 V5</div>
        <div class="title-large">
          <div class="title-large-text">Template FWK7 V5</div>
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="block block-strong">
        <p>{{$t 'lblApp'}}</p>
export default {
  on: {
    pageInit: function() {


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!

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 ?