[Vuejs]-Conditional rendering of things in component (ltr to rtl) with minimal duplication?

by

0👍

What you can do is use css flexbox and then use BEM:

<template>
  <div :class="['has-translation', `has-translation--${this.i18n.locale}`]">
    <h1>{{ $t('message') }}</h1>
    <button type="button">Button</button>
    <p>{{ $t('lorem_ipsum') }}</p>
  </div>
</template>

Then on your CSS you can do:

.has-translations.has-translations--en {
  text-align: left;
}

.has-translations.has-translations--ar {
  text-align: right;
}

If you would like to align (read justify) all lines to the right or left you can:

.has-translations {
  display: flex;
}

.has-translations.has-translations--en {
  justify-content: left;
}

.has-translations.has-translations--ar {
  justify-content: right;
}

I haven’t tested the code but this is a general idea I have used in my projects and worked great.

0👍

Since this is a lay-out related issue concering the base-structure of your application, my first thought would be to define this at the root of your applcication and not on every component. If your body has a class that define right-to-left, you can style you components accordingly. I don’t think your vue-components need to know this information.

Leave a comment