Qwik Speak Inline Vite plugin
Last updated
Last updated
Inline Qwik Speak
inlineTranslate
andinlinePlural
functions at compile time
On the server, translation happens at runtime: assets
are loaded during SSR and the lookup also happens at runtime.
On the client, translation happens at compile-time: assets
are loaded and inlined in chunks sent to the browser during the build, reducing resource usage at runtime.
runtimeAssets
are always loaded at runtime, both on the server or on the client, allowing dynamic translations.
Qwik uses the q:base
attribute to determine the base URL for loading the chunks in the browser, so you have to set it in entry.ssr.tsx
file:
Note. The value set through Qwik
locale()
inplugin.ts
is saved by Qwik inserverData.locale
directly. Make sure the locale is among thesupportedLocales
Add qwikSpeakInline
Vite plugin in vite.config.ts
:
Available options:
supportedLangs
Supported langs. Required
defaultLang
Default lang. Required
basePath
The base path. Default to './'
assetsPath
Path to translation files: [basePath]/[assetsPath]/[lang]/*.json
. Default to 'i18n'
outDir
The build output directory. Default to 'dist'
loadAssets
Optional function to load asset by lang
autoKeys
Automatically handle keys for each string. Default is false
keySeparator
Separator of nested keys. Default is '.'
keyValueSeparator
Key-value separator. Default is '@@'
Note. Currently, only
json
is supported as format
Now build the app:
The browser chunks are generated one for each language:
Each contains only its own translation:
dist/build/en-US/q-*.js
dist/build/it-IT/q-*.js
At the end of the build, in root folder a qwik-speak-inline.log
file is generated which contains:
Missing values
Translations with dynamic keys or params
If you need to load translation data from an external source, such as a db, you can implement a custom function with this signature:
For example:
and pass the function to loadAssets
option:
The function will be called during the build for each supported language, and must return all translations for that language.