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

@@ -88,8 +88,8 @@
       "text" : "Page not found. Don't worry though, we have plenty of other pages to explore",
       "back" : "Back to dashboard!"
     }    
-},
-"admin": {
+  },
+  "admin": {
     "site": {
       "overview": {
         "creation": "Creation",
@@ -98,7 +98,7 @@
         "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)
+})
+