Quasar i18n example app (quasar-i18n-example)

March 7, 2020 ยท View on GitHub

An app for demonstration of i18n (Internationalization and localization) in Quasar Framework.

Please contribute more language translations!

Building and deploying to surge

Demo

Demo app

Relevant documentation

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 in quasar.conf.js, in framework.lang field)
    • 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 and LanguageSelect.vue files to your project
      • Add the select component anywhere in your layout

    • Otherwise:

      • Copy the LanguageSelectMixin.vue file to your project
      • Use the mixin in your layout

  • Edit the webpackInclude comment in LanguageSelectMixin.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

Customize the configuration

See Configuring quasar.conf.js.