nuxt.js switch (direction and font) style on changing website language using vue-i18n

Question

I want to change global.scss (/assets/global.scss) into two files, one for 'fa' language and the other for 'en' language on folder assets.

//globalfa.scss
html{
direction:rtl !important
} 
body{
font-family:'Yekan'
}
//globalen.scss
html{
direction:ltr !important
} 
body{
font-family:'Roboto'
}

here is the part of the header.vue file which buttons 'fa' and 'en' are located:

<div class="d-flex header-inner">
        <b-button
          size="sm"
          class="btn-lang my-2 my-sm-0"
          type="submit"
          @click="setLangFarsi"
          >FA</b-button
        >
        <b-button
          size="sm"
          class="btn-lang my-2 my-sm-0"
          type="submit"
          @click="setLangEnglish"
          >En</b-button
        >
      </div>
<script>
methods: {
  setLangFarsi() {
  this.$i18n.locale = 'fa';
  },
  setLangEnglish() {
  this.$i18n.locale = 'en';
  }

},

</script>

currently global.scss on nuxt.config.js has been configed this way :

 ** Global CSS
   */
  css: ['~/assets/scss/global.scss', 'sweetalert2/dist/sweetalert2.min.css'],
  /*

Would someone kindly help how could I set Two global.scss files and choose between them by clicking at one of the buttons on the header.vue file?

Answer 1

I handle it by making a class name rtl-class and use it like this:

<div :class="$118n==="fa" ? 'rtl-class' : ''"></div>