Country Calling Code Select Component For Vue

Install & Download:

# Yarn
$ yarn add vue-country-code
# NPM
$ npm i vue-country-code

Description:

A lightweight and convenient country calling code select component for Vue applications.

How to use it:

1. Import and register the component.

import Vue from "vue";
import VueCountryCode from "vue-country-code";

Vue.use(VueCountryCode);

2. Add the vue-country-code to your component.

<template>
  <vue-country-code @onSelect="onSelect">
  </vue-country-code>
<template>

export default {
  data() {
    return {
    };
  },
  methods: {
     onSelect({name, iso2, dialCode}) {
       console.log(name, iso2, dialCode);
     },
  },
}

3. Full component props.

disabledFetchingCountry: {
  type: Boolean,
  default: false
},
disabled: {
  type: Boolean,
  default: false
},
disabledFormatting: {
  type: Boolean,
  default: false
},
defaultCountry: {
  // Default country code, ie: 'AU'
  // Will override the current country of user
  type: String,
  default: ""
},
enabledCountryCode: {
  type: Boolean,
  default: false
},
enabledFlags: {
  type: Boolean,
  default: true
},
preferredCountries: {
  type: Array,
  default: () => []
},
onlyCountries: {
  type: Array,
  default: () => []
},
ignoredCountries: {
  type: Array,
  default: () => []
},
dropdownOptions: {
  type: Object,
  default: () => ({})
},
selectedCountryCode: {
  type: Boolean,
  default: false
}

Preview: