vue-country-code-select

Country Code Select with Vue.

Checkout Demo at Github pages.

Installation

• yarn:

    yarn add vue-country-code-select

• npm:

    npm i --save vue-country-code-select

Usage

• Install as a global component:

  import Vue from "vue";
  import VueCountryCode from "vue-country-code-select";
  
  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>

• Register the new field as a global component

Props

| Property value | Type | Default value | Description | | ------------------------- | --------- | ----------------------------- | --------------------------------------------------------------------------- | | defaultCountry | string | '' | Default country, will override the country fetched from IP address of user | | searchPlaceholderText | string | '' | Default text - "Search country" | | enableSearchField | Boolean | '' | Default "false" | | 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 hantrongbinh/vue-country-code.
• 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.