@pyxo/quasar-app-extension-int NPM

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:

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!

@pyxo/quasar-app-extension-int v1.0.0-beta.8