How (Not) to Integrate i18n Support with Vuelidate in Vue 3

Diary of a Broken Dev: Entry 2

Hello again, it's another Monday, and I have ~6 unlogged hours of work over the weekend because I could not resolve any of the Typescript errors stopping me from committing my branch and pushing it to the company repo.

Not all Documentation is Created Equal

Take a gander at this section of Vuelidate's documentation. If this makes sense to you, you're either:

• A developer with a good head on his shoulders, well-adjusted to the rigors of the field, and have an understanding of the technologies being used
• Not using Typescript

If you're using Typescript in your project and are trying to follow the documentation, good luck.

Down the Rabbit Hole we Go

Please, do yourself a favor, before even thinking of reading the rest of this buffoonery, download Vuelidate's ts-types from npm/yarn/suicide weapon of choice. Next, please just paste this:

const messagePath = ({ $validator }: MessageProps): string => `whereverYourMessagesAre.${$validator}`;

While we're on the topic, please also copypasta the following at the very top of the file:

import { MessageProps } from '@vuelidate/validators';

Why yes, I did just save you hours of labor, how could you tell?

Gotcha!

You thought you were home free? So did I my friend, but what bamboozles one can bamboozle them all. You're gonna also need to create a nice little function in the index.ts file of your i18n folder:

let _i18n: any;
export const useI18n =  () => {
  if(!_i18n) {
    return setupI18n();
  }
  return _i18n;
}
export function setupI18n(options = { locale: 'de', legacy: false }): I18n<unknown, unknown, unknown, false> {
  if(_i18n) return _i18n;
   _i18n = createI18n(options);
  setI18nLanguage(_i18n, options.locale);
  return _i18n;
}
export function setI18nLanguage(i18n: I18n<unknown, unknown, unknown, false>, locale: string) {

    i18n.global.locale.value = locale;
}
export async function loadLocaleMessages(i18n: I18n<unknown, unknown, unknown, false>, locale: any) {
  const messages = await import(
/* webpackChunkName: "locale-[request]" */ `@/locales/${locale}/index.ts`
  );

  i18n.global.setLocaleMessage(locale, messages.default);
}

You're gonna wanna import that sweet sweet useI18n function, and use it to initialize an i18n variable in lieu of the one in Vuelidate's documentation.

Takeaways and Lessons Learned

Management has not seen a single commit since Thursday last week, which probably means they don't even need to see this devlog to fire me.