Country Code Select with Vue.
Checkout Demo at Github pages.
yarn add vue-country-code
npm i --save vue-country-code
Install as a global component:
import Vue from "vue";
import VueCountryCode from "vue-country-code";
Vue.use(VueCountryCode);
In your component:
<template>
...
<vue-country-code
@onSelect="onSelect"
<!-- optional -->
:preferredCountries="['vn', 'us', 'gb']">
</vue-country-code>
...
<template>
<script>
export default {
data() {
return {
};
},
methods: {
onSelect({name, iso2, dialCode}) {
console.log(name, iso2, dialCode);
},
},
}
</script>
Manual Trigger:
<template>
...
<vue-country-code
ref="vcc"
@onSelect="onSelect"
</vue-country-code>
<button @click="manualTrigger">Manual Trigger</button>
...
<template>
<script>
export default {
data() {
return {
};
},
methods: {
onSelect({name, iso2, dialCode}) {
console.log(name, iso2, dialCode);
},
manualTrigger() {
this.$refs.vcc.manualDropdown();
}
},
}
</script>
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 |
enabledCountryCode |
Boolean |
false |
Enable country code in the input |
enabledFlags |
Boolean |
true |
Enable flags in the input |
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 |
Property value | Arguments | Description |
---|---|---|
onSelect |
Object |
Fires when the input changes with the argument is the object includes { name, iso2, dialCode } |
# install dependencies
$ yarn/npm install
# compile demo and start serve for development
$ yarn/npm dev
# build
$ yarn/npm build
Made by Mon.