1.0.2 • Published 4 years ago
vue-simple-translation v1.0.2
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
}
export default ar;
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
}
export default en;
Now in main.js file we need to save our plugin ( https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin )
// /src/mains.js
import Vue from 'vue';
// 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/... )
import ar from './Lang/ar.js'
import en from './Lang/en.js'
// then we import the plugin
import vueSimpleTranslation from 'vue-simple-translation';
//end we use it with our keys-text files
Vue.use(vueSimpleTranslation ,{ar,en});
all we have to do is call the "vue-simple-translation" functions and see the magic
//exp: test.vue
<template>
<p> {{$Lang('hMessage.read')}} </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="#">{{ item.title }}</a>
</div>
</div>
</template>
<script>
export default {
data: () => ({
Translation_value_name : "Translation",
items:[
{ title: 'العربية' , value:'ar'},
{ title: 'English' , value:'en'},
],
}),
created(){
this.Translation_value_name = this.$GetFullUserLang() ? this.$GetFullUserLang() : "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 |