Use i18n-http-backend to load translatiosn from json files.

package-lock.json

@@ -6594,6 +6594,14 @@
         "@babel/runtime": "^7.5.5"
       }
     },
+    "i18next-http-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.2.1.tgz",
+      "integrity": "sha512-9L2sa+wybqi57/+VsrJPo5DCI7WLoudaK12xz0okYSmsi3Izyj7sCgrYL52WHy/O3BFY9HGORBwSwlD1WYuH6Q==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -18,6 +18,7 @@
     "es6-promise": "^4.2.6",
     "i18next": "^20.2.1",
     "i18next-browser-languagedetector": "^6.1.0",
+    "i18next-http-backend": "^1.2.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",

public/locales/en.json

@@ -1,6 +0,0 @@
-{
-  "invoices": {
-    "title": "Invoices",
-    "new_invoice": "New invoice"
-  }
-}

public/locales/en/invoice-row.json

@@ -0,0 +1,7 @@
+{
+  "enter_item": "Enter item",
+  "enter_quantity": "Enter quantity",
+  "enter_unit": "Enter unit",
+  "enter_price": "Enter price",
+  "enter_tax": "Enter tax"
+}

public/locales/en/invoice-rows-header.json

@@ -0,0 +1,7 @@
+{
+   "item": "Item",
+   "quantity": "Quantity",
+   "unit": "Unit",
+   "price": "Price",
+   "sum": "Sum"
+}

public/locales/en/invoice-totals.json

@@ -0,0 +1,5 @@
+{
+    "subtotal": "Subtotal",
+    "total": "Total",
+    "add_currency": "Add currency"
+}

public/locales/en/invoices-list.json

@@ -0,0 +1,7 @@
+{
+  "invoice_number": "No.",
+  "client": "Client",
+  "issued_at": "Issued at",
+  "total": "Total",
+  "status": "Status"
+}

public/locales/en/invoices.json

@@ -0,0 +1,6 @@
+{
+  "title": "Invoices",
+  "new_invoice": "New invoice",
+  "export": "Export",
+  "import": "Import"
+}

public/locales/est.json

@@ -1,6 +0,0 @@
-{
-  "invoices": {
-    "title": "Arved",
-    "new_invoice": "Uus arve"
-  }
-}

public/locales/et/invoices.json

@@ -0,0 +1,4 @@
+{
+  "title": "Arved",
+  "new_invoice": "Uus arve"
+}

src/components/invoices/InvoiceRow.vue

@@ -4,28 +4,28 @@
             <AppEditable :value="row.item"
                          :errors="errors"
                          :field="`rows.${index}.item`"
-                         placeholder="Enter item"
+                         :placeholder="$t('enter_item')"
                          @change="updateProp({ item: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.quantity"
                          :errors="errors"
                          :field="`rows.${index}.quantity`"
-                         placeholder="Enter quantity"
+                         :placeholder="$('enter_quantity')"
                          @change="updateProp({ quantity: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.unit"
                          :errors="errors"
                          :field="`rows.${index}.unit`"
-                         placeholder="Enter unit"
+                         :placeholder="$t('enter_unit')"
                          @change="updateProp({ unit: $event })"/>
         </td>
         <td>
             <AppEditable :value="row.price | currency"
                          :errors="errors"
                          :field="`rows.${index}.price`"
-                         placeholder="Enter price"
+                         :placeholder="$t('enter_price')"
                          @change="updateProp({ price: $event })"/>
         </td>
         <td v-for="(tax, taxIndex) in row.taxes" :title="tax.label">
@@ -33,7 +33,7 @@
                          :value="tax.value | currency"
                          :errors="errors"
                          :field="`rows.${index}.taxes.${taxIndex}.value`"
-                         placeholder="Enter tax"
+                         :placeholder="$t('enter_tax')"
                          @change="updateTaxProp({ value: $event }, tax)"/>
         </td>
         <td class="text-right position-relative">
