setup

.env

+VUE_APP_I18N_LOCALE=nob
+VUE_APP_I18N_FALLBACK_LOCALE=en

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
   },
   "dependencies": {
     "axios": "^0.21.1",
@@ -14,6 +15,8 @@
     "debounce": "^1.2.1",
     "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.42/raw/module.tar.gz?job=publish",
     "vue": "^2.6.12",
+    "vue-i18n": "^8.26.7",
+    "vue-i18n-bridge": "^9.2.0-beta.10",
     "vue-material-design-icons": "^4.11.0",
     "vue-plausible": "^1.1.4",
     "vue-router": "^3.5.1",
@@ -23,6 +26,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@intlify/vue-i18n-loader": "^3.2.0",
     "@vue/cli-plugin-babel": "^4.5.12",
     "@vue/cli-plugin-eslint": "^3.1.1",
     "@vue/cli-service": "^4.5.13",
@@ -32,6 +36,7 @@
     "material-design-icons-iconfont": "^6.1.0",
     "sass": "^1.38.0",
     "sass-loader": "^10.0.0",
+    "vue-cli-plugin-i18n": "~2.3.1",
     "vue-cli-plugin-vuetify": "^2.1.1",
     "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.7.2"

src/i18n.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages()
+})

src/locales/nob.json

+{
+  "message": "hello i18n !!"
+}
\ No newline at end of file

src/main.js

@@ -7,6 +7,7 @@ import VueRouter from 'vue-router'
 import { VuePlausible } from 'vue-plausible'
 import vuetify from './plugins/vuetify'
 import Vuex from 'vuex'
+import i18n from './i18n'
 
 
 Vue.config.productionTip = false
@@ -116,8 +117,11 @@ new Vue({
   router,
   vuetify,
   store,
+
   beforeCreate() {
 		this.$store.commit('initStore');
 	},
+
+  i18n,
   render: h => h(Root )
 }).$mount('#app')

vue.config.js

 module.exports = {
   runtimeCompiler: true,
+
   transpileDependencies: [
     'vuetify'
   ],
+
   devServer: {
     https: false
+  },
+
+  pluginOptions: {
+    i18n: {
+      locale: 'nob',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true,
+      includeLocales: false,
+      enableBridge: true
+    }
   }
 }