This is a forked repository. The original repo is here. I'm just added some new features.
Vue Country Dropdown
Country selection dropdown for vue 2.
Demo
https://country-dropdown-nuxt-demo.pages.dev/
Installation
Usage
-
Install as a global component:
import Vue from "vue";
import VueCountryDropdown from "vue-country-dropdown";
Vue.use(VueCountryDropdown);
-
Or use in a specific component
import VueCountryDropdown from 'vue-country-dropdown'
export default {
components: {
VueCountryDropdown
}
}
-
In your component:
<template>
...
<vue-country-dropdown
@onSelect="onSelect"
<!-- example props -->
:preferredCountries="['TR', 'US', 'GB']">
:disabledFetchingCountry="true"
:defaultCountryByAreaCode="90"
:immediateCallSelectEvent="true"
:enabledFlags="true"
:enabledCountryCode="true"
:showNameInput="true"
:showNotSelectedOption="true"
:notSelectedOptionText="'Not Selected'"
</vue-country-dropdown>
...
<template>
<script>
export default {
methods: {
onSelect({name, iso2, dialCode}) {
console.log(name, iso2, dialCode);
},
},
}
</script>
-
Manual Trigger:
<template>
...
<vue-country-dropdown
ref="vcd"
@onSelect="onSelect"
</vue-country-dropdown>
<button @click="manualTrigger">Manual Trigger</button>
...
<template>
<script>
export default {
methods: {
onSelect({name, iso2, dialCode}) {
console.log(name, iso2, dialCode);
},
manualTrigger() {
this.$refs.vcd.manualDropdown();
}
},
}
</script>
Props
| Property value | Type | Default value | Description |
|---|
defaultCountry | string | '' | Default country, will override the country fetched from IP address of user |
disabledFetchingCountry | Boolean | false | Disable fetching current country based on IP address of user |
enabledFlags | Boolean | true | Enable flags in the input |
enabledCountryCode | Boolean | false | Enable country code in the input |
showNameInput | Boolean | false | Shows the name of the selected country |
preferredCountries | Array | [] | Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR'] |
onlyCountries | Array | [] | List of countries will be shown on the dropdown. ie ['AU', 'BR'] |
ignoredCountries | Array | [] | List of countries will NOT be shown on the dropdown. ie ['AU', 'BR'] |
dropdownOptions | Object | { disabledDialCode: false } | Options for dropdown, supporting disabledDialCode |
defaultCountryByAreaCode | Number | 0 | Same as default country option. finds the default country from list by area code. |
showNotSelectedOption | Boolean | false | The Not Selected option is added to the top of the list. The Iso2 and area code value are empty. |
notSelectedOptionText | String | Not Selected | Replace Not Selected text with another string. |
immediateCallSelectEvent | Boolean | true | Call the onSelect event when the component is mounted. |
Events
| Property value | Arguments | Description |
|---|
onSelect | Object | Fires when the input changes with the argument is the object includes { name, iso2, dialCode } |
Highlights & Credits
Demo Usage
# install dependencies
$ yarn/npm install
# compile demo and start serve for development
$ yarn/npm dev
# build
$ yarn/npm build
Made by Mon.
Forked and updated by Ahmet ALTUN.
