Vue-langsStyle
an easy way to support multiple fonts for multiple languages in the same page.
live demo
https://zed-magdy.github.io/Vue-langsStyle/
installing
npm i vue-langstyle --save
For vue cli
import Vue from 'vue'
import langStyle from 'vue-langstyle'
Vue.use(langStyle);
// then you can add configs
langStyle.config({lang:"ch",Class: "zed"}); //default lang is ar
For Nuxt
~/plugins/langStyle
import Vue from 'vue'
import langStyle from 'vue-langstyle'
Vue.use(langStyle);
langStyle.config({lang:"ch",Class: "zed"}); //default lang is ar
~/nuxt.config.js
plugins: [
{src: "~/plugins/langStyle.js"}
],
Add some style to the language
.zed {
font-size: 25px;
color: red
}
Style function
style(text :string) returns String (HTML)
Full example
<template>
<div>
<p v-html="text"></p>
</div>
</template>
<script>
export defaults {
data(){
return {
text: ""
}
},
mounted(){
// api call to get the text
.then(resp => {
this.text = this.$langStyle.style(resp.text)
})
}
}
</script>
You can use customLang function
customLang function
customLang({
Regex :string Regular expression for the language or the word,
Class :string The class will be given to the language or word (Optional Default "custom"),
Text :string The article body or the content that will be changed
})
this.text = this.$langStyle.customLang({Regex: /[\u0600-\u06FF]/,Class: "zed", Text: this.text});
If you wanna use east asia language and arabic in the same page
You can use customLang for that
Example
<template>
<div>
<h1>Home</h1>
<p v-html="text"></p>
</div>
</template>
<script>
export default {
data (){
return {
text: "obis 龯 mollitia اهلا, velit sunt quidem 龯? Lorem ipsum dolor sit amet, 龯 مرحبا elit. Harum placeat facilis alias كيف حالك aut laborum labore totam, id dicta soluta 龯 龯, dolore n"
}
},
mounted() {
this.text = this.$langStyle.style(this.text)
this.text = this.$langStyle.customLang({Regex: this.$langStyle.defaults.langs.east_asia,Class: "east_asia",Text: this.text})
}
}
</script>
<style>
.east_asia {
color: red;
font-family:///
}
.zed {
color: blue;
font-family:---
}
</style>