# 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 (opens new window) 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
😍
WARNING
You need stylelint extension (opens new window) to convert property to logical property on save with proper configuration
# Mutating direction at runtime
To get current direction of the app, you can use useThemeConfig
composable:
import { useThemeConfig } from '@core/composable/useThemeConfig'
const { isAppRtl } = useThemeConfig()
isAppRtl
is ref (opens new window), you can set boolean value to mutate the app direction.
e.g. Set app direction to RTL via:
import { useThemeConfig } from '@core/composable/useThemeConfig'
const { isAppRtl } = useThemeConfig()
isAppRtl.value = true
← Demo configs Icons →