I have and multi-language application and it will switch language via select input that toggle locale between 2 languages, on the other hand, I have 2 font-family that I want to toggle when the locale changed.
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import fa from '../i18n/vuetify/fa.ts';
import en from '../i18n/vuetify/en.ts';
Vue.use(Vuetify);
export default new Vuetify({
rtl: true,
lang: {
locales: { fa, en },
current: 'fa',
},
});
style.scss
// my font-faces
@import url('./fonts/gilroy/gilroy.css');
@import url('./fonts/yekan/yekan.css');
$font-family: 'YekanBakh'; //or Gilroy
.v-application {
font-family: $font-family, sans-serif !important;
[class*='text-'] {
font-family: $font-family, sans-serif !important;
}
}
LanguageSelector.vue
export default {
data: () => ({
languages: [
{
label: 'فـارسی',
value: 'fa',
icon: iranFlag,
},
{
label: 'English',
value: 'en',
icon: ukFlag,
},
],
selectedLanguage: {
label: 'فـارسی',
value: 'fa',
icon: iranFlag,
},
}),
watch: {
selectedLanguage(val) {
this.$vuetify.lang.current = val;
if (val === 'en') {
this.$vuetify.rtl = false;
} else {
this.$vuetify.rtl = true;
}
},
},
Although, there are different ways to achieve this, the logic is similar. You should have two separate files (e.g.: style.css and style.rtl.css) and with the getting help from your custom language service detect the direction of selected locale, after that apply corresponding style to your application. But, how we could achieve this target? It totally depends on your needs. You can do it manually or use something like this plugin.