vue-simple-translation
Installation
npm install vue-simple-translation
Usage
Create a .js file containing keys and texts, then you can duplicate that content and edit the text of each key and put it in another file .js
Examples
ar.js ( for the Arabic text )
const ar =Message :read : "إظهار الرسائل"write : "اكتب رسالة جديدة"//... other keys-text;
Now Just copy the last code and place it on en.js then modify it according to our language ( for the English text )
const en =Message :read : "Show messages"write : "Write a new message"//... other keys-text;
## Now in main.js file we need to save our plugin ( https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin )
// /src/mains.js;// Here You Can import your keys-text files// ( remember you can save your keys-text files anywhere you like for my case I choose to save them in /src/Lang/... )// then we import the plugin;//end we use it with our keys-text filesVue;
all we have to do is call the "vue-simple-translation" functions and see the magic
//exp: test.vue<template><p> </p> // result : Show messages</template>
by default, the current language will be retrieved from your browser but you can change it
<tempalte>// Here you can use a Dropdown on your toolbar to change Tranzlation using $ChangeCurrentLanguage() in my case i use Bootstrap v4.5// https://getbootstrap.com/docs/4.5/components/dropdowns/// you are free to customize your drop-down menu<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button><div class="dropdown-menu" aria-labelledby="dropdownMenuButton" v-for="(item, index) in items" :key="index" @click="$ChangeCurrentLanguage(item.value)" ><a class="dropdown-item" href="#"> itemtitle </a></div></div></template>
<script>Translation_value_name : "Translation"items:title: 'العربية' value:'ar'title: 'English' value:'en'{thisTranslation_value_name = this ? this : "Translation" ;}</script>
## Options
function | Description |
---|---|
$Lang('..') | here you can display the translated texts by specifying the keys |
$ChangeCurrentLanguage('...') | change the current language. |
$GetFullUserLang() | Get the full name of the current language , exp "English" |
$RightSideWindow() | If the current language is Arabic, the function returns true otherwise it returns false |