Prerequisites
- Qwik 1.x application
- Qwik City for routing
- Node.js 18+
- Basic Qwik knowledge
Common Challenges
Problems developers face when localizing Qwik apps—and how IntlPull helps.
Qwik Learning Curve
Qwik's resumability model is different. Understanding it helps with i18n patterns.
Early Ecosystem
Qwik and qwik-speak are newer. Fewer community resources than mature frameworks.
Breaking Changes
Pre-1.0 version. API may change. Check changelog on updates.
qwik-speak Features
Why qwik-speak is a great choice for Qwik localization.
Resumability
Translations resume on client without re-execution. Zero hydration overhead.
vs hydration cost
Lazy Loading
Load translations per route. Code-split by language. Minimal initial payload.
vs loading all upfront
Runtime Translation
Translate at runtime or build time. Flexible for different use cases.
vs build-time only
ICU Format
Full ICU MessageFormat support. Plurals, selects, and formatting.
vs basic interpolation
Qwik City Integration
Route-based locale detection. Middleware support. i18n routing built-in.
vs manual routing
SEO Optimized
Server-rendered translations. Proper hreflang tags. Search engine friendly.
vs client-rendered content
Quick Setup
Get qwik-speak running in your Qwik project.
Install qwik-speak
Add qwik-speak to your Qwik City project.
npm install qwik-speakCreate Speak Config
Set up the speak configuration.
// src/speak-config.ts
import type { SpeakConfig } from 'qwik-speak';
export const config: SpeakConfig = {
defaultLocale: { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
supportedLocales: [
{ lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
{ lang: 'es-ES', currency: 'EUR', timeZone: 'Europe/Madrid' },
{ lang: 'de-DE', currency: 'EUR', timeZone: 'Europe/Berlin' },
],
assets: [
'app', // app.json files
],
};Create Translation Files
Add translation JSON files.
// public/i18n/en-US/app.json
{
"app": {
"title": "Welcome to Qwik",
"description": "Build instant-loading web apps"
},
"nav": {
"home": "Home",
"about": "About",
"contact": "Contact"
}
}
// public/i18n/es-ES/app.json
{
"app": {
"title": "Bienvenido a Qwik",
"description": "Construye aplicaciones web de carga instantanea"
},
"nav": {
"home": "Inicio",
"about": "Acerca",
"contact": "Contacto"
}
}Configure Root Layout
Add QwikSpeakProvider to root layout.
// src/routes/layout.tsx
import { component$, Slot } from '@builder.io/qwik';
import { QwikSpeakProvider } from 'qwik-speak';
import { config } from '../speak-config';
export default component$(() => {
return (
<QwikSpeakProvider config={config}>
<Slot />
</QwikSpeakProvider>
);
});Use Translations
Access translations in components.
import { component$ } from '@builder.io/qwik';
import { $translate as t, useSpeakLocale } from 'qwik-speak';
export default component$(() => {
const locale = useSpeakLocale();
return (
<div>
<h1>{t('app.title')}</h1>
<p>{t('app.description')}</p>
<p>Current locale: {locale.lang}</p>
</div>
);
});IntlPull Integration
Connect IntlPull to manage translations professionally.
Install IntlPull CLI
Add the CLI for translation management.
npm install -D @intlpull/cliConfigure intlpull.json
Set up the project configuration.
{
"projectId": "your-project-id",
"format": "json",
"sourceLocale": "en-US",
"localesDir": "./public/i18n",
"filePattern": "{locale}/app.json"
}Pull Translations
Download translations from IntlPull.
npx intlpull pullAdd to CI/CD
Automate translation sync.
# .github/workflows/i18n.yml
name: Sync Translations
on:
push:
branches: [main]
jobs:
sync:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npx intlpull pull
- run: npm run buildFrequently Asked Questions
Related Guides
Astro Localization Guide
Complete guide to Astro localization with astro-i18next and built-in routing. Static site generation with multilingual content.
SolidJS Localization Guide
Complete guide to SolidJS localization with @solid-primitives/i18n. Reactive translations, lazy loading, and IntlPull integration.