vue-languages-dropdown

vue-languages-dropdown

Vue2 Languages dropdown component with search functionality

Installation

npm install vue-languages-dropdown --save

yarn add vue-languages-dropdown

Usage

import LanguagesDropdown from 'vue-languages-dropdown'

var app = new Vue({
    el: '#app',
    components:{
      'languages-dropdown' : LanguagesDropdown
    },
    data: {
      selectedLang : "en",
      selectedList : ['en','ur','ar']
    },
    methods: {
    	optionSelected: function (data) {        
         console.log(data)
      }
    }
});

Html

<languages-dropdown selected="ur" :selected-languages="selectedList" v-on:change="optionSelected"></languages-dropdown>

Props

Methods

This plugin emits an event on change, so that you can get the data upon language change. This will emit a data object on change You can bind this method on change as

v-on:change="yourMethodName"

as shown in above example.

You will receive the following data on language change event.

Credits & Highlights

The flags sprite image and css taken from flag-sprite.com