Member preview

Summary of Advanced VueJS Features by Evan You (Part 7 of 7: Internationalization)

JL’s Self-teaching Story #32


[JL’s Self-teaching Story] Series

1.     Self-teach vs Coding Bootcamp
2. [Net Ninja] JS Regular Expressions
3-5. [Net Ninja] Vue JS2 (Part1, Part2, Part3)
6. [Net Ninja] Vuex
7-9. [Net Ninja] Python3 (Part1, Part2, Part3)
10-12. [Net Ninja] Django (Part1, Part2, Part3)
13-14. [Net Ninja] Sass (Part1, Part2)
15-18. [Sean Larkin] Webpack4 (Part1, Part2, Part3, Part4)
19-25. [Sarah Drasner] VueJS (Part1, Part2, Part3, Part4,
Part5, Part6, Part7)
26-32. [Evan You] Advanced VueJS (Part1, Part2, Part3,
Part4, Part5, Part6,
Part7(current))

🌲 This is the last part of my summary of Evan You’s “Advanced Vue.js Features from the Ground Up” on FrontendMasters.


[7. Internationalization]
7-1. Introducing Writing Plugins
7-2. Challenge 4: Writing a Simple Plugin

[ 7–1. Introducing Writing Plugins ]

There’s a plugin called “vue-i18n” developed by Kazuya Kawaguchi, a Vue core team member from Japan. He’s been experimenting extensively about internalization with three different approaches.

1.

The first is what we’ll discuss here, which is the most straight-forward and obvious solution. But, it comes with some performance cost if your app is really huge.

<h1>{{ $t('welcome-message') }}</h1>

> Find the correct message & just render it.

2.

The second approach is going with directives.

<h1 v-i18n="welcome-message"></h1>

> The advantage of using directives is you can directly manipulate the current element inside directives (if you don’t care about server-side rendering). The update will be very fast, because it doesn’t have to go through Vue’s virtual DOM. So, you’ll achieve slightly better performance especially when you’re dynamically switching between languages. But, the limitation of the directive-based internalization is you won’t be able to use it everywhere.

3.

There’s a hidden feature in vue-loader that allows you to inject custom template compilation modules in order to transform Vue templates at compile time.

> Kazuya Kawaguchi wrote a plugin that analyzed templates at compile time and found references to $t inside the templates and compile them.

Evan You didn’t mention the name of the plugin during his lecture. I think the plugin is vue-i18n-loader. (If you think it’s something different, please let me know! 🌟)

> Basically, the plugin replaces the templates with correct localized text at compile time, builds three different versions of an app, and deploy them. So, instead of dynamically switching between the versions at run time, we’d have three static versions of an app all pre-compiled. That would completely eliminates the run time cost of looking up locales and shipping the locale JSON dictionary to the client. All the extra overhead would be gone, because they’re all moved to the compilation phase.

>> This is a valid strategy if performance is extremely important and you’re okay with the deployment overhead that you have to maintain three branches under three different URLs. If performance gain is huge, it’s probably worth it.


INSTRUCTION:

Write a simple plugin that exposes $t method.


TEMPLATES:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<h1>{{ $t('welcome-message') }}</h1>
<button @click="changeLang('en')">English</button>
<button @click="changeLang('zh')">中文</button>
<button @click="changeLang('nl')">Dutch</button>
</div>
<script>
const i18nPlugin = {
// Implement this!
}
Vue.use(i18nPlugin, /* option */ {
en: { 'welcome-message': 'hello' },
zh: { 'welcome-message': '你好' },
nl: { 'welcome-message': 'Hallo' }
})
new Vue({
el: '#app',
data: {
lang: 'en'
},
methods: {
changeLang (lang) {
this.lang = lang
}
}
})
</script>

> $t(‘welcome-message’): You’ll use $t function and give a slug name for ID.


SOLUTION:

> Attaching $t to Vue’s prototype makes $t available in every Vue instance. That’s how prototype inheritance in JavaScript works.


If you’d like to financially support Evan You’s work on Vue, please visit here.

Class instructor “Evan You” is the Creator and Project Lead of Vue.js.

He can be found at his personal website, GitHub, LinkedIn, Twitter, Medium(Evan You), and Frontend Masters.


Thanks for reading! 💕 If you like this blog post, please clap👏

Jen Lim🌲 at Twitter, GitHub, & LinkedIn.