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
 
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
 
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
 
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 •