DEV Community

Cover image for How to properly internationalize a Vue application using i18next

How to properly internationalize a Vue application using i18next

Adriano Raiano on May 16, 2022

Since Vue.js is an approachable, performant and versatile framework for building web user interfaces, it also needs a best-in-class internationaliz...
Collapse
 
kissu profile image
Konstantin BIFERT

Damn, quite complete post. I have to say that I never used i18next myself but it looks quite complete.
Not sure if this one is relevant, but maybe a mention to i18n ally could be nice too, since it's supported and really amazing regarding the overall workflow of working with several languages.

Collapse
 
dominic_clarke_31519a7b3f profile image
Dominic Clarke

Hi
I've tried using i18next but I've hit an issue.
The setup has been fine, really good, I have simple text translations defined in json files.
My app is a video game prototype with UI done in Vue.
I can set the language after init no problem and it works for each language.
The problem is when I try to change language at runtime.
The changeLanguage function never returns it's promise.
I put a timeout on it and it times out.
Any idea why this would happen?

Collapse
 
adrai profile image
Adriano Raiano

Create a minimal reproducible example and open an issue here: github.com/i18next/i18next-vue

Collapse
 
dominic_clarke_31519a7b3f profile image
Dominic Clarke

This issue is fixed now, it was user/js error github.com/i18next/i18next-vue/iss...

Collapse
 
the_one profile image
Roland Doda

That looks beautiful, but here are some questions:

  1. Can I use Vite instead of Webpack?
  2. Can I have translations in different folders? e.g. Admin module that is a folder to have translations inside that module/folder? Imagine that we can have many folders like admin, users, todos, etc
  3. Can I have translations lazy-loaded per page? e.g. if I am on the admin page, I want to load only translations of that page and not translations that belong to the users page for example
  4. Do I get type intellisense with TS or just JS when trying to access translation keys?
Collapse
 
adrai profile image
Adriano Raiano
Collapse
 
flosckow profile image
Flosckow

Hi, i'm don't understand how you reload translated dict? manually or exist embedded solution? Thx for this post)

Collapse
 
adrai profile image
Adriano Raiano

Sorry, I don‘t know what you mean?

Collapse
 
flosckow profile image
Flosckow

How will the dictionary with translations be updated in this case?

Thread Thread
 
adrai profile image
Adriano Raiano

In which case? You mean with the saveMissing? dev.to/adrai/how-to-properly-inter...

Collapse
 
sharok77 profile image
Sharok77

An example using the Vue 3 Composition API would be helpful.... is there a composable in i18next-vue?

Collapse
 
adrai profile image
Adriano Raiano