RTL and LTR setup in a Vite Vue project

[RejownAhmed]

Hi, I am developing a vue website with bootstrap. I need rtl and ltr both functionality. Unfortunately, I don't find any good solutions anywhere, even the bootstrap doc is not very clear about it. Can you someone please help in this case?

[3baaady07]

Consider using postcss and integrate the postcss-rtlcss plugin by adding a postcss.config.js file and add configurations to it.

Here's a basic setup,

// postcss.config.js
import postcssRTLCSS from 'postcss-rtlcss';

export default {
   plugins: {
      ['postcss-rtlcss']: postcssRTLCSS(),
   },
}

[RejownAhmed]

Thanks, let me check

[3baaady07]

Here's an updated config code. Notice the omitted postcssRTLCSS() as I came to know that it is not needed. Please note that you need postcss-rtlcss for this to work. Run the command npm i -D postcss-rtlcss.

// postcss.config.js

export default {
   plugins: {
      ['postcss-rtlcss']: {},
   },
}