Package Exports

vue-langstyle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-langstyle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>