vue-langstyle

    1.1.1 • Public • Published

    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>
    
    

    Install

    npm i vue-langstyle

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    5.27 kB

    Total Files

    3

    Last publish

    Collaborators

    • zedmagdy