vue-country-code

Country Code Select with Vue.

Checkout Demo at Github pages.

Installation

• yarn:

  yarn add vue-country-code

• npm:

  npm i --save vue-country-code

Usage

• 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>

Props

Events

Highlights & Credits

• Forked from EducationLink/vue-tel-input.
• Vue app created by vue-cli.
• Telephone Number parsing, validation by libphonenumber-js.
• Country Codes data from intl-tel-input.
• Country Flags by behdad/region-flags.
• User's Location by get-json and ipifo.io

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo and start serve for development
$ yarn/npm dev

# build
$ yarn/npm build

Made by Mon.