i18next-vue + Locize example

May 19, 2026 · View on GitHub

A minimal Vue 3.5 sample showing how to load translations from Locize into i18next-vue — the i18next-team binding for Vue. Companion blog post: Properly internationalize a Vue.js application using i18next-vue.

Stack: Vue 3.5 · i18next-vue 5 · i18next 26 · i18next-locize-backend 10 · i18next-browser-languagedetector 8 · locize-lastused · locize (in-context editor) · Vite 8.

Getting started

  1. Create a free account and a project at https://www.locize.com/?from=locize-i18next-vue-example, then grab your project id and an API key.
  2. Either edit the .env* files (VITE_LOCIZE_PROJECTID, VITE_LOCIZE_APIKEY in .env.development only), or keep the shipped demo-project credentials to try it out first (those are intentionally public).
  3. npm install && npm run dev, then open http://localhost:5173.

What's in this example

src/i18n.js — the integration surface

Wires together five i18next pieces:

  • i18next-locize-backend loads translations from the Locize CDN and (in dev) pushes new keys back via saveMissing.
  • i18next-browser-languagedetector detects the user's preferred language from URL/cookie/navigator.
  • locize-lastused reports which keys were touched (dev-only) so unused keys can later be cleaned up in Locize.
  • locize plugin enables the in-context editor — append ?locize=true to the URL to translate inline.
  • i18next-vue installs the $t / $i18next magic and the useTranslation() composition helper.

Locize CDN endpoint

Locize ships two CDN infrastructures (full comparison at CDN types: Standard vs. Pro):

  • Standard CDN at api.lite.locize.app — BunnyCDN-backed, free for generous monthly volumes, 1-hour fixed cache, public-only. Default for newly created Locize projects.
  • Pro CDN at api.locize.app — CloudFront-backed, paid, supports private downloads, custom caching, namespace backups.

The shipped demo project lives on the Pro CDN, which is why src/i18n.js sets cdnType: 'pro'. If you swap in your own Locize project, flip cdnType to match ('standard' for api.lite.locize.app, 'pro' for api.locize.app).

Production safety

The write-enabled VITE_LOCIZE_APIKEY lives in .env.development only. .env.production omits it, so production builds never carry the key. The helper logic is gated on import.meta.env.PROD for the same reason — saveMissing and locize-lastused are dev-only.

<Suspense> for async i18n boot

src/Suspenser.vue wraps App.vue in <Suspense>. App.vue's <script setup> calls await i18nextPromise — so the loading state in the Suspenser shows while translations are being fetched, then the app renders once they're ready.

Scripts

CommandWhat it does
npm run devVite dev server on http://localhost:5173
npm run buildProduction build into dist/
npm run previewPreview the production build locally