[SOLVED] Vue.js - Need to switch direction (rtl to ltr and vice versa) without reload

Vue.js - Need to switch direction (rtl to ltr and vice versa) without reload

I'm using Vue.js with vue-i18n to switch languages on my project without the need to refresh. However, when i want to switch between Arabic and anything else i need to change the website's design from (right to left) to (left to right) or vice versa.

It is currently made so that i would need a refresh to load my rtl.scss file:

This is the code that loads css on refresh:

let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  require('rtl.scss')
}

This is the code that makes the page refresh:

if (newLocale === 'ar' || oldLocale === 'ar') {
  window.location.reload()
}

Solution

Going off of Jacob Goh's comment you can do the following:

Change your first snippet to:

require('rtl.scss')
let locale = VueCookie.get('locale') || 'en'
if (locale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

and ur second to:

if (newLocale === 'ar' || oldLocale === 'ar') {
  document.querySelector('body').classList.toggle('rtl');
}

finally edit your rtl.scss file to:

body.rtl {
  /* Old scss */
}