feat: add dir property and defaultDirection option (#1023)

Co-authored-by: Rafał Chłodnicki <rchl2k@gmail.com>

docs/content/en/api.md

@@ -57,11 +57,20 @@ All [Vue I18n properties and methods](http://kazupon.github.io/vue-i18n/api/#vue
 
   See also [Basic usage - nuxt-link](../basic-usage#nuxt-link).
 
-#### $nuxtI18nSeo
+#### $nuxtI18nHead
+
+  - **Arguments**:
+    - options: (type: [`NuxtI18nHeadOptions`](https://github.com/nuxt-community/i18n-module/blob/master/types/nuxt-i18n.d.ts))
+  - **Returns**: [`MetaInfo`](https://github.com/nuxt/vue-meta/blob/74182e388ad1b1977cb7217b0ade729321761403/types/vue-meta.d.ts#L173)
+
+  If `options.addDirAttribute` is set to `false`, the `dir` attribute will not be added.
+  If `options.addSeoAttributes` is set to `true`, the seo attributes will be added.
+
+#### $nuxtI18nSeo <badge>deprecated (use `$nuxtI18nHead`)</badge>
 
   - **Arguments**:
     - no arguments
-  - **Returns**: `NuxtI18nSeo`
+  - **Returns**: [`MetaInfo`](https://github.com/nuxt/vue-meta/blob/74182e388ad1b1977cb7217b0ade729321761403/types/vue-meta.d.ts#L173)
 
   SEO object provided mostly for use with [SEO - Improving Performance](../seo#improving-performance).
 
@@ -109,6 +118,12 @@ Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class
 
 ### Properties
 
+#### defaultDirection
+
+  - **Type**: `Directions`
+
+  Default direction as specified in options.
+
 #### defaultLocale
 
   - **Type**: `string`

docs/content/en/options-reference.md

@@ -54,23 +54,45 @@ List of locales supported by your app. Can either be an array of codes (`['en',
 
 ```js
 [
-  { code: 'en', iso: 'en-US', file: 'en.js' },
-  { code: 'fr', iso: 'fr-FR', file: 'fr.js' },
-  { code: 'es', iso: 'es-ES', file: 'es.js' }
+  { code: 'en', iso: 'en-US', file: 'en.js', dir: 'ltr' },
+  { code: 'ar', iso: 'ar-EG', file: 'ar.js', dir: 'rtl' }
+  { code: 'fr', iso: 'fr-FR', file: 'fr.js', },
 ]
 ```
 
 When using an object form, the properties can be:
 - `code` (**required**) - unique identifier of the locale
-- `iso` (required when using SEO features and) - The ISO code used for SEO features and for matching browser locales when using [detectBrowserLanguage](#detectbrowserlanguage) functionality. Should be in one of those formats:
+- `iso` (required when using SEO features) - The ISO code used for SEO features and for matching browser locales when using [detectBrowserLanguage](#detectbrowserlanguage) functionality. Should be in one of those formats:
   * ISO 639-1 code (e.g. `'en'`)
   * ISO 639-1 and ISO 3166-1 alpha-2 codes, separated by hyphen (e.g. `'en-US'`)
 - `file` (required when using `lazy`) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
+- `dir`  The dir property specifies the direction of the elements and content, value could be `'rtl'`, `'ltr'` or `'auto'`.
 - `domain` (required when using `differentDomains`) - the domain name you'd like to use for that locale (including the port if used)
 - `...` - any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.
 
 You can access all the properties of the current locale through the `localeProperties` property. When using an array of codes, it will only include the `code` property.
 
+<alert type="info">
+
+For direction attribute to be set, you MUST use the `$nuxtI18nHead` method in your layout.
+
+```js {}[layouts/default.vue]
+export default {
+  head () {
+    return this.$nuxtI18nHead()
+  }
+}
+```
+
+</alert>
+
+## `defaultDirection`
+
+- type: `string`
+- default: `ltr`
+
+The app's default direction. Will only be used when `dir` is not specified. 
+
 ## `defaultLocale`
 
 - type: `string` or `null`
@@ -149,12 +171,18 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
 }
 ```
 
-## `seo`
+## `seo` (<badge>deprecated</badge>)
+
+<alert type="warning">
+
+This option is deprecated from v6.19.0. The recommended way is to set up SEO as described in [Improving performance](/seo#improving-performance).
+
+</alert>
 
 - type: `boolean`
 - default: `false`
 
-If `true`, a SEO metadata will be generated for the routes. Note that performance can suffer with this option enabled and there might be compatibility issues with some plugins. The recommended way is to set up SEO as described in [Improving performance](/seo#improving-performance).
+If `true`, a SEO metadata will be generated for the routes. Note that performance can suffer with this option enabled and there might be compatibility issues with some plugins.
 
 ## `differentDomains`
 

docs/content/en/seo.md

@@ -7,7 +7,7 @@ category: Guide
 
 <alert type="info">
 
-Using `seo` option (or alternatively the `$nuxtI18nSeo`-based solution - see [Improving Performance](#improving-performance)) requires that locales are configured as an array of objects and not strings.
+Using `seo` option (or preferably the `$nuxtI18nHead`-based solution - see [Improving Performance](#improving-performance)) requires that locales are configured as an array of objects and not strings.
 
 </alert>
 
@@ -141,15 +141,15 @@ export default {
 }
 ```
 
-To override SEO metadata for any page, simply declare your own `head ()` method. Have a look at [src/templates/seo-head.js](https://github.com/nuxt-community/i18n-module/blob/master/src/templates/seo-head.js) if you want to copy some of **nuxt-i18n**'s logic.
+To override SEO metadata for any page, simply declare your own `head ()` method. Have a look at [src/templates/head-meta.js](https://github.com/nuxt-community/i18n-module/blob/master/src/templates/head-meta.js) if you want to copy some of **nuxt-i18n**'s logic.
 
 ## Improving performance
 
 The default method to inject SEO metadata, while convenient, comes at a performance costs.
 The `head` method is registered for every component in your app.
 This means each time a component is created, the SEO metadata is recomputed for every components.
 
-To improve performance you can use the `$nuxtI18nSeo` method in your layout instead.
+To improve performance you can use the `$nuxtI18nHead` method in your layout instead.
 It will generate i18n SEO metadata for the current context.
 
 First make sure automatic SEO is disabled by setting `seo` to `false` in your configuration or removing that option completely:
@@ -160,12 +160,12 @@ First make sure automatic SEO is disabled by setting `seo` to `false` in your co
 }]
 ```
 
-Then in your app layout declare the [`head` hook](https://nuxtjs.org/guides/features/meta-tags-seo) and use `$nuxtI18nSeo` inside to generate i18n SEO meta information:
+Then in your app layout declare the [`head` hook](https://nuxtjs.org/guides/features/meta-tags-seo) and use `$nuxtI18nHead` inside to generate i18n SEO meta information:
 
 ```js {}[layouts/default.vue]
 export default {
   head () {
-    return this.$nuxtI18nSeo()
+    return this.$nuxtI18nHead({ addSeoAttributes: true })
   }
 }
 ```
@@ -177,24 +177,24 @@ Now SEO metadata will only be computed for the layout instead of every component
 
 ### Merging i18n SEO metadata with your own
 
-If you want to add your own meta in the layout you can easily merge the object returned by `$nuxtI18nSeo` with your own:
+If you want to add your own meta in the layout you can easily merge the object returned by `$nuxtI18nHead` with your own:
 
 ```js {}[layouts/default.vue]
 export default {
   head () {
-    const i18nSeo = this.$nuxtI18nSeo()
+    const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true })
     return {
       htmlAttrs: {
         myAttribute: 'My Value',
-        ...i18nSeo.htmlAttrs
+        ...i18nHead.htmlAttrs
       },
       meta: [
         {
           hid: 'description',
           name: 'description',
           content: 'My Custom Description'
         },
-        ...i18nSeo.meta
+        ...i18nHead.meta
       ],
       link: [
         {
@@ -203,7 +203,7 @@ export default {
           sizes: '180x180',
           href: '/apple-touch-icon.png'
         },
-        ...i18nSeo.link
+        ...i18nHead.link
      ]
     }
   }

docs/content/es/api.md

@@ -57,11 +57,20 @@ Todos los [Vue I18n propiedades y métodos](http://kazupon.github.io/vue-i18n/ap
 
   See also [Basic usage - nuxt-link](../basic-usage#nuxt-link).
 
-#### $nuxtI18nSeo
+#### $nuxtI18nHead
+
+  - **Arguments**:
+    - options: (type: [`NuxtI18nHeadOptions`](https://github.com/nuxt-community/i18n-module/blob/master/types/nuxt-i18n.d.ts))
+  - **Returns**: [`MetaInfo`](https://github.com/nuxt/vue-meta/blob/74182e388ad1b1977cb7217b0ade729321761403/types/vue-meta.d.ts#L173)
+
+  If `options.addDirAttribute` is set to `false`, the `dir` attribute will not be added.
+  If `options.addSeoAttributes` is set to `true`, the seo attributes will be added.
+
+#### $nuxtI18nSeo <badge>deprecated (use `$nuxtI18nHead`)</badge>
 
   - **Arguments**:
     - no arguments
-  - **Returns**: `NuxtI18nSeo`
+  - **Returns**: [`MetaInfo`](https://github.com/nuxt/vue-meta/blob/74182e388ad1b1977cb7217b0ade729321761403/types/vue-meta.d.ts#L173)
 
   SEO object provided mostly for use with [SEO - Improving Performance](../seo#improving-performance).
 
@@ -109,6 +118,12 @@ Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class
 
 ### Properties
 
+#### defaultDirection
+
+  - **Type**: `Directions`
+
+  Default direction as specified in options.
+
 #### defaultLocale
 
   - **Type**: `string`

docs/content/es/options-reference.md

@@ -54,23 +54,45 @@ List of locales supported by your app. Can either be an array of codes (`['en',
 
 ```js
 [
-  { code: 'en', iso: 'en-US', file: 'en.js' },
-  { code: 'fr', iso: 'fr-FR', file: 'fr.js' },
+  { code: 'en', iso: 'en-US', file: 'en.js', dir: 'ltr' },
+  { code: 'ar', iso: 'ar-EG', file: 'ar.js', dir: 'rtl' }
   { code: 'es', iso: 'es-ES', file: 'es.js' }
 ]
 ```
 
 When using an object form, the properties can be:
 - `code` (**required**) - unique identifier of the locale
-- `iso` (required when using SEO features and) - The ISO code used for SEO features and for matching browser locales when using [detectBrowserLanguage](#detectbrowserlanguage) functionality. Should be in one of those formats:
+- `iso` (required when using SEO features) - The ISO code used for SEO features and for matching browser locales when using [detectBrowserLanguage](#detectbrowserlanguage) functionality. Should be in one of those formats:
   * ISO 639-1 code (e.g. `'en'`)
   * ISO 639-1 and ISO 3166-1 alpha-2 codes, separated by hyphen (e.g. `'en-US'`)
 - `file` (required when using `lazy`) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
+- `dir`  The dir property specifies the direction of the elements and content, value could be `'rtl'`, `'ltr'` or `'auto'`.
 - `domain` (required when using `differentDomains`) - the domain name you'd like to use for that locale (including the port if used)
 - `...` - any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.
 
 You can access all the properties of the current locale through the `localeProperties` property. When using an array of codes, it will only include the `code` property.
 
+<alert type="info">
+
+For direction attribute to be set, you MUST use the `$nuxtI18nHead` method in your layout.
+
+```js {}[layouts/default.vue]
+export default {
+  head () {
+    return this.$nuxtI18nHead()
+  }
+}
+```
+
+</alert>
+
+## `defaultDirection`
+
+- type: `string`
+- default: `ltr`
+
+The app's default direction. Will only be used when `dir` is not specified.
+
 ## `defaultLocale`
 
 - type: `string` or `null`
@@ -149,12 +171,18 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
 }
 ```
 
-## `seo`
+## `seo` (<badge>deprecated</badge>)
+
+<alert type="warning">
+
+This option is deprecated from v6.19.0. The recommended way is to set up SEO as described in [Improving performance](/seo#improving-performance).
+
+</alert>
 
 - type: `boolean`
 - default: `false`
 
-If `true`, a SEO metadata will be generated for the routes. Note that performance can suffer with this option enabled and there might be compatibility issues with some plugins. The recommended way is to set up SEO as described in [Improving performance](/seo#improving-performance).
+If `true`, a SEO metadata will be generated for the routes. Note that performance can suffer with this option enabled and there might be compatibility issues with some plugins.
 
 ## `differentDomains`
 

docs/content/es/seo.md

@@ -7,7 +7,7 @@ category: Guía
 
 <alert type="info">
 
-Using `seo` option (or alternatively the `$nuxtI18nSeo`-based solution - see [Improving Performance](#improving-performance)) requires that locales are configured as an array of objects and not strings.
+Using `seo` option (or preferably the `$nuxtI18nHead`-based solution - see [Improving Performance](#improving-performance)) requires that locales are configured as an array of objects and not strings.
 
 </alert>
 
@@ -140,15 +140,15 @@ export default {
 }
 ```
 
-Para anular los metadatos de SEO para cualquier página, simplemente declare su propio método `head ()`. Echa un vistazo a [src/templates/seo-head.js](https://github.com/nuxt-community/i18n-module/blob/master/src/templates/seo-head.js) si quieres copie parte de la lógica de  **nuxt-i18n**.
+Para anular los metadatos de SEO para cualquier página, simplemente declare su propio método `head ()`. Echa un vistazo a [src/templates/head-meta.js](https://github.com/nuxt-community/i18n-module/blob/master/src/templates/head-meta.js) si quieres copie parte de la lógica de  **nuxt-i18n**.
 
 ## Mejora del rendimiento
 
 El método predeterminado para inyectar metadatos de SEO, aunque conveniente, tiene un costo de rendimiento.
 El método `head` se registra para cada componente de su aplicación.
 Esto significa que cada vez que se crea un componente, los metadatos de SEO se vuelven a calcular para cada componente.
 
-Para mejorar el rendimiento, puede utilizar el método `$nuxtI18nSeo` en su diseño. Generará metadatos de SEO i18n para el contexto actual.
+Para mejorar el rendimiento, puede utilizar el método `$nuxtI18nHead` en su diseño. Generará metadatos de SEO i18n para el contexto actual.
 
 Primero, asegúrese de que el SEO automático esté desactivado estableciendo `seo` en `false` en su configuración o eliminando esa opción por completo:
 
@@ -158,12 +158,12 @@ Primero, asegúrese de que el SEO automático esté desactivado estableciendo `s
 }]
 ```
 
-Luego, en el diseño de su aplicación, declare el [`head` hook](https://nuxtjs.org/guides/features/meta-tags-seo) y use `$nuxtI18nSeo` dentro para generar la metainformación i18n SEO:
+Luego, en el diseño de su aplicación, declare el [`head` hook](https://nuxtjs.org/guides/features/meta-tags-seo) y use `$nuxtI18nHead` dentro para generar la metainformación i18n SEO:
 
 ```js {}[layouts/default.vue]
 export default {
   head () {
-    return this.$nuxtI18nSeo()
+    return this.$nuxtI18nHead({ addSeoAttributes: true })
   }
 }
 ```
@@ -174,24 +174,24 @@ Si tiene más diseños, no olvide agregarlo allí también.
 
 ### Combinando metadatos de SEO i18n con los tuyos
 
-Si desea agregar su propio meta en el diseño, puede combinar fácilmente el objeto devuelto por `$nuxtI18nSeo` con el suyo:
+Si desea agregar su propio meta en el diseño, puede combinar fácilmente el objeto devuelto por `$nuxtI18nHead` con el suyo:
 
 ```js {}[layouts/default.vue]
 export default {
   head () {
-    const i18nSeo = this.$nuxtI18nSeo()
+    const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true })
     return {
       htmlAttrs: {
         myAttribute: 'My Value',
-        ...i18nSeo.htmlAttrs
+        ...i18nHead.htmlAttrs
       },
       meta: [
         {
           hid: 'description',
           name: 'description',
           content: 'My Custom Description'
         },
-        ...i18nSeo.meta
+        ...i18nHead.meta
       ],
       link: [
         {
@@ -200,7 +200,7 @@ export default {
           sizes: '180x180',
           href: '/apple-touch-icon.png'
         },
-        ...i18nSeo.link
+        ...i18nHead.link
      ]
     }
   }

src/helpers/constants.js

@@ -5,6 +5,7 @@ exports.MODULE_NAME = packageJson.name
 exports.ROOT_DIR = 'nuxt-i18n'
 exports.LOCALE_CODE_KEY = 'code'
 exports.LOCALE_ISO_KEY = 'iso'
+exports.LOCALE_DIR_KEY = 'dir'
 exports.LOCALE_DOMAIN_KEY = 'domain'
 exports.LOCALE_FILE_KEY = 'file'
 
@@ -24,6 +25,7 @@ exports.DEFAULT_OPTIONS = {
   vueI18nLoader: false,
   locales: [],
   defaultLocale: '',
+  defaultDirection: 'ltr',
   routesNameSeparator: '___',
   defaultLocaleRouteNameSuffix: 'default',
   strategy: STRATEGIES.PREFIX_EXCEPT_DEFAULT,