i18next-vue
i18next-http-backend
Our great sponsors
i18next-vue | i18next-http-backend | |
---|---|---|
2 | 6 | |
62 | 413 | |
- | 2.4% | |
7.0 | 7.4 | |
about 1 month ago | 7 days ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
i18next-vue
- Vue 3 localization
-
How to properly internationalize a Vue application using i18next
In this tutorial we'll make use of the i18next-vue module.
i18next-http-backend
-
Supercharge Your TypeScript App: Mastering i18next for Type-Safe Translations
A React.js based i18next setup with in-memory translation resources could also look very similar to the above example, so let's raise the bar a little bit and see what a setup with lazy loading translations like with i18next-http-backend looks like:
-
Implement multi-language Support in React
The next package will load the values depending on the language returned by the language detector.
-
How to properly internationalize a Vue application using i18next
import i18next from 'i18next' import I18NextVue from 'i18next-vue' import LanguageDetector from 'i18next-browser-languagedetector' import Backend from 'i18next-http-backend' export const i18nextPromise = i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en' }); export default function (app) { app.use(I18NextVue, { i18next }) return app }
-
The progressive guide to jQuery internationalization (i18n) using i18next
// ... $(function () { // use plugins and options as needed, for options, detail see // https://www.i18next.com i18next // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(i18nextHttpBackend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(i18nextBrowserLanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en' }, (err, t) => { if (err) return console.error(err); // ... }); });
-
How to Internationalize a React App
In addition, we need to install i18next-http-backend which allows us to fetch translations from a directory, and i18next-browser-languagedetector which allows us to detect the user's language:
-
How to properly internationalize a React application using i18next
import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-http-backend'; import { DateTime } from 'luxon'; i18n // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, // not needed for react as it escapes by default format: (value, format, lng) => { if (value instanceof Date) { return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format]) } return value; } }, resources: { en: { translation: { description: { part1: 'Edit <1>src/App.js and save to reload.', part2: 'Learn React' }, counter: 'Changed language just once', counter_plural: 'Changed language already {{count}} times', footer: { date: 'Today is {{date, DATE_HUGE}}', date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!', date_afternoon: 'Good afternoon! It\'s {{date, DATE_HUGE}}', date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}' } } }, de: { translation: { description: { part1: 'Ändere <1>src/App.js und speichere um neu zu laden.', part2: 'Lerne React' }, counter: 'Die Sprache wurde erst ein mal gewechselt', counter_plural: 'Die Sprache wurde {{count}} mal gewechselt', footer: { date: 'Heute ist {{date, DATE_HUGE}}', date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | Wünsche einen schönen Tag!', date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}', date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}' } } } } }); export default i18n;
What are some alternatives?
fluent-vue - Internationalization plugin for Vue.js
i18next-browser-languageDetector - language detector used in browser environment for i18next
vue-i18n-next - Vue I18n for Vue 3
i18next-locize-backend - A simple i18next backend for locize.com which can be used in Node.js, in the browser and for Deno.
Luxon - ⏱ A library for working with dates and times in JS
jquery-i18next - jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
http - An isomorphic http client for Svelte applications
react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
i18next - i18next: learn once - translate everywhere
react-i18n-tutorial - Tutorial for Internationalization In React
locize-cli - locize cli to import / export locales, add / edit / remove, sync segments
create-react-app - Set up a modern web app by running one command.