Generate all the i18n language files your Quasar Framework app needs - from a CSV file
Quasalang is a global CLI tool (for Quasar Framework projects) that allows you to generate all your i18n language files (including the main index.js file) instantly from a single, easy to update CSV file.
It will also generate a sample CSV file for you, so you can easily get started.
You can also:
- Organise your phrases with empty lines & comments
- Generate your language switcher array code
- Search & list i18n locale codes easily
$ npm install -g quasalang
Once installed, get yourself to the root of a Quasar project
$ cd my-quasar-project
$ quasalang create-csv
This will generate a CSV file at /translations.csv
that looks like this:
Key | English, en-US | French, fr | German, de |
---|---|---|---|
hello | Hello | Bonjour | Hallo |
goodbye | Goodbye | Au revoir | Auf Wiedersehen |
thanks | Thanks | Merci | Danke |
View Source
Key,"English, en-US","French, fr","German, de"
hello,"Hello","Bonjour","Hallo"
goodbye,"Goodbye","Au revoir","Auf Wiedersehen"
thanks,"Thanks","Merci","Danke"
Use a CSV editor (such as the VSCode Extension "Edit csv") to add your own languages & phrases.
Be sure to use the format Language, code
in the header row e.g. Russian, ru
:
Key | English, en-US | French, fr | German, de | Russian, ru |
---|---|---|---|---|
hello | Hello | Bonjour | Hallo | Привет |
goodbye | Goodbye | Au revoir | Auf Wiedersehen | До свидания |
thanks | Thanks | Merci | Danke | Спасибо |
buttHair | Butt hair | Cheveux bout à bout | Hintern Haare | стыковые волосы |
View Source
Key,"English, en-US","French, fr","German, de","Russian, ru"
hello,"Hello","Bonjour","Hallo",Привет
goodbye,"Goodbye","Au revoir","Auf Wiedersehen",До свидания
thanks,"Thanks","Merci","Danke",Спасибо
buttHair,"Butt hair","Cheveux bout à bout","Hintern Haare",стыковые волосы
Generate all the language files you need based on your CSV:
$ quasalang generate
By default, this will generate (or overwrite) your /src/i18n
folder, generating all the files and folders you need:
src/
├─ i18n/
│ ├─ de/
│ │ ├─ index.js
│ ├─ en-US/
│ │ ├─ index.js
│ ├─ fr/
│ │ ├─ index.js
│ ├─ ru/
│ │ ├─ index.js
│ ├─ index.js
Your main index file /src/i18n/index.js
will look like this:
// This file was auto-generated by Quasalang
import enUS from './en-US'
import fr from './fr'
import de from './de'
import ru from './ru'
export default {
'en-US': enUS, // English
'fr': fr, // French
'de': de, // German
'ru': ru, // Russian
}
And your language files, e.g. /src/i18n/ru/index.js
will look like this:
// Russian, ru
// This file was auto-generated by Quasalang
export default {
hello: `Привет`,
goodbye: `До свидания`,
thanks: `Спасибо`,
buttHair: `стыковые волосы`,
}
The default input path is /translations.csv
but you can change it if you like:
$ quasalang generate --input /files/my-translations.csv
# or the shorthand...
$ quasalang g -i /files/my-translations.csv
The default output path is /src/i18n
but you can change it if you like:
$ quasalang generate --output /src/my-translations
# or the shorthand...
$ quasalang g -o /src/my-translations
By default, if the output folder exists, you'll be prompted to overwrite it:
? Folder src/i18n exists. Overwrite it? (Y/n)
You can skip this prompt if you like:
$ quasalang generate --force
# or the shorthand...
$ quasalang g -f
By default, Quasalang will add a watermark to your files:
// This file was auto-generated by Quasalang
You can disable this if you like:
$ quasalang generate --nowatermark
# or the shorthand...
$ quasalang g -nw
You also generate the array code for your language switcher:
$ quasalang generate --lang-switcher
# or the shorthand...
$ quasalang g -ls
See Generate language switcher array code for more info.
You can watch for changes to your translation file and auto-regenerate your language files. You can then just leave it running in the background and forget about it:
$ quasalang generate --watch
# or the shorthand...
$ quasalang g -w
You can leave empty rows in your CSV file, like this:
Key | English, en-US | French, fr | German, de | Russian, ru |
---|---|---|---|---|
hello | Hello | Bonjour | Hallo | Привет |
goodbye | Goodbye | Au revoir | Auf Wiedersehen | До свидания |
thanks | Thanks | Merci | Danke | Спасибо |
buttHair | Butt hair | Cheveux bout à bout | Hintern Haare | стыковые волосы |
View Source
Key,"English, en-US","French, fr","German, de","Russian, ru"
,,,,
hello,"Hello","Bonjour","Hallo",Привет
goodbye,"Goodbye","Au revoir","Auf Wiedersehen",До свидания
thanks,"Thanks","Merci","Danke",Спасибо
,,,,
buttHair,"Butt hair","Cheveux bout à bout","Hintern Haare",стыковые волосы
,,,,
And this will generate equivalent empty lines in your generated language files:
// Russian, ru
// This file was auto-generated by Quasalang
export default {
hello: `Привет`,
goodbye: `До свидания`,
thanks: `Спасибо`,
buttHair: `стыковые волосы`,
}
You can add comments to your CSV file to create sections like this:
Key | English, en-US | French, fr | German, de | Russian, ru |
---|---|---|---|---|
# Greetings |
||||
hello | Hello | Bonjour | Hallo | Привет |
goodbye | Goodbye | Au revoir | Auf Wiedersehen | До свидания |
thanks | Thanks | Merci | Danke | Спасибо |
# Hair Related |
||||
buttHair | Butt hair | Cheveux bout à bout | Hintern Haare | стыковые волосы |
View Source
Key,"English, en-US","French, fr","German, de","Russian, ru"
,,,,
# Greetings
hello,"Hello","Bonjour","Hallo",Привет
goodbye,"Goodbye","Au revoir","Auf Wiedersehen",До свидания
thanks,"Thanks","Merci","Danke",Спасибо
,,,,
# Hair Related
buttHair,"Butt hair","Cheveux bout à bout","Hintern Haare",стыковые волосы
,,,,
And this will add equivalent comments to your generated files:
// Russian, ru
// This file was auto-generated by Quasalang
export default {
// Greetings
hello: `Привет`,
goodbye: `До свидания`,
thanks: `Спасибо`,
// Hair Related
buttHair: `стыковые волосы`,
}
If you want to use strings as your keys, just surround your keys in double quotes:
Key | English, en-US | French, fr | German, de |
---|---|---|---|
"Hello" | Hello | Bonjour | Hallo |
"Goodbye" | Goodbye | Au revoir | Auf Wiedersehen |
"Thanks" | Thanks | Merci | Danke |
View Source
Key,"English, en-US","French, fr","German, de"
"""Hello""","Hello","Bonjour","Hallo"
"""Goodbye""","Goodbye","Au revoir","Auf Wiedersehen"
"""Thanks""","Thanks","Merci","Danke"
This will generate language files like this:
// French, fr
// This file was auto-generated by Quasalang
export default {
"Hello": `Bonjour`,
"Goodbye": `Au revoir`,
"Thanks": `Merci`,
}
You can add multi-line phrases, like in the last row here:
Key | English, en-US | French, fr | German, de |
---|---|---|---|
hello | Hello | Bonjour | Hallo |
goodbye | Goodbye | Au revoir | Auf Wiedersehen |
thanks | Thanks | Merci | Danke |
welcome | Hey there... Welcome to the app!... Hope you like it! |
Salut... Bienvenue dans l'appli! ... J'espère que vous aimez! |
Sie da... Willkommen in der App! ... Hoffe du magst es! |
View Source
Key,"English, en-US","French, fr","German, de"
hello,"Hello","Bonjour","Hallo"
goodbye,"Goodbye","Au revoir","Auf Wiedersehen"
thanks,"Thanks","Merci","Danke"
welcome,"Hey there...
Welcome to the app!...
Hope you like it!","Salut...
Bienvenue dans l'appli! ...
J'espère que vous aimez!","Sie da...
Willkommen in der App! ...
Hoffe du magst es!"
This will generate language files like this:
// English, en-US
// This file was auto-generated by Quasalang
export default {
hello: `Hello`,
goodbye: `Goodbye`,
thanks: `Thanks`,
welcome: `Hey there...
Welcome to the app!...
Hope you like it!`,
}
You can generate the code for your language switcher array (based on your CSV):
$ quasalang lang-switcher
# or the shorthand...
$ quasalang ls
This will output something like this to the console:
Your language switcher options array:
[
{ label: 'English', value: 'en-US' },
{ label: 'French', value: 'fr' },
{ label: 'German', value: 'de' }
]
You can also run this command automatically when you use the generate
command to generate your language files:
$ quasalang generate --lang-switcher
# or the shorthand...
$ quasalang g -ls
The output will be something like this
Wrote 4 files:
┌─────────┬───────────────────┬─────────┬───────────────────────────┐
│ (index) │ File │ Code │ Path │
├─────────┼───────────────────┼─────────┼───────────────────────────┤
│ 0 │ 'Main index file' │ '' │ 'src/i18n/index.js' │
│ 1 │ 'English' │ 'en-US' │ 'src/i18n/en-US/index.js' │
│ 2 │ 'French' │ 'fr' │ 'src/i18n/fr/index.js' │
│ 3 │ 'German' │ 'de' │ 'src/i18n/de/index.js' │
└─────────┴───────────────────┴─────────┴───────────────────────────┘
Your language switcher options array:
[
{ label: 'English', value: 'en-US' },
{ label: 'French', value: 'fr' },
{ label: 'German', value: 'de' }
]
Don't know the locale code for a language? Just search for it:
$ quasalang list-codes
? Enter a search query (e.g. "russian") or hit Enter to list all codes: italian
_____
|_ _|
| |
| |
_| |_
|_____|
Italian, it
Italian (Italy), it_IT
Italian (Switzerland), it_CH
Or just hit enter to list them all:
/\
/ \
/ /\ \
/ ____ \
/_/ \_\
Afrikaans, af
Afrikaans (Namibia), af_NA
Afrikaans (South Africa), af_ZA
Akan, ak
Akan (Ghana), ak_GH
Albanian, sq
Albanian (Albania), sq_AL
Amharic, am
Amharic (Ethiopia), am_ET
Arabic, ar
Arabic (Algeria), ar_DZ
Arabic (Bahrain), ar_BH
Arabic (Egypt), ar_EG
Arabic (Iraq), ar_IQ
Arabic (Jordan), ar_JO
Arabic (Kuwait), ar_KW
Arabic (Lebanon), ar_LB
Arabic (Libya), ar_LY
Arabic (Morocco), ar_MA
Arabic (Oman), ar_OM
Arabic (Qatar), ar_QA
Arabic (Saudi Arabia), ar_SA
Arabic (Sudan), ar_SD
Arabic (Syria), ar_SY
Arabic (Tunisia), ar_TN
Arabic (United Arab Emirates), ar_AE
Arabic (Yemen), ar_YE
Armenian, hy
Armenian (Armenia), hy_AM
Assamese (India), as_IN
Assamese, as
Asu, asa
Asu (Tanzania), asa_TZ
Azerbaijani, az
Azerbaijani (Cyrillic), az_Cyrl
Azerbaijani (Cyrillic, Azerbaijan), az_Cyrl_AZ
Azerbaijani (Latin), az_Latn
Azerbaijani (Latin, Azerbaijan), az_Latn_AZ
____
| _ \
| |_) |
| _ <
| |_) |
|____/
Bambara, bm
Bambara (Mali), bm_ML
Basque, eu
Basque (Spain), eu_ES
... etc ...
You can then copy and paste your language name and code straight into your CSV column header.
Usage: quasalang generate|g [options]
Generate your i18n folder & all language files based on a CSV file
Options:
-i, --input <mode> Path to input CSV (default: "translations.csv")
-o, --output <mode> Path to i18n output folder (default: "src/i18n")
-f, --force Force write files (without prompt) (default: false)
-nw, --nowatermark Disable the watermark ("This file was auto-generated..") (default:
false)
-ls, --lang-switcher Generate language switcher options array & output to console i.e. [{
label: 'English', value: 'en-US'}, ..] (default: false)
-w, --watch Watch CSV file for changes & regenerate files (default: false)
-h, --help display help for command
Usage: quasalang create-csv|c [options]
Create a sample CSV file (/translations.csv)
Options:
-f, --force Force overwrite translations file (without prompt) (default: false)
-h, --help display help for command
Usage: quasalang lang-switcher|ls [options]
Generate language switcher options array & output to console i.e. [{ label: 'English', value: 'en-US'}, ..]
Options:
-i, --input <mode> Path to input CSV (default: "translations.csv")
-h, --help display help for command
Usage: quasalang list-codes|lc [options]
Search & list i18n locale codes
Options:
-h, --help display help for command