add i18n

.eslintrc.json

@@ -12,17 +12,18 @@
         "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
+		"parser": "babel-eslint",
         "ecmaVersion": 2018,
-        "sourceType": "module"
+        "sourceType": "module",
+		"allowImportExportEverywhere": true
     },
     "plugins": [
         "vue"
     ],
     "rules": {
-        "indent": [
-            "error",
-			"tab"
-        ],
+        "indent": ["error", "tab", {
+			"ignoredNodes": ["TemplateLiteral"]
+		}],
         "linebreak-style": [
             "off",
             "unix"

package.json

@@ -11,17 +11,20 @@
     "@tailwindcss/postcss7-compat": "^2.2.17",
     "autoprefixer": "^9",
     "axios": "^0.24.0",
+    "babel-eslint": "^10.1.0",
     "core-js": "^3.6.5",
     "postcss": "^7",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "vue": "^3.0.0",
     "vue-advanced-cropper": "^2.8.0",
+    "vue-i18n": "^9.1.9",
     "vue-meta": "^3.0.0-alpha.8",
     "vue-router": "^4.0.0-0",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^5.0.0",
     "@vicons/antd": "^0.11.0",
     "@vicons/carbon": "^0.11.0",
     "@vicons/fa": "^0.11.0",
@@ -38,7 +41,6 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^8.2.0",

src/i18n.js

@@ -0,0 +1,67 @@
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+export const SUPPORT_LOCALES = ['en', 'de']
+
+var default_options = {
+	warnHtmlInMessage: 'off',
+	warnHtmlMessage: false,
+	fallbackWarn: false,
+	silentTranslationWarn: true,
+	locale: 'en',
+	fallbackLocale: {
+		'de':   ['en'],
+		'default': ['en']
+	}
+}
+
+export function setupI18n(options = default_options) {
+	const i18n = createI18n(options)
+	loadLocaleMessages(i18n, options.locale)
+	setI18nLanguage(i18n, options.locale)
+	return i18n
+}
+
+export function setI18nLanguage(i18n, locale) {
+	i18n.locale = locale
+
+	/**
+	 * NOTE:
+	 * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
+	 * The following is an example for axios.
+	 *
+	 * axios.defaults.headers.common['Accept-Language'] = locale
+	 */
+	document.querySelector('html').setAttribute('lang', locale)
+}
+
+export async function loadLocaleMessages(i18n, locale) {
+	// load locale messages with dynamic import
+	const messages = await import(
+		/* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+	)
+  
+	// set locale and locale message
+	if ('global' in i18n) {
+		i18n.global.setLocaleMessage(locale, messages.default)
+	} else {
+		i18n.setLocaleMessage(locale, messages.default)
+	}
+  
+	return nextTick()
+}
+
+export async function loadAndSetLocale (i18n, new_locale) {
+	// use locale if paramsLocale is not in SUPPORT_LOCALES
+	if (!SUPPORT_LOCALES.includes(new_locale)) {
+		//return next(`/${locale}`)
+		return
+	}
+
+	await loadLocaleMessages(i18n, new_locale)
+
+	// set i18n language
+	setI18nLanguage(i18n, new_locale)
+
+	return
+}

src/locales/de.json

@@ -0,0 +1,5 @@
+{
+	"messages": {
+		"hello": "hallo welt"
+	}
+}

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+	"messages": {
+		"hello": "hello world"
+	}
+}

src/main.js

@@ -5,15 +5,22 @@ import store from './store'
 
 import { createMetaManager, plugin as metaPlugin } from 'vue-meta'
 
+import { setupI18n, loadAndSetLocale } from '@/i18n.js'
+
 import naive from 'naive-ui'
 import './assets/tailwind.css'
 
+const i18n = setupI18n()
+
 var app = createApp(App).use(store).use(router)
 
 app.use(createMetaManager())
 app.use(metaPlugin)
 
+app.use(i18n)
 app.use(naive)
 
+loadAndSetLocale(i18n, 'en')
+
 //await router.isReady()
 app.mount('#app')

src/router/index.js

@@ -1,5 +1,9 @@
 import 'vfonts/FiraSans.css'
 
+import {
+	loadAndSetLocale
+} from '@/i18n.js'
+
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/Home.vue'
 import LogsList from '../views/LogsList.vue'
@@ -47,4 +51,11 @@ const router = createRouter({
 	routes,
 })
 
+// navigation guards
+router.beforeEach(async (to, from, next) => {
+	const paramsLocale = to.params.locale
+	await loadAndSetLocale(paramsLocale)
+	next()
+})
+
 export default router

src/views/Home.vue

@@ -14,7 +14,7 @@
 
 		<div class="home-menu">
 			<h1 class="text-3xl font-bold underline">
-				Hello world!
+				{{ $t('messages.hello') }}
 			</h1>
 			<n-space justify="space-around" >
 				<n-space vertical>
@@ -45,17 +45,25 @@
 					</n-space>
 				</n-space>
 			</n-space>
+			<n-button @click='set_lang("en")'>EN</n-button>
+			<n-button @click='set_lang("de")'>DE</n-button>
 		</div>
 	</div>
 </template>
 
 <script>
 import CameraAdd20Filled from '@vicons/fluent/CameraAdd20Filled'
+import { loadAndSetLocale } from '@/i18n.js'
 
 export default {
 	name: 'HomeView',
 	components: {
 		CameraAdd20Filled
+	},
+	methods: {
+		set_lang(locale) {
+			loadAndSetLocale(this.$root.$i18n, locale)
+		}
 	}
 }
 </script>

vue.config.js

@@ -1,5 +1,21 @@
+const path = require('path')
+
 module.exports = {
 	transpileDependencies: [
 		'vue-meta',
 	],
+	configureWebpack: {
+		module: {
+			rules: [
+				{
+					test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
+					type: 'javascript/auto',
+					loader: '@intlify/vue-i18n-loader',
+					include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
+						path.resolve(__dirname, 'src/locales')
+					]
+				},
+			]
+		}
+	},
 }