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

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>Quantity</th>
-        <th>Unit</th>
-        <th>Price</th>
+        <th>{{ $t('item') }}</th>
+        <th>{{ $t('quantity') }}</th>
+        <th>{{ $t('unit') }}</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>Client</th>
-                <th>Issued at</th>
-                <th>Total</th>
-                <th class="text-right">Status</th>
+                <th>{{ $t('invoice_number') }}</th>
+                <th>{{ $t('client') }}</th>
+                <th>{{ $t('issued_at') }}</th>
+                <th>{{ $t('total') }}</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'],
-  resources: {
-    en: enJson,
-    est: estJson,
+  whitelist: ['en', 'et'],
+  backend: {
+    loadPath: 'locales/{{lng}}/{{ns}}.json',
   },
   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="openImportModal">Import</b-dropdown-item>
+                        <b-dropdown-item @click="exportJson">{{ $t('export') }}</b-dropdown-item>
+                        <b-dropdown-item @click="openImportModal">{{ $t('import') }}</b-dropdown-item>
                     </b-dropdown>
                 </div>
             </div>