How to switch styles in a vue vuetify app when changing the languge?-CodePudding

so I am building a vueJs app using vuetify and vue-i18n for internationalization so i have this font-family that I want just to be applied on the Arabic language, so I will be switching styles when changing the language. For now that's my function :

changeLanguage: function (lang) {
      this.$i18n.locale = lang
      localStorage.setItem('lang',lang);
    },

knowing that I can apply the rtl functionality that comes with vuetify but does it give me options to change the font-family (load a different style) ? if not is there any solution for this problem ? thanks

CodePudding user response：

You can do it with Customizing.

This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application. Example:

   changeLanguage: function (lang) {
      this.$i18n.locale = lang
      localStorage.setItem('lang',lang);
      this.$vuetify.theme.dark = true/false
      //or
      this.$vuetify.theme.themes.dark.primary = '#4caf50'
    },

CodePudding user response：

I found a solution, which is very simple: I created two files :

// ArabicFont.css
*{

}