Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-country-select-2

tryexcept0322MIT1.0.1

Country Select with Vue

vue, telephone, phone, country, vue-country-code, phone code, country code, vue-country-code-select, country select, vue country select

readme

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

Vue Country Select 2

Country selection dropdown for vue 2.

vue-country-select-2

Installation

  • yarn:
      yarn add vue-country-select-2
  • npm:
      npm i --save vue-country-select-2

Usage

  • Install as a global component:

    import Vue from "vue";
import VueCountrySelect from "vue-country-select-2";

Vue.use(VueCountrySelect);

  • Or use in a specific component

    import VueCountrySelect from 'vue-country-select-2'

export default {
  components: {
    VueCountrySelect
  }
}

  • In your component:

    <template>
...
  <vue-country-select
    @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-select>
...
<template>
<script>
export default {
  methods: {
     onSelect({name, iso2, dialCode}) {
       console.log(name, iso2, dialCode);
     },
  },
}
</script>

  • Manual Trigger:

    <template>
...
  <vue-country-select
    ref="vcd"
    @onSelect="onSelect"
  </vue-country-select>
  <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

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
enabledFlags Boolean true Enable flags in the input
enabledCountryCode Boolean false Enable country code in the input
showNameInput Boolean false Shows the name of the selected country
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
defaultCountryByAreaCode Number 0 Same as default country option. finds the default country from list by area code.
showNotSelectedOption Boolean false The Not Selected option is added to the top of the list. The Iso2 and area code value are empty.
notSelectedOptionText String Not Selected Replace Not Selected text with another string.
immediateCallSelectEvent Boolean true Call the onSelect event when the component is mounted.
enablePreferredDivider Boolean true Enable divider line under the preferred countries list
enableSearchCountry Boolean true Enable search country by name

Events

Property value Arguments Description
onSelect Object Fires 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

Forked and updated by tryexcept0.