I’ve recently had the opportunity to build a bilingual site for a well known chain restaurant in Beijing, China. Since one of the core requirements states that the site needs to be friendly to English speakers, so I thought ‘why not make the entire site bilingual?’, thus embarking on a 2-day journey to find a solution. I would like to share my experience with you in this article, for your reference this is the completed site.
Getting Started
Just like Vue, NUXT’s website is also well documented. After some digging around I found an i18n integration example here. which has everything one needs to integrate Vue-i18n.(Unfortunately the codepen link is broken.)
I wanted the bilingual selection behavior to be such that:
1. There should be a dropdown located in the header that allows users to select their language.2. Upon selecting a language, the page refreshes and displays the new language for every block of text.3. The url changes to include the query string ?lang=’xx’ where xx represents the two digit code for the language, and in this case ‘en’ or ‘cn’.
Okay let’s do this.
The example uses kazupon’s vue-i18n library:
To integrate an external package, we declare our Vue-I18n instance in ‘plugins/’ directory
Store functions to keep our locale consistent throughout every component of the app, also as a mechanism to change the stored locale without conflicts
We need to interpret the language requested before rendering the pages, for this we need to define a custom middleware function in the ‘/middleware’ directory.
Don’t forget to include both middleware file and plugin file in nuxt config
What does code look like in a Vue component?
This is the HTML for the dropdown button look I was going for, I used a UI component library called eleme for styling
Here we see that on click the button triggers a function called ‘changeLang’, defined in the <script> section below:
Make it rain
Suppose our translations look like the following in ‘locales/en.json’, where “title” denotes what gets displayed, and ‘link’ denotes what the <nuxt-link> will route to.
Then to see the translation in action, simply use $t() to translate *EVERYWHERE*:
Hope this article has helped you in some way! If you have any questions or have a better implementation than this solution I’d love to hear from you :)
