RTL

By adding an RTL layout, we have made the project more accessible and welcoming to consumers from all linguistic backgrounds.

Define the default direction

To enable the RTL layout, simply set the dir property to rtl in app.config.js. This setting will be saved in localStorage with the key name dir.

Writing RTL compatible SCSS

CSS logical attributes determine the layout and style of a webpage based on directional values. This allows us to construct more flexible and maintainable layouts, particularly for websites that support many languages and writing directions.

For example, rather than using physical attributes like margin-left and margin-right, you may use logical properties like margin-inline-start and margin-inline-end to position elements depending on text direction.

Mutating direction and locale at runtime

We've created a changeDiraction in src/store/localeStore, allowing you to change the value dynamically.

Here's how to get/change the direction:

<template>
  <div>
    <p> Current direction is {{dir}} </p>
    <EBtn @click="toggleDir"> Toggle direction</EBtn>
  </div>
</template>

<script setup>
  import {useLocaleStore} from "@/store/LocaleStore.js"

  const localeStore = useLocaleStore()
  const {dir} = storeToRefs(LocaleStore)

  const toggleDir = () => {
    if (dir.value === 'rtl') localeStore.changeDir('ltr')
    else localeStore.changeDir('rtl')
  }

</script>

Here's how to get/change the locale:

<template>
  <EBtn @click="toggleLocale"> Chane to Arabic</EBtn>
</template>

<script setup>
  // ** Store Imports
  import {useLocaleStore} from "@/store/LocaleStore.js"

  const localeStore = useLocaleStore()

  // This is how you get the current locale value
  const {locale} = storeToRefs(localeStore)

  const toggleLocale = () => {
    // @possible-values: Pick any language you've included in the locale store.
    localeStore.changeLocale('ar')
  }
</script>

<style lang="scss" scoped>
  :deep(.flag-list) {
    & > div {
      margin: 0 !important;
    }
  }
</style>

Related Pages

• Localization

Note

We auto store the direction in local storage with the rtl key name to preserve your browsing history during reloads.