This documentation provides guidance on how to utilize multi-directional support in Akar with SSR support. Akar rely on Floating UI to position floating elements, which requires to be fed the current direction of the web app.
Akar components are LTR by default, but you are in control of what direction (only LTR, RTL, or both) you want to support. This section provides best practices to easily support RTL direction.
AConfigProvider is a wrapper component to provide global configurations, including the directionality of the web app.
When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the AConfigProvider component to ensure all of the primitives adjust their behavior based on the dir prop.
To make all Akar RTL, wrap your entire App in AConfigProvider and pass the dir prop with the value rtl.
Add the following code to your app.vue or main layout component:
<script setup lang="ts">
import { AConfigProvider } from 'akar';
</script>
<template>
<AConfigProvider dir="rtl">
<slot />
</AConfigProvider>
</template>
All Akar components that are wrapped in the provider inherit the dir attribute.
To dynamically change the direction of Akar, we could leverage the useTextDirection composable and combine it with our AConfigProvider.
But first, we need to install the @vueuse/core package.
Then in your root Vue file:
<script setup lang="ts">
import { useTextDirection } from '@vueuse/core';
import { AConfigProvider } from 'akar';
import { computed } from 'vue';
const textDirection = useTextDirection();
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr');
</script>
<template>
<AConfigProvider :dir="dir">
<slot />
</AConfigProvider>
</template>
To support SSR - when the server has no access to the html and its direction, set initialValue in useTextDirection.
<script setup lang="ts">
import { AConfigProvider } from 'akar'
import { useTextDirection } from '@vueuse/core'
const textDirection = useTextDirection({ initialValue: 'rtl' })
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>
<template>
<AConfigProvider :dir="dir">
<slot />
</AConfigProvider>
</template>
dir prop doesn't support auto as a value, so we need an intermediate Ref to explicitly define the direction.textDirection is a Ref, and by changing the value of it to either "ltr" or "rtl", the dir attribute on the html tag changes as well.
Some languages are written from LTR and others are written in RTL. In a multi-language web app, you need to configure directionality alongside the translations. This is a simplified guide on how to achieve that using akar primitives.
But first, let's install some required packages.
We rely on VueI18n to manage different translations we want to support.
pnpm add vue-i18n@latest
npm install vue-i18n@latest
bun add vue-i18n@latest
Go ahead and add some translations for the word "hello" in different languages at main.ts.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
const messages = {
en: {
hello: 'Hello',
},
fa: {
hello: 'درود',
},
ar: {
hello: 'مرحبا',
},
ja: {
hello: 'こんにちは',
}
}
const i18n = createI18n({
legacy: false, // you must set `false` to use the Composition API
locale: 'en', // set default locale
availableLocales: ['en', 'fa', 'ar', 'ja'],
messages,
})
createApp(App)
.use(i18n)
.mount('#app')
After setting the translations and adding the vue-i18n plugin, we need a language selector in your app.vue. By changing the language using this akar select primitive:
<script setup lang="ts">
import { useTextDirection } from '@vueuse/core';
import { AConfigProvider, ASelectContent, ASelectGroup, ASelectItem, ASelectItemIndicator, ASelectItemText, ASelectLabel, ASelectPortal, ASelectRoot, ASelectScrollDownButton, ASelectScrollUpButton, ASelectTrigger, ASelectValue, ASelectViewport, } from 'akar';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
type LanguageInfo = {
label: string;
value: string;
dir: 'ltr' | 'rtl';
};
const dir = useTextDirection({ initialValue: 'ltr' });
const { locale } = useI18n();
const selectedLanguage = ref<string>();
const languages: Array<LanguageInfo> = [
{ label: 'English', value: 'en', dir: 'ltr' },
{ label: 'Persian', value: 'fa', dir: 'rtl' },
{ label: 'Arabic', value: 'ar', dir: 'rtl' },
{ label: 'Japanese', value: 'ja', dir: 'ltr' },
];
function selectLanguage(newLanguage: string) {
const langInfo = languages.find((item) => item.value === newLanguage);
if (!langInfo) {
return;
}
dir.value = langInfo.dir;
locale.value = langInfo.value;
}
</script>
<template>
<AConfigProvider :dir="dir">
<div class="mx-auto p-10 flex flex-col gap-y-[8rem] max-w-[1400px] items-center justify-center">
<div class="text-2xl">
👋 {{ $t("hello") }}
</div>
<div class="text-2xl">
HTML is in <span class="text-bold text-purple-500">{{ dir }}</span> mode
</div>
<ASelectRoot
v-model="selectedLanguage"
@update:model-value="selectLanguage"
>
<ASelectTrigger
class="text-grass11 hover:bg-mauve3 data-[placeholder]:text-green9 text-[13px] leading-none px-[15px] outline-none rounded bg-white inline-flex gap-[5px] h-[35px] min-w-[160px] shadow-[0_2px_10px] shadow-black/10 items-center justify-between focus:shadow-[0_0_0_2px] focus:shadow-black"
aria-label="Customize options"
>
<ASelectValue placeholder="Select a language..." />
<Icon
icon="radix-icons:chevron-down"
class="h-3.5 w-3.5"
/>
</ASelectTrigger>
<ASelectPortal>
<ASelectContent
class="data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade will-change-[opacity,transform] rounded bg-white min-w-[160px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] z-[100]"
:side-offset="5"
>
<ASelectScrollUpButton
class="text-violet11 bg-white flex h-[25px] cursor-default items-center justify-center"
>
<Icon icon="radix-icons:chevron-up" />
</ASelectScrollUpButton>
<ASelectViewport class="p-[5px]">
<ASelectLabel class="text-mauve11 text-xs leading-[25px] px-[25px]">
Languages
</ASelectLabel>
<ASelectGroup>
<ASelectItem
v-for="(option, index) in languages"
:key="index"
class="text-grass11 data-[disabled]:text-mauve8 data-[highlighted]:bg-green9 data-[highlighted]:text-green1 text-[13px] leading-none pl-[25px] pr-[35px] rounded-[3px] flex h-[25px] select-none items-center relative data-[highlighted]:outline-none data-[disabled]:pointer-events-none"
:value="option.value"
>
<ASelectItemIndicator class="inline-flex w-[25px] items-center left-0 justify-center absolute">
<Icon icon="radix-icons:check" />
</ASelectItemIndicator>
<ASelectItemText>
{{ option.label }}
</ASelectItemText>
</ASelectItem>
</ASelectGroup>
</ASelectViewport>
<ASelectScrollDownButton
class="text-violet11 bg-white flex h-[25px] cursor-default items-center justify-center"
>
<Icon icon="radix-icons:chevron-down" />
</ASelectScrollDownButton>
</ASelectContent>
</ASelectPortal>
</ASelectRoot>
</div>
</AConfigProvider>
</template>