localize error messages from vee-validate

frontend/src/i18n.js

@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
+import en from 'vee-validate/dist/locale/en'
+import de from 'vee-validate/dist/locale/de'
+
 Vue.use(VueI18n)
 
 function loadLocaleMessages () {
@@ -11,6 +14,18 @@ function loadLocaleMessages () {
     if (matched && matched.length > 1) {
       const locale = matched[1]
       messages[locale] = locales(key)
+      if(locale === 'de') {
+        messages[locale] = {
+          validations: de,
+          ...messages[locale]
+        }
+      }
+      if(locale === 'en') {
+        messages[locale] = {
+          validations: en,
+          ...messages[locale]
+        }
+      }
     }
   })
   return messages
@@ -33,14 +48,9 @@ const numberFormats = {
   }
 }
 
-
 export default new VueI18n({
   locale: 'en',
   fallbackLocale: 'en',
   messages: loadLocaleMessages(),
   numberFormats
 })
-
-
-
-  

frontend/src/locales/en.json

@@ -11,8 +11,8 @@
   "transactions":"transactions",
   "language":"Sprache",
   "languages":{
-      "de": "Deutsch",
-      "en": "English"
+    "de": "Deutsch",
+    "en": "English"
   },
   "form": {
     "cancel":"Cancel",
@@ -74,31 +74,31 @@
       "support":"Support"
     },
     "sidebar" : {
-       "community":"Community",
-       "members_area":"Members area",
-       "membership":"Membership"
+      "community":"Community",
+      "members_area":"Members area",
+      "membership":"Membership"
     },
     "landing1" : {
-        "explore":"Explore Gradido",
-        "text":"If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.",
-        "link":"Explore pages"
+      "explore":"Explore Gradido",
+      "text":"If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.",
+      "link":"Explore pages"
     },
     "404" : {
-       "ooops" : "Ooops!",
-       "text" : "Page not found. Don't worry though, we have plenty of other pages to explore",
-       "back" : "Back to dashboard!"
+      "ooops" : "Ooops!",
+      "text" : "Page not found. Don't worry though, we have plenty of other pages to explore",
+      "back" : "Back to dashboard!"
     }    
-},
-"admin": {
-  "site": {
-    "overview": {
-      "creation": "Creation",
-      "transience" : "Transience",
-      "exchanged": "Exchanged",
-      "members" : "Members"
+  },
+  "admin": {
+    "site": {
+      "overview": {
+        "creation": "Creation",
+        "transience" : "Transience",
+        "exchanged": "Exchanged",
+        "members" : "Members"
+      }
     }
-  }
-},
+  },
   "nav": {
     "features": "Features"
   }

frontend/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import DashboardPlugin from './plugins/dashboard-plugin';
 import App from './App.vue';
 import i18n from './i18n.js';
+import VeeValidate from './vee-validate.js'
 import VueCookies from 'vue-cookies';
 
 // store

frontend/src/vee-validate.js

@@ -0,0 +1,28 @@
+import { configure, extend } from 'vee-validate'
+import { required, email, min } from "vee-validate/dist/rules"
+import i18n from './i18n'
+
+
+configure({
+  defaultMessage: (field, values) => {
+    console.log('defaultMessage', field, value)
+    values._field_ = i18n.t(`fields.${field}`)
+    return i18n.t(`validations.messages.${values._rule_}`, values)
+  }
+})
+
+extend('email', {
+  ...email,
+  message: (_, values) => i18n.t('validations.messages.email', values)
+})
+
+extend('required', {
+  ...required,
+  message: (_, values) => i18n.t('validations.messages.required', values)
+})
+
+extend('min', {
+  ...min,
+  message: (_, values) => i18n.t('validations.messages.min', values)
+})
+