feat: add i18n reactive support (#4)

Co-authored-by: Alessandro Vandelli <a.vandelli@dreamonkey.com>
Co-authored-by: Paolo Caleffi <p.caleffi@dreamonkey.com>

Author: vandelpavel

README.md

@@ -84,42 +84,42 @@ Here are some examples:
 import { LayoutMetaMixin } from "@dreamonkey/quasar-app-extension-meta";
 
 export default {
-  name: 'MainLayout',
-  mixins: [LayoutMetaMixin(title => `${title} - FooBarAgency`)],
+  name: "MainLayout",
+  mixins: [LayoutMetaMixin((title) => `${title} - FooBarAgency`)],
   data() {
-   ...
-  }
-}
+    // ...
+  },
+};
 ```
 
 ```ts
 // src/pages/contacts.vue
 
 import { PageMetaMixin } from "@dreamonkey/quasar-app-extension-meta";
 
-const title = 'Contacts';
+const title = "Contacts";
 const description =
-  'Contact FooBarAgency with the online form or reach us in our office at 766 Parkway Street, Los Angeles, California.';
+  "Contact FooBarAgency with the online form or reach us in our office at 766 Parkway Street, Los Angeles, California.";
 
 export default {
-  name: 'ContactPage',
+  name: "ContactPage",
   mixins: [PageMetaMixin(title, description)],
   data() {
-    ...
-  }
-}
+    // ...
+  },
+};
 ```
 
 `` title => `${title} - FooBarAgency`  `` argument is useful to add a prefix/suffix to nested pages own title, but if no transformation is needed just leave it blank:
 
 ```ts
 export default {
-  name: 'MainLayout',
+  name: "MainLayout",
   mixins: [LayoutMetaMixin()], // <-- no argument here
   data() {
-   ...
-  }
-}
+    // ...
+  },
+};
 ```
 
 This AE sets `og:url` and `og:image` based on the domain provided into `process.env.APP_DOMAIN` (read more about [process.env](https://quasar.dev/quasar-cli/handling-process-env#Adding-to-process.env)).
@@ -162,6 +162,58 @@ export default {
 
 `metaTag` accepts the meta tag name, or an array of names, as first parameter and the value as second parameter.
 
+## Dynamic support for i18n
+
+Be sure to understand how [App Internationalization (i18n)](https://quasar.dev/options/app-internationalization#Introduction) and [Custom directive localization](http://kazupon.github.io/vue-i18n/guide/directive.html#string-syntax) work before proceeding.
+This mixin assumes [`vue-i18n`](https://github.com/kazupon/vue-i18n) has already been set up in your project.
+
+`PageMetaMixin` is perfect until you add internationalization to the mix, which requires to dynamically update you tags and meta tags accordingly to the selected language: `PageMetaI18nMixin` address this use case.
+
+### Using `PageMetaI18nMixin`
+
+You use `PageMetaI18nMixin` exactly how you would use `PageMetaMixin`, except you provide "translation paths" as arguments instead of the text itself.
+The mixin automatically react to `$root.$i18n.locale` changes, updating meta tags accordingly.
+
+```ts
+// src/i18n/it/contacts.ts    <-- Notice these are the website italian translations
+
+export default {
+  meta: {
+    title: "Contatti",
+    description:
+      "Contatta FooBarAgency con il nostro modulo online o raggiungici in ufficio a Parkway Street 766, Los Angeles, California.",
+  },
+  form: {
+    title: "Contattaci compilando il nostro modulo!",
+  },
+  // ... other translations
+};
+```
+
+```ts
+// src/pages/contacts.vue
+
+import { PageMetaI18nMixin } from "@dreamonkey/quasar-app-extension-meta";
+
+const titleLabel = "contacts.meta.title"; // <-- The title 'translation path'
+const descriptionLabel = "contacts.meta.description"; // <-- The description 'translation path'
+
+export default {
+  name: "ContactPage",
+  mixins: [PageMetaI18nMixin(titleLabel, descriptionLabel)],
+  data() {
+    // ...
+  },
+};
+```
+
+The "translation paths" are those you use to access translations with `vue-i18n` methods.
+In the following snippet the "translation path" is `contacts.form.title`:
+
+```html
+<p>{{ $t('contacts.form.title') }}</p>
+```
+
 ## Testing social preview
 
 If the website is online you can test it using [this tool](https://metatags.io/).
@@ -183,6 +235,10 @@ LayoutMetaMixin(
 PageMetaMixin(title: string, description: string);
 ```
 
+```ts
+PageMetaI18nMixin(titleLabel: string, descriptionLabel: string);
+```
+
 ```ts
 metaTag(names: string | string[], value: string);
 ```

package.json

@@ -31,6 +31,7 @@
     "@types/node": "^14.11.2",
     "typescript": "^4.0.3",
     "vue": "^2.6.12",
+    "vue-i18n": "^8.22.1",
     "vue-router": "^3.4.5"
   },
   "publishConfig": {

src/mixins/meta.ts

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import "vue-router";
+import "vue-i18n";
 
 export function LayoutMetaMixin(
   titleTemplateFn: (title: string) => string = (title) => title
@@ -28,6 +29,48 @@ export function PageMetaMixin(title: string, description: string) {
   };
 }
 
+export function PageMetaI18nMixin(
+  titleLabel: string,
+  descriptionLabel: string
+) {
+  return {
+    data() {
+      return {
+        metaI18nTitle: "",
+        metaI18nDescription: "",
+      };
+    },
+    watch: {
+      "$root.$i18n.locale": {
+        handler: function (
+          this: Vue & {
+            metaI18nTitle: string;
+            metaI18nDescription: string;
+          }
+        ) {
+          this.metaI18nTitle = this.$root.$i18n.t(titleLabel).toString();
+          this.metaI18nDescription = this.$root.$i18n
+            .t(descriptionLabel)
+            .toString();
+        },
+        immediate: true,
+      },
+    },
+    meta(
+      this: Vue & {
+        metaI18nTitle: string;
+        metaI18nDescription: string;
+        metaI18nRoutePath: string;
+      }
+    ) {
+      return {
+        title: this.metaI18nTitle,
+        meta: pageSocialMetaTags(this.metaI18nDescription, this.$route.path),
+      };
+    },
+  };
+}
+
 function layoutSocialMetaTags(title: string) {
   return {
     ...metaTag("og:title", title),

yarn.lock

@@ -12,6 +12,11 @@ typescript@^4.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
   integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==
 
+vue-i18n@^8.22.1:
+  version "8.22.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.22.1.tgz#b9dd098a17e1f5adb91bdf9611f0385310da7cb1"
+  integrity sha512-JNgiEJ5a8YPfk5y2lKyfOAGLmkpAVfhaUi+T4wGpSppRYZ3XSyawSDDketY5KV2CsAiBLAGEIO6jO+0l2hQubg==
+
 vue-router@^3.4.5:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.5.tgz#d396ec037b35931bdd1e9b7edd86f9788dc15175"