changing direction of page without reloading the page in vue

Question

I want when a value is changed in Pinia, to also change the direction of the page, the code works fine but the page is reloaded and I don't want the page to be reloaded.

Here is my App.vue

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

theme.value === "dark" ? document.documentElement.classList.add("dark") : false; //works
language.value === 'ar' ? document.documentElement.setAttribute('dir','rtl'): false // need to relad the page
</script>

<template>
  <router-view></router-view>
</template>

Answer 1

Try wrapping your content in another element instead of modifying the document. Also, use a computed property for reactivity.

<script setup>
import { useaCountdownStore } from "./stores/countdowns";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const store = useaCountdownStore();
const { theme, language } = storeToRefs(store);

const direction = computed(() => language.value === 'ar' ? 'rtl' : 'auto')
</script>

<template>
  <div :class="theme" :dir="direction">
    <router-view></router-view>
  </div>
</template>