Vue-country-select-2 NPM

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

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

Forked and updated by tryexcept0.

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

1.0.1

2 months ago

1.0.0

2 months ago