Internationalization Plugin

[00:00:00]
>> Evan You: But here we're just gonna simply talk about, how to write a simple plugin that exposes this dollar T method, right? The usage looks like this. We're finally using this second argument of our view use function. So you can passing additional options into use of plugin. And in the case of 8nplugin, we're just gonna pass the local dictionary, which contains of few different languages.

[00:00:30]
This is Netherlands, cuz [LAUGH] I gave the workshop in Netherlands before so. And in terms of language, we will be requiring the user to declare a reactive data property called land at the root level. And the way you change language is, simply setting it to a different language.

[00:00:58]
So let's implement this quickly. Our install function take view itself and the locals. All right, and we need to mixin [COUGH]. So we need dollar T function to be available everywhere and every component. So we can do the mixin thing, we can do methods $t, but this is less efficient than, say, just do Vue.prototype.$t = something else.

[00:01:40]
>> Evan You: Right, we just attach it to Vue's prototype. And this will become available in every Vue instance. This is just how prototype inheritance in JavaScript works. And this will be much more performant because there won't be any runtime overhead of finding the methods, option. And then, setting up the method and all that stuff.

[00:02:03]
And what we do is, this function will take some id. And in fact, we don't want it to be narrow function because we do need access to this ID. And now, we need another thing to figure out what to do. Because first, we need access to the id, and then we need to locals, and then we need the current language.

[00:02:28]
Where do we find the current language? So if your using a state management package, you can store the current language in a store. And that would be very straight forward, you just somehow feed the store of either option into your plugin. And the plugin would have access to your store.

[00:02:48]
But in this case, we're just gonna do the quick and dirty way. We require that the user have this land property in the root instance. So we know it should always be there. So we just do this.$root.lang. This is our language right? So and we can find the dictionary from the locals and find the corresponding id and just return it.

[00:03:17]
And this is pretty much it.
>> Evan You: So yeah, switch and between them works, and so there really isn't too much to it. The only thing I want to sort of emphasize, so this is kind of a combination of the plugin exercise and the reactivity section. Because understanding, why the language switch works is pretty important here.

[00:03:55]
>> Evan You: This $t function references this .$root.lang. This dot here is what registers the reactivity. And it's important, this lang is a data property, instead of static property, because it needs to be reactive, right? This is also what enables it to trigger changes, when we later on set the lang to a different value.

[00:04:18]
And why would this register reactivity? It's because this $t function was invoked here in the template. And when the template gets compiled into render functions, this $t will also be invoked when the render function, renders. That's why the whole render function also, registers root.lang as a dependency and that's why later on the whole switching works.

[00:04:47]
So yeah, this is essentially it, if you're using directives, things might have to work a little bit differently. But we don't really have that much time to talk about that now, so that's pretty much it for the whole workshop.