Prepare your app
locize can be used with any i18n framework. Even with no i18n framework at all, for example with the locizify script.
Below we will continue with i18next as i18n framework. If you're curious to know why we suggest i18next, have a look at this page.
To have multiple languages on your website or application with , follow the below steps. First install the dependencies, use the following npm package or use a script tag load umd, esm or cjs from unkpg or cdnjs.com CDN.
# npm
$ npm install i18next --save
# yarn
$ yarn add i18nextThese lines of code give you a brief overview about localization in JavaScript can work and what functions are available in 18next . If you want to use the library for JavaScript production please refer to the detailed instructions of each framework in our resources. There is a much easier integration than with innerHTML.
Check out the i18n getting started guide on the i18next page.
import i18next from 'i18next';
i18next.init({
lng: 'en',
debug: true,
resources: {
en: {
translation: {
"key": "hello world"
}
}
}
}, (err, t) => {
// initialized and ready to go!
document.getElementById('output').innerHTML = i18next.t('key');
});Then just use i18next-locize-backend as i18next backend.
import i18next from 'i18next';
import Backend from 'i18next-locize-backend';
i18next
.use(Backend)
.init({
// ...other options
backend: {
projectId: '[PROJECT_ID]',
apiKey: '[API_KEY]',
referenceLng: '[LNG]'
}
});Choose your framework
For famous JavaScript frameworks locize is very easy to integrate through the JavaScript localization library i18next.
i18next can also be used on server side... In this tutorial blog post you can check out how this works.
On this page you'll find also non i18next aproaches.
Installation of i18next and angular-i18next package needed
Import I18NextModule to AppModule
Import I18NextModule.forRoot() to App Module and setup provider with "init"
Use i18next pipe to translate key
To unleash the full power of angular-i18next check out this tutorial blog post about Angular localization.
Installation of i18next and i18next-vue
Initialize i18next
Initial setup with app.use(I18NextVue, {i18next})
Set up a view
For more detailed instructions on how to properly internationalize a Vue app, check out this tutorial blog post about Vue localization.
As an alternative to i18next-vue, you can try vue-i18n like described in this tutorial blog post.
Installation of i18next package needed
Add react-i18next to expand the functionality
Add a new file i18n.js inside same directory as index.js
Translate the content with "hook", "HOC" or "render prop"
For more detailed instructions on how to properly internationalize a React app, check out this tutorial blog post about React localization.
Manual vs Automated
Step-by-step code
implementation (the manual way)
This process is based on how to implement multiple languages for a sample React app.
For more detailed instructions on how to properly internationalize your project, shown with the help of a React app example, check out this tutorial blog post: "How to properly internationalize a React application using i18next"
But there is more....
Take a minute and read about automating this process with a smart translation management system below. For extensive projects using just a library may too inefficient.
Automate translation work
(the smart way)
Congratulations you have decided to read about a robotic way to switch the language for any type of software. So this is for you. It's awesome which functionalities you can unleash for a small amount of money. Watch our videos and admire what you get from only five USD per month.
Use the full power of the i18next library together with locize, a localization management platform by the founders of i18next, which can automate the translation workflow in the locize app.
The machine / generative AI translation feature enables every new content to get automatically translated into all other defined target languages (like Google Translate, Deepl, Open AI, Mistral AI).
Register for free & unlock everything for a 14 days trial period.