DEV Community: Ribal

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

Ribal — Mon, 07 Mar 2022 13:55:56 +0000

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.

How (Not) to Bundle a Component Library in Vue 3

Ribal — Fri, 11 Feb 2022 14:01:28 +0000

Diary of a Broken Dev: Entry #1

Hello, I refuse to introduce myself any further even though this is my first official post. The topic at hand today is to make sense of the last 3 days at my current job, and (hopefully) justifying why they pay me.

isCE: Not a Boolean Failing to Adhere to Semantic Variable Declaration

Narratives are unimportant, what matters is that our custom component library was refusing to play nice. After building it and attempting to import it into any other project, regardless of configuration, we were met with the following error:

Uncaught TypeError: Cannot read properties of null (reading 'isCE')

Well isn't that grand? Googling for possible leads led nowhere fast. We were pretty much on our own in the vast open (shit) sea without a mast.

Not All Build Configurations are Created Equal

Poring over the Vue CLI docs led me to an ambiguously worded statement.

Note on Vue Dependency

In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.

To avoid this behavior provide --inline-vue flag to build command.

Like any able-minded individual, I did what was only natural: contact my brother who is a linguist and has a background in programming. He confirmed that the statement was, in fact, worded ambiguously. Being that he is a non-prescriptivist, he went on to explain the importance of context and the democratization of language. This led me much closer to a solution than the previous 48 hours did.

If it Makes Sense But Doesn't Work, You're a Programmer

I actually just ended up removing the --inline-vue flag, created a vue.config.js file and added the following:

configureWebpack: {
  output: {
    libraryExport: "default",
  },
}

What does this do? Fuck if I know. At this point, I couldn't care less. After that, in the host project, I created another vue.config.js file and code-bae'd some:

module.exports = {
  chainWebpack(config) {
    config.resolve.alias.set("vue", 
    path.resolve("./node_modules/vue"));
  },
};

Fortunately, I actually know what this does. This is something-something prevents double Vue import.

Takeaways and Lessons Learned

Hope management doesn't see this devlog and fire me, such that I might save enough money to buy a farm and stop doing this to myself for a living.