add support from localization based on browser and languages

.github/workflows/i18n.yaml

@@ -0,0 +1,37 @@
+name: i18n
+on:
+  push:
+    branches:
+      - 'master' # Default branch
+  pull_request:
+    branches:
+      - 'master' # Default branch
+
+permissions:
+  contents: read
+
+env:
+  NODE_VERSION: 18
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Set up NodeJs
+        uses: actions/setup-node@v4.0.2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Check for Translations
+        run: |
+          mv src/assets/scss/vendors/chart.js src/assets/scss/vendors/chart.js.skip
+          npm run vue-i18n-extract
+        continue-on-error: false

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "editorconfig.editorconfig",
-    "github.vscode-github-actions"
+    "github.vscode-github-actions",
+    "lokalise.i18n-ally"
   ]
 }

.vscode/settings.json

@@ -7,5 +7,11 @@
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "i18n-ally.translate.engines": ["google"],
+  "i18n-ally.localesPaths": [
+    "src/i18n/locales"
+  ],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.keystyle": "nested"
 }

package.json

@@ -18,7 +18,8 @@
     "eslint": "eslint . --ext .js,.vue,.json,.md,.yaml --report-unused-disable-directives",
     "eslint-fix": "eslint --ext .js,.vue,.json,.md,.yaml --fix . --report-unused-disable-directives",
     "prettier": "prettier --check --cache '**/*.{js,vue,json,md,yaml}'",
-    "prettier-fix": "prettier --write --cache '**/*.{js,vue,json,md,yaml}'"
+    "prettier-fix": "prettier --write --cache '**/*.{js,vue,json,md,yaml}'",
+    "vue-i18n-extract": "vue-i18n-extract report --vueFiles 'src/**/*.?(vue|js)' --languageFiles 'src/i18n/locales/*.json' --exclude 'validation.max_value' --exclude 'validation.min_value' --exclude 'validation.confirmed' --exclude 'validation.required' --ci --ci"
   },
   "dependencies": {
     "@coreui/coreui": "2.1.16",
@@ -84,6 +85,7 @@
     "sass": "1.72.0",
     "sass-loader": "8.0.2",
     "uuid": "9.0.1",
+    "vue-i18n-extract": "^2.0.7",
     "vue-template-compiler": "2.7.16"
   },
   "overrides": {

src/i18n/index.js

@@ -21,7 +21,7 @@ function loadLocaleMessages() {
 }
 
 const i18n = new VueI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  locale: navigator.language || navigator.userLanguage,
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
   messages: loadLocaleMessages(),
 });