Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] Add dir attribute for each locale

See original GitHub issue

Is your feature request related to a problem? Please describe.

I’m using this package to translate my app, and now I’m adding an RTL locale. It would be great if nuxt-i18n could manage the body dir attribute.

Describe the solution you’d like

I propose to add a dir property for each locale in the module (values would be rtl, ltr or auto by default). For example:

// nuxt.config.js, inside nuxt-i18n module

locales: [
  { code: 'ar', iso: 'ar', file: 'ar/app.js', dir: 'rtl' },
  { code: 'en', iso: 'en-US', file: 'en/app.js', dir: 'ltr' },
  { code: 'fr', iso: 'fr-FR', file: 'fr/app.js', dir: 'ltr' },
],

Then this would be added in the HTML by setting a new dir attribute at a very top level of the document, for example in the <html> or <body> tag. I think it’s a mandatory feature for an i18n repo 😊

Describe alternatives you’ve considered

As for now I’m using a custom plugin and adding the dir property as soon as I can:

// plugins/ltr-rtl.js

export default function({ app }, inject) {
  const dir = () => app.i18n.locales.find((x) => x.code === app.i18n.locale)?.dir;
  inject( 'dir', dir);
}

<!-- layouts/default.vue -->

<div id="app" :dir="$dir()">
  My app here...
</div>

What do you think? 😊

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:15

github_iconTop GitHub Comments

8reactions
Mo7ammedMamdou7commented, Mar 4, 2022

@Mo7ammedMamdou7 it’s now supported out of the box. https://i18n.nuxtjs.org/options-reference/#locales Ref: #1023

Yes, bro thanks a lot for your support, This is the configuration I made and worked fine: First, I add this code to the i18n config in the nuxt.config.js file:

locales: [
      {
        code: 'ar',
        name: 'Arabic',
        iso: 'ar-UAE',
        file: 'ar.js',
        dir: 'rtl',
      },
      {
        code: 'en',
        name: 'English',
        iso: 'en-US',
        file: 'en.js',
        dir: 'ltr',
      },
    ],

Then I added this code to default.vue layout file:

head() {
    return this.$nuxtI18nHead({ addDirAttribute: true, addSeoAttributes: true })
  },
2reactions
iifawzicommented, Mar 4, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

[Feature Request] Add dir attribute for each locale #762 - GitHub
I'm using this package to translate my app, and now I'm adding an RTL locale. It would be great if nuxt-i18n could manage...
Read more >
HTMLElement.dir - Web APIs | MDN
The HTMLElement. dir property gets or sets the text writing directionality of the content of the current element. The text writing ...
Read more >
Tutorial - Customize Azure Active Directory attribute mappings ...
Select an existing Attribute Mapping to open the Edit Attribute screen. Here you can edit the user attributes that flow between Azure AD...
Read more >
How to set Locale for Transformation - Oxygen XML Forum
You should set the locale in the DITA source files by setting the xml:lang attribute at the DITA map level (for example by...
Read more >
Localized Versions of your Pages | Google Search Central
Add <link rel="alternate" hreflang=" lang_code "... > elements to your page header to tell Google all of the language and region variants of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[TypeScript] LocaleRoute should return Location

Next page

nuxt-i18n not working in production