Introduction

Quasar Int is an app extension that makes use of Qint to facilitate the i18n of Quasar apps.

Installation

yarn add vue-i18n@next # or: npm install vue-i18n@next
quasar ext add @pyxo/int

The extension will add a directory src/int/ that contains the configuration. It adds also a boot file src/boot/int.(ts|js).

The extension will also scaffold an example implementation in src-int/.

Prompts

You will be prompted if your app has typescript support, if you answer yes, *.ts files will be added instead of *.js.

Setup

To use the scaffolded example:

• Register the boot file in quasar.conf.js > boot.

• Make the following changes in src/router/index.(ts|js)

     const Router = createRouter({
       scrollBehavior: () => ({ left: 0, top: 0 }),
  -    routes,
  +    routes: [],
       ...

• Change vueRouterMode in quasar.conf.js > build to history mode.

• Enable rtl in quasar.conf.js > build (as the scaffold example uses "Arabic").

Hreflang link tags

To use the hreflang link tags:

• Make the following changes in src/App.vue

   <script lang="ts">
  +import { useMeta } from 'quasar'
  +import { qint } from 'src/boot/int'
   import { defineComponent } from 'vue'
  
   export default defineComponent({
     name: 'App',
  
  +  setup() {
  +    useMeta(() => qint.meta.value)
  +  },
   })
   </script>
  

• Enable Quasar meta plugin.

SSR mode

Uncomment ssrContext in src/boot/int.(ts|js) as indicated.

Uninstall

quasar ext remove @quasar/int

You might also wish to remove the added directories src/int, src-int and the boot file src/boot/int.(ts|js).

Features

• SSR support.
• Supports different URL modes: prefix (example.com/en), subdomain (en.example.com), host (example.co.uk), search-param (example.com?l=en), none (example.com)
• Supports the use of a language tag cookie.
• Can make use of the user's client language preferences (e.g. browser settings).
• Support for hreflang link tags.
• Lazy loading of Quasar language packs and vue-i18n locale messages.
• Language tags, Qint uses the term "language tag" to denote a language or a locale, and recommends the use of BCP 47 language tags.

Documentation

API docs: wint | vint | qint

Source code

Repository: github.com/pyxo-dev/quasar-app-extension-int Qint repository: github.com/pyxo-dev/qint

Contributions are welcome!

See also

• Wint Web apps int.
• Vint Vue int.
• Qint Quasar int.