RTL ​

Changing direction to RTL ​

For changing direction to RTL just set app.isRtl in theme config to true

Writing RTL compatible SCSS ​

For RTL, we use logical properties just like vuetify for styles.

Logical properties allows writing style for both LTR & RTL without any extra efforts.

We are using stylelint to convert existing property into logical property on save. E.g. If you write width: 100px; then stylelint will show linting error suggesting we should write inline-size instead of width. Without changing width to inline-size if you save your file in VSCode, stylelint will automatically fix this and convert width to inline-size 😍

Mutating direction at runtime ​

To get current direction of the app, you can use useConfigStore composable:

import { useConfigStore } from '@core/stores/config'

const configStore = useConfigStore()

e.g. Set app direction to RTL via:

import { useConfigStore } from '@core/stores/config'

const configStore = useConfigStore()

configStore.isAppRTL = true