vue-country-dropdown v2.0.8

This is a forked repository. The original repo is here. I'm just added some new features.

Vue Country Dropdown

Country selection dropdown for vue 2.

Demo

https://vue-country-dropdown.deta.dev/

Installation

• yarn:

    yarn add vue-country-dropdown

• npm:

    npm i --save vue-country-dropdown

Usage

• Install as a global component:

  import Vue from "vue";
  import VueCountryDropdown from "vue-country-dropdown";
  
  Vue.use(VueCountryDropdown);

• Or use in a specific component

  import VueCountryDropdown from 'vue-country-dropdown'
  
  export default {
    components: {
      VueCountryDropdown
    }
  }

• In your component:

  <template>
  ...
    <vue-country-dropdown
      @onSelect="onSelect"
      <!-- example props -->
      :preferredCountries="['TR', 'US', 'GB']">
      :disabledFetchingCountry="true"
      :defaultCountryByAreaCode="90"
      :immediateCallSelectEvent="true"
      :enabledFlags="true"
      :enabledCountryCode="true"
      :showNameInput="true"
      :showNotSelectedOption="true"
      :notSelectedOptionText="'Not Selected'"
    </vue-country-dropdown>
  ...
  <template>
  <script>
  export default {
    methods: {
       onSelect({name, iso2, dialCode}) {
         console.log(name, iso2, dialCode);
       },
    },
  }
  </script>

• Manual Trigger:

  <template>
  ...
    <vue-country-dropdown
      ref="vcd"
      @onSelect="onSelect"
    </vue-country-dropdown>
    <button @click="manualTrigger">Manual Trigger</button>
  ...
  <template>
  <script>
  export default {
    methods: {
       onSelect({name, iso2, dialCode}) {
         console.log(name, iso2, dialCode);
       },
       manualTrigger() {
         this.$refs.vcd.manualDropdown();
       }
    },
  }
  </script>

Props

Events

Highlights & Credits

• Original repository hantrongbinh/vue-country-code.
• 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. Forked and updated by Ahmet ALTUN.