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

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

Events

| Property value | Arguments | Description | | -------------- | --------- | ------------------------------------------------------------------------------------------------ | | onSelect | Object | Fires when the input changes with the argument is the object includes { name, iso2, dialCode } |

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.