Vue language Plugin

Vue Language plugin which translates text in any specified language with help of user defined language files.

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact

About The Project

(back to top)

Built With

• Vue.js
• Javascript

(back to top)

Getting Started

This is vue language plugin which helps to display words in any preferred language selected by user for your project.

Prerequisites

Requires minimum Versions

1. Vue - ^2.6
2. NPM - 6.13
3. Node - 12.14

Installation

npm i ankit-vue-language-lib

(back to top)

Usage

STEP 1: Create language files

Eg: en.js

export default
    {
        "title": "title",
        "Hello World": "Hello World"
    }

Eg: fr.js

export default
    {
        "title": "titre",
        "Hello World": "Bonjour le monde"
    }

STEP 2: Import plugin along with the language files

import languagePlugin from "ankit-vue-language-lib"
import store from './store/index'
import en from './language/en'
import fr from './language/fr'

STEP 3: Use plugin

Vue.use(languagePlugin, store, { 'en': en, 'fr': fr })

STEP 4: If you dont have vuex store install vuex and create store file

npm install vuex --save

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
    },
})

export default store

STEP 5: Use translate() from plugin

Syntax - translate(key_defined_in_language_file)

Eg: For template

<div>{{translate('Hello World')}}</div>

Eg: For script

<script>
export default{
  methods:{
    demo(){
      return this.translate('Hello world');
     }
  }
}
</script>

STEP 6: Set locale variable of the plugin to desired language using vuex store actions

 this.$store.commit("SET_LANGUAGE", 'fr'); //this sets locale language

STEP 7: Access state of store (OPTIONAL)

<script>
import { mapGetters } from "vuex";
export default {
  computed:{
     ...mapGetters(["language"]),
  }
  created(){
    console.log('store state',this.langauge);
  }
}

</script>

For more information on how to install and use plugin, please refer to this (https://github.com/ZoreAnkit/demo-vue-language)

(back to top)

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Ankit Zore - ankitzore2@gmail.com

Project Link: https://github.com/ZoreAnkit/ankit-vue-language-lib

(back to top)