Vue Country Dropdown 2

Country dropdown for Vue@2.

Demo

Installation

• yarn:

  1  yarn add vue-country-dropdown-2

• npm:

  1  npm i --save vue-country-dropdown-2

Usage

• Install as a global component:

  1import Vue from "vue";
  2import VueCountryDropdown from "vue-country-dropdown-2";
  3
  4Vue.use(VueCountryDropdown);

• Or use in a specific component

  1import VueCountryDropdown from 'vue-country-dropdown-2'
  2
  3export default {
  4  components: {
  5    VueCountryDropdown
  6  }
  7}

• In your component:

  1<template>
  2...
  3  <vue-country-dropdown
  4    @onSelect="onSelect"
  5    :preferredCountries="['TR', 'US', 'GB']"
  6    :defaultCountry="'TR'"
  7    :immediateCallSelectEvent="true"
  8    :enabledFlags="true"
  9    :enabledName="true"
  10    :enabledPhonecode="true"
  11    :showNotSelectedOption="true"
  12    :notSelectedOptionText="'Not Selected'"
  13    :disabled="false"
  14    :clearable="false"
  15    :multiple="false"
  16    :searchable="true"
  17    :closeOnSelect="true"
  18    :placeholder="'Select a country'"
  19  />
  20...
  21<template>
  22<script>
  23export default {
  24  methods: {
  25     onSelect(country) {
  26       console.log(country);
  27       // Check the country object example below.
  28     },
  29  },
  30}
  31</script>

Country Object Example

1{
2    "id": 225,
3    "name": "Turkey",
4    "iso3": "TUR",
5    "iso2": "TR",
6    "numeric_code": "792",
7    "phone_code": "+90",
8    "capital": "Ankara",
9    "currency": "TRY",
10    "currency_name": "Turkish lira",
11    "currency_symbol": "₺",
12    "tld": ".tr",
13    "native": "Türkiye",
14    "region": "Asia",
15    "subregion": "Western Asia",
16    "timezones": [
17        {
18            "zoneName": "Europe/Istanbul",
19            "gmtOffset": 10800,
20            "gmtOffsetName": "UTC+03:00",
21            "abbreviation": "EET",
22            "tzName": "Eastern European Time"
23        }
24    ],
25    "translations": {
26        "kr": "터키",
27        "br": "Turquia",
28        "pt": "Turquia",
29        "nl": "Turkije",
30        "hr": "Turska",
31        "fa": "ترکیه",
32        "de": "Türkei",
33        "es": "Turquía",
34        "fr": "Turquie",
35        "ja": "トルコ",
36        "it": "Turchia",
37        "cn": "土耳其",
38        "tr": "Türkiye"
39    },
40    "latitude": "39.00000000",
41    "longitude": "35.00000000",
42    "emoji": "🇹🇷",
43    "emojiU": "U+1F1F9 U+1F1F7"
44}

Props

Property value	Type	Default value	Description
disabled	Boolean	false	Disables the dropdown
defaultCountry	string	''	Set a country as selected at startup with iso code. ie 'TR'
defaultCountryByName	string	''	Set a country as selected at startup with name. ie 'Turkey'
defaultCountryByPhoneCode	string	''	Set a country as selected at startup with phone code. ie '+90'
enabledName	Boolean	true	Enable country name in the input
enabledFlags	Boolean	true	Enable flags in the input
enabledPhonecode	Boolean	true	Enable phone code in the input
clearable	Boolean	false	User can clear or not the selected country
multiple	Boolean	false	Select multiple country
searchable	Boolean	true	Set countries searchable
closeOnSelect	Boolean	true	Close country list on select
placeholder	String	''	Set a placeholder for the input
preferredCountries	Array	[]	Preferred countries list, will be on top of the dropdown. ie ['TR', 'US', 'AL']
onlyCountries	Array	[]	List of countries will be shown on the dropdown. ie ['TR', 'US', 'AL']
ignoredCountries	Array	[]	List of countries will NOT be shown on the dropdown. ie ['TR', 'US', 'AL']
immediateCallSelectEvent	Boolean	false	Call the onSelect event when the component is mounted.
showNotSelectedOption	Boolean	false	The Not Selected option is added to the top of the list. (All values are empty.)
notSelectedOptionText	String	Not Selected	Replace Not Selected text with another string.
countryNameTranslation	String	''	Shows the name in the translation object instead of the country default name. ie 'tr'

Events

Property value	Arguments	Description
onSelect	Object	Fires when the input changes with the argument is the object includes country object. (Check the country object example above)
open	none	Triggered when the dropdown is open.
close	none	Triggered when the dropdown is closed.
option_selecting	Object	Triggered after an option has been selected, before updating internal state. (Return same object with onSelect).
option_selected	Object	Triggered when an option has been selected, after updating internal state. (Return same object with onSelect).
option_deselecting	Object	Triggered when an option has been deselected, before updating internal state. (Return same object with onSelect).
option_deselected	Object	Triggered when an option has been deselected, after updating internal state. (Return same object with onSelect).

Highlights & Credits

• Data source: dr5hn/countries-states-cities-database
• Vue select: sagalbot/vue-select
• Vue app created by vue-cli.