vcc

vue-country-code

Vue2 Country Code Select

Showing:

Popularity

Downloads/wk

784

GitHub Stars

11

Maintenance

Last Commit

5mos ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

92.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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 valueTypeDefault valueDescription
defaultCountrystring''Default country, will override the country fetched from IP address of user
disabledFetchingCountryBooleanfalseDisable fetching current country based on IP address of user
enabledCountryCodeBooleanfalseEnable country code in the input
enabledFlagsBooleantrueEnable flags in the input
preferredCountriesArray[]Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR']
onlyCountriesArray[]List of countries will be shown on the dropdown. ie ['AU', 'BR']
ignoredCountriesArray[]List of countries will NOT be shown on the dropdown. ie ['AU', 'BR']
dropdownOptionsObject{ disabledDialCode: false }Options for dropdown, supporting disabledDialCode

Events

Property valueArgumentsDescription
onSelectObjectFires when the input changes with the argument is the object includes { name, iso2, dialCode }

Highlights & Credits

Demo Usage


# install dependencies
$ yarn/npm install

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

# build
$ yarn/npm build

Made by Mon.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100