@@ -52,6 +52,7 @@ import AppEditable from '../form/AppEditable';
 export default {
   props: ['row', 'errors', 'index'],
   name: 'InvoiceRow',
+  i18nOptions: { namespaces: 'invoice-row' },
   components: {
     AppEditable,
   },

src/components/invoices/InvoiceRowsHeader.vue

@@ -1,14 +1,14 @@
 <template>
     <thead>
     <tr>
-        <th>Item</th>
+        <th>{{ $t('item') }}</th>
-        <th>Quantity</th>
+        <th>{{ $t('quantity') }}</th>
-        <th>Unit</th>
+        <th>{{ $t('unit') }}</th>
-        <th>Price</th>
+        <th>{{ $t('price') }}</th>
         <th v-for="tax in taxes" :key="tax.id">
             {{ tax.label }} %
         </th>
-        <th class="text-right">Sum</th>
+        <th class="text-right">{{ $t('sum') }}</th>
     </tr>
     </thead>
 </template>
@@ -18,6 +18,7 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  i18nOptions: { namespaces: 'invoice-rows-header' },
   computed: {
     ...mapGetters({
       taxes: 'invoiceRows/taxes',

src/components/invoices/InvoiceTotals.vue

@@ -1,7 +1,7 @@
 <template>
     <tfoot>
     <tr class="text-right">
-        <td :colspan="colspan">Subtotal</td>
+        <td :colspan="colspan">{{ $t('subtotal') }}</td>
         <td>{{ invoice.subTotal | currency }}</td>
     </tr>
     <tr class="text-right" v-for="tax in invoice.taxes" :key="tax.label">
@@ -13,11 +13,11 @@
     </tr>
     <tr class="text-right">
         <th :colspan="colspan">
-            Total
+            {{ $t('total') }}
             <AppEditable :value="invoice.currency"
                          :errors="errors"
                          field="currency"
-                         placeholder="Add currency"
+                         :placeholder="$t('add_currency')"
                          @change="updateProp({ currency: $event })"/>
         </th>
         <th class="text-nowrap">{{ invoice.total | currency }}</th>
@@ -31,6 +31,7 @@ import { formatDate } from '../../filters/date.filter';
 import { formatCurrency } from '../../filters/currency.filter';
 
 export default {
+  i18nOptions: { namespaces: 'invoice-totals' },
   props: ['invoice', 'errors'],
   components: {
     AppEditable,

src/components/invoices/InvoicesList.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        <div v-if="!invoices" class="col-12">Loading</div>
+        <div v-if="!invoices" class="col-12">{{ $t('loading') }}</div>
         <table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
             <thead>
             <tr>
-                <th>No.</th>
+                <th>{{ $t('invoice_number') }}</th>
-                <th>Client</th>
+                <th>{{ $t('client') }}</th>
-                <th>Issued at</th>
+                <th>{{ $t('issued_at') }}</th>
-                <th>Total</th>
+                <th>{{ $t('total') }}</th>
-                <th class="text-right">Status</th>
+                <th class="text-right">{{ $t('status') }}</th>
             </tr>
             </thead>
             <tbody v-if="invoices">
@@ -46,6 +46,7 @@ import dayjs from 'dayjs';
 import { VBTooltip } from 'bootstrap-vue';
 
 export default {
+  i18nOptions: { namespaces: 'invoices-list' },
   components: {
     EmptyState,
   },

src/config/i18n.config.js

@@ -1,21 +1,21 @@
 import Vue from 'vue';
 import i18next from 'i18next';
 import VueI18Next from '@panter/vue-i18next';
+import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import app from '@/main';
-import enJson from '../../public/locales/en';
-import estJson from '../../public/locales/est';
 
 Vue.use(VueI18Next);
 
-i18next.use(LanguageDetector);
+i18next
+  .use(LanguageDetector)
+  .use(Backend);
 
 const initialized = i18next.init({
   fallbackLng: 'en',
-  whitelist: ['en', 'est'],
+  whitelist: ['en', 'et'],
-  resources: {
+  backend: {
-    en: enJson,
+    loadPath: 'locales/{{lng}}/{{ns}}.json',
-    est: estJson,
   },
   detection: {
     order: ['querystring', 'path', 'localStorage', 'navigator'],

src/main.js

@@ -1,3 +1,4 @@
+import i18n from '@/config/i18n.config';
 import 'es6-promise';
 import '@/config/storage.config';
 import { BVModalPlugin } from 'bootstrap-vue';

src/store/language.js

@@ -6,7 +6,7 @@ export default {
     lang: null,
     all: [
       { name: 'English', code: 'en' },
-      { name: 'Estonian', code: 'est' },
+      { name: 'Estonian', code: 'et' },
     ],
   },
   mutations: {

src/views/dashboard/Invoices.vue

@@ -9,8 +9,8 @@
                         <template slot="button-content">
                             <i class="material-icons">more_vert</i>
                         </template>
-                        <b-dropdown-item @click="exportJson">Export</b-dropdown-item>
+                        <b-dropdown-item @click="exportJson">{{ $t('export') }}</b-dropdown-item>
-                        <b-dropdown-item @click="openImportModal">Import</b-dropdown-item>
+                        <b-dropdown-item @click="openImportModal">{{ $t('import') }}</b-dropdown-item>
                     </b-dropdown>
                 </div>
             </div>