i18next-vue + Locize example

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

Command	What it does
npm run dev	Vite dev server on http://localhost:5173
npm run build	Production build into dist/
npm run preview	Preview the production build locally

Related

• Locize platform docs
• i18next-vue documentation
• How to properly internationalize a Vue application using i18next
• locizer — lightweight client for Locize, used in the vue-i18n example