Awesome
Quasar i18n example app (quasar-i18n-example)
An app for demonstration of i18n (Internationalization and localization) in Quasar Framework.
Please contribute more language translations!
Demo
Relevant documentation
- Quasar Language Packs
- App Internationalization (I18n)
- RTL Support
- Best practice for presenting languages
- International and multilingual sites
Integration with existing project
-
Add Vue-i18n support
Follow Quasar's App Internationalization documentation. TL;DR:
- Setup i18n
- Build default translation file
- Create default translation file,
src/i18n/en-us
(rename according to your project's default local, as defined inquasar.conf.js
, inframework.lang field
)
- Create default translation file,
- Replace existing strings with $t() macros
-
Copy the
i18n.config.js
file to your project and configure it to your preferences -
Set default project language in
quasar.conf.js
-
Optionally: Enable the Cookies plugin, for persistency of language selection
-
Add language selection logic
-
If you plan to use the LanguageSelect component:
- Copy the
LanguageSelectMixin.vue
andLanguageSelect.vue
files to your project - Add the select component anywhere in your layout
- Copy the
-
Otherwise:
- Copy the
LanguageSelectMixin.vue
file to your project - Use the mixin in your layout
- Copy the
-
-
Edit the
webpackInclude
comment inLanguageSelectMixin.vue
according to your desired languages
Install the dependencies
yarn
Start the app in development mode (hot-code reloading, error reporting, etc.)
quasar dev
Lint the files
yarn run lint
Build the app for production
quasar build