Switching direction in Vue.js without needing to reload the page - Flip between rtl and ltr effortlessly

Question

Switching direction in Vue.js without needing to reload the page - Flip between rtl and ltr effortlessly

Currently, I am utilizing Vue.js along with vue-i18n to seamlessly switch between languages on my project without the necessity of refreshing the page. Nevertheless, when transitioning from Arabic to another language or vice versa, it requires changing the website's design direction from right-to-left to left-to-right.

The current setup necessitates a refresh to load the rtl.scss file:

Below is the code responsible for loading CSS upon refresh:

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

This next code snippet triggers a page refresh:

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

javascript webpack vue.js page-refresh vue-i18n

Answer 1

Answer №1

Following Jacob Goh's suggestion, here is how you can make the necessary changes:

Revise your initial code snippet to this:

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

Then update your second snippet to:

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

Finally, make adjustments to your rtl.scss file as shown below:

body.rtl {
  /* Previous scss styling */
}

Answer 2

Following Jacob Goh's suggestion, here is how you can make the necessary changes:

Revise your initial code snippet to this:

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

Then update your second snippet to:

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

Finally, make adjustments to your rtl.scss file as shown below:

body.rtl {
  /* Previous scss styling */
}

Answer 3

Answer №2

Here is a straightforward option instead of the solution that was originally proposed:

const {t, locale} = i18n.global;

watchEffect(() => {
    document.dir = t('text_direction');
    document.documentElement.lang = locale.value;
})

To make this work, you need to include a text_direction attribute for each language (at least in the default one if applicable), set to either rtl or ltr. Whenever the language changes, this code will update the root element's direction accordingly.

If needed, you can use this property in your CSS styling as well.

This method eliminates the need for specific conditions for every language that requires a different text direction.

Answer 4

Here is a straightforward option instead of the solution that was originally proposed:

const {t, locale} = i18n.global;

watchEffect(() => {
    document.dir = t('text_direction');
    document.documentElement.lang = locale.value;
})

To make this work, you need to include a text_direction attribute for each language (at least in the default one if applicable), set to either rtl or ltr. Whenever the language changes, this code will update the root element's direction accordingly.

If needed, you can use this property in your CSS styling as well.

This method eliminates the need for specific conditions for every language that requires a different text direction.

Switching direction in Vue.js without needing to reload the page - Flip between rtl and ltr effortlessly

Answer №1

Answer №2

Similar questions

What is the process by which jQuery delivers functions such as success and error?

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

The concept of JavaScript function aliasing appears to be ineffective

What is the best way to alter the header in Django when a user is authenticated?

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

Avoiding Memory Leaks and Managing JS Heap Size While Polling Large Amounts of Data Every 5 Seconds with Vuex

What is the best method for integrating both Jquery and Angularjs into a single project?

Encountering difficulties with displaying error messages on the Material UI datepicker

Seeking assistance to prevent data duplication when transferring information from list1 to list2 in React.js

Use multer-ftp to change the name of a file

What is the best way to modify this state without altering the original array?

Avoiding unnecessary Ajax requests using pushstate for pagination

Steps to assign the identifier as the current index in the v-for iteration

What could be the reason for the peculiar data being returned by Microsoft Graph list subscriptions?

Cross domain request in a simple HTML document

Troubleshooting Issue with jQuery replaceWith in Loop

My picture is refusing to load... Why does it keep saying "image not found"? Any thoughts on why this might be

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

What are the steps to implement timer control in Ajax using JavaScript?