* Introduction
Quasar Int is an app extension that makes use of [[https://github.com/pyxo-dev/qint][Qint]] to facilitate the i18n of
Quasar apps.

* Installation
#+begin_src sh
yarn add vue-i18n@next # or: npm install vue-i18n@next
quasar ext add @pyxo/int
#+end_src

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)=
  #+begin_src diff
   const Router = createRouter({
     scrollBehavior: () => ({ left: 0, top: 0 }),
-    routes,
+    routes: [],
     ...
  #+end_src

- 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=
  #+begin_src diff
 <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>

  #+end_src

- Enable Quasar [[https://quasar.dev/quasar-plugins/meta#installation][meta]] plugin.

*** SSR mode
Uncomment =ssrContext= in =src/boot/int.(ts|js)= as indicated.

* Uninstall
#+begin_src sh
quasar ext remove @quasar/int
#+end_src

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 [[https://www.w3.org/International/articles/language-tags][BCP 47]] language tags.

* Documentation
API docs: [[https://wint.pyxo.net/api][wint]] | [[https://vint.pyxo.net/api][vint]] | [[https://qint.pyxo.net/api][qint]]

* Source code
Repository: [[https://github.com/pyxo-dev/quasar-app-extension-int][github.com/pyxo-dev/quasar-app-extension-int]]
Qint repository: [[https://github.com/pyxo-dev/qint][github.com/pyxo-dev/qint]]

Contributions are welcome!

* See also
- [[https://github.com/pyxo-dev/wint][Wint]] Web apps int.
- [[https://github.com/pyxo-dev/vint][Vint]] Vue int.
- [[https://github.com/pyxo-dev/qint][Qint]] Quasar int